/* MarinePanel — top of the right rail. Marine domain is the main focus
   of the system, so this panel sits above the Assets/Live/RadarHealth
   stack. Compact data grid: each row is "label / value / arrow" with
   direction arrows where applicable. RTL-aware via logical properties.

   Given a heavier vertical content load (8 data rows + sub-row + celestial
   footer), override the rail's even-share flex so Marine gets ~50% more
   space than its peers. Without this the celestial row falls below the
   scroll fold at typical viewport heights and the operator misses the
   day/night cue at a glance. */
.ms-lagebild-col.right > .ms-marine-panel { flex: 1.6 1 0; }

.ms-marine-panel .ms-panel-body {
    padding: 6px 10px 10px;
}

.ms-marine-grid {
    display: grid;
    grid-template-columns: max-content 1fr auto;
    gap: 4px 10px;
    align-items: baseline;
    font-size: 12px;
}

.ms-marine-label {
    color: var(--ms-text-mute);
    font-family: var(--ms-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.ms-marine-value {
    color: var(--ms-text);
    font-family: var(--ms-font-mono);
    font-weight: 500;
    text-align: end;
    white-space: nowrap;
}

.ms-marine-sub {
    color: var(--ms-text-dim);
    font-family: var(--ms-font-mono);
    font-size: 10px;
    grid-column: 1 / -1;
    padding-inline-start: 12px;
    margin-block-end: 2px;
}

.ms-marine-arrow {
    display: inline-block;
    color: var(--ms-friend);
    margin-inline-start: 4px;
    font-size: 11px;
    line-height: 1;
    transform-origin: center;
    transition: transform 200ms ease-out;
}

.ms-marine-empty {
    padding: 16px 4px;
    text-align: center;
    color: var(--ms-text-mute);
    font-style: italic;
    font-size: 11px;
}

.ms-marine-source {
    margin-block-start: 8px;
    padding-block-start: 6px;
    border-block-start: 1px dashed var(--ms-panel-border);
    color: var(--ms-text-mute);
    font-family: var(--ms-font-mono);
    font-size: 9px;
    text-align: end;
    letter-spacing: 0.04em;
}

/* 6 h forecast-trend arrow — sits inline at the end of a value line.
   Colour communicates direction at a glance: rising = warn (sea state
   getting worse for ops), falling = ok (calming), stable = mute (no
   change to react to). Title attribute carries the projected value
   for hover detail. */
.ms-marine-trend {
    display: inline-block;
    margin-inline-start: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
}
.ms-marine-trend.rising  { color: var(--ms-warn-strong); }
.ms-marine-trend.falling { color: var(--ms-ok); }
.ms-marine-trend.stable  { color: var(--ms-text-mute); }

/* 24 h forecast sparkline — sits inline at the very end of the value
   line. Width is fixed (60 px) so it doesn't push the trend arrow off
   the row in narrow rails; the SVG stretches to fill via
   preserveAspectRatio="none" in the markup. Stroke colour follows the
   text-dim token so it stays a quiet companion to the live reading
   rather than competing with it.
   In RTL the sparkline still reads left→right (oldest → newest) — that
   is the universal forecast-chart convention regardless of script
   direction, so we do not flip it. */
.ms-marine-sparkline {
    display: inline-block;
    width: 60px;
    height: 16px;
    margin-inline-start: 6px;
    vertical-align: middle;
    overflow: visible;
}
.ms-marine-sparkline polyline {
    fill: none;
    stroke: var(--ms-text-dim);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Marine advisories — synthetic Gale/Storm/Rough-sea/Low-vis banners
   derived from the same Open-Meteo snapshot the data grid reads.
   Sit at the top of the panel body (above the data grid) so the
   first thing the operator sees on a worsening day is the headline,
   not the buried wave-height row. Stacked when multiple fire.
   Logical-property paddings keep RTL clean — icon + text reverse
   order automatically without any html[dir] override. */
.ms-marine-advisories {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-block-end: 8px;
}

.ms-marine-advisory {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 3px;
    font-family: var(--ms-font-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}
.ms-marine-advisory-icon {
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1;
}
.ms-marine-advisory-text {
    flex: 1;
    white-space: normal;
}

.ms-marine-advisory.advisory {
    background: color-mix(in srgb, var(--ms-warn) 14%, var(--ms-panel));
    color: var(--ms-warn);
    border: 1px solid color-mix(in srgb, var(--ms-warn) 35%, var(--ms-panel-border));
}
.ms-marine-advisory.warning {
    background: color-mix(in srgb, var(--ms-alert) 14%, var(--ms-panel));
    color: var(--ms-alert);
    border: 1px solid color-mix(in srgb, var(--ms-alert) 35%, var(--ms-panel-border));
}

/* Maritime classification chip (Beaufort, Sea State) — sits next to the
   row label so the operator's eye picks up F5 / SS3 alongside the raw
   value. Filled accent so it reads as a callout, not a number. */
.ms-marine-tag {
    display: inline-block;
    margin-inline-start: 4px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.5;
    background: var(--ms-panel-border);
    color: var(--ms-text);
    border-radius: 2px;
    vertical-align: middle;
    text-transform: none;
}

/* Daylight + moon footer — single horizontal row of three icon-time
   pairs. Reads compactly under the data grid; the moon glyph is an
   emoji so it picks up the OS native rendering. */
.ms-marine-celestial {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-block-start: 8px;
    padding-block-start: 6px;
    border-block-start: 1px dashed var(--ms-panel-border);
}
.ms-marine-celestial-cell {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--ms-font-mono);
    font-size: 11px;
    color: var(--ms-text-dim);
}
.ms-marine-celestial-icon {
    color: var(--ms-warn);
    font-size: 13px;
    line-height: 1;
}
.ms-marine-moon-glyph {
    color: inherit;
    font-size: 14px;
}
.ms-marine-celestial-time {
    color: var(--ms-text);
    font-weight: 500;
}