/* =============================================================================
   engine-view.css : scoring engine v2 blocks (see assets/js/engine-view.js).
   Builds on the tokens of app.css. Chart series colours were validated against
   the card surface (lightness band, CVD separation, contrast): do not swap them
   for the neon --accent, it is too light to read as a data mark.
   ========================================================================== */

.ev-root {
    --ev-series-1: #3987e5;                     /* calibrated consensus */
    --ev-series-2: #d55181;                     /* gusts */
    --ev-model: rgba(160, 186, 216, 0.42);      /* the 11 models: context, not identity */
    --ev-grid: rgba(160, 210, 255, 0.13);
    display: grid;
    /* minmax(0, ...) + min-width: 0 below: without them the scrollable hour strip
       stretches the track to its full content width and every block overflows the card. */
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 14px;
    text-align: left;
}
.ev-root > * { min-width: 0; }

.ev-muted { color: var(--fg-muted); font-weight: 400; }
.ev-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--fg-muted); }
.ev-loading { padding: 18px 0; font-size: 13px; color: var(--fg-muted); }

.ev-block {
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface-card);
}
.ev-block-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.ev-block-head h4 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: 0.01em; }
.ev-block-head .ev-muted { font-size: 11.5px; }

/* ---- session ------------------------------------------------------------ */
.ev-session {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-elevated);
}
.ev-session.is-nogo { border-color: color-mix(in srgb, var(--score-red) 55%, transparent); }
.ev-session-main { display: flex; align-items: baseline; gap: 10px; }
.ev-session-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); }
.ev-session-value { font-size: 26px; font-weight: 700; line-height: 1.1; }
.ev-session-side { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; }
.ev-confidence { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-muted); }
.ev-confidence strong { color: var(--fg); font-weight: 600; }
.ev-confidence-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--score-yellow); flex: none; }
.ev-confidence-high .ev-confidence-dot { background: var(--score-green); }
.ev-confidence-low .ev-confidence-dot { background: var(--score-orange); }

/* ---- hourly strip ---------------------------------------------------------
   Status colours carry the tier, the number carries the value: never colour alone. */
.ev-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(38px, 1fr);
    gap: 2px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    padding-bottom: 4px;
}
.ev-hour { scroll-snap-align: start; }
.ev-hour {
    --tier: var(--score-yellow);
    display: grid;
    justify-items: center;
    gap: 1px;
    padding: 5px 0 6px;
    min-width: 0;
    border: 0;
    border-top: 3px solid transparent;
    border-radius: 6px;
    background: color-mix(in srgb, var(--tier) 16%, transparent);
    color: var(--fg);
    font: inherit;
    cursor: pointer;
    transition: background 0.15s var(--ease);
}
/* Gold mixed into navy turns muddy brown: a perfect hour keeps the green fill of a
   very good one and earns a gold top edge instead. */
.ev-hour.ev-tier-gold { --tier: var(--score-green); border-top-color: var(--score-gold) !important; }
.ev-hour.ev-tier-green { --tier: var(--score-green); }
.ev-hour.ev-tier-yellow { --tier: var(--score-yellow); }
.ev-hour.ev-tier-orange { --tier: var(--score-orange); }
.ev-hour.ev-tier-red { --tier: var(--score-red); }
.ev-hour.in-session { border-top-color: var(--tier); background: color-mix(in srgb, var(--tier) 26%, transparent); }
.ev-hour.in-core { background: color-mix(in srgb, var(--tier) 40%, transparent); }
.ev-hour.is-night { opacity: 0.45; }
.ev-hour:hover, .ev-hour:focus-visible, .ev-hour.is-selected { outline: 2px solid var(--fg); outline-offset: -2px; }
.ev-hour-h { font-size: 11px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.ev-hour-h::after { content: 'h'; }
.ev-hour-score { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-hour-wind { font-size: 11px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.ev-hour-wind small { font-size: 9px; margin-left: 1px; }

.ev-hour-detail { margin-top: 10px; font-size: 13px; color: var(--fg-muted); min-height: 20px; }
.ev-hour-detail-head { color: var(--fg); margin-bottom: 6px; }
.ev-hour-facts { display: grid; gap: 3px; color: var(--fg); }
.ev-hour-facts strong { font-weight: 650; }
.ev-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin-top: 10px; }
.ev-sub { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'name val' 'bar bar'; gap: 2px 8px; font-size: 11.5px; }
.ev-sub-name { grid-area: name; color: var(--fg-muted); }
.ev-sub-val { grid-area: val; color: var(--fg); font-variant-numeric: tabular-nums; }
.ev-sub-bar { grid-area: bar; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ev-sub-fill { display: block; height: 100%; border-radius: 2px; background: var(--score-yellow); }
.ev-sub-fill.ev-tier-gold { background: var(--score-gold); }
.ev-sub-fill.ev-tier-green { background: var(--score-green); }
.ev-sub-fill.ev-tier-orange { background: var(--score-orange); }
.ev-sub-fill.ev-tier-red { background: var(--score-red); }

/* ---- sea state ---------------------------------------------------------- */
.ev-sea { display: flex; align-items: flex-end; gap: 8px; }
.ev-sea-col { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 2px; text-align: center; font-size: 11px; color: var(--fg-muted); }
.ev-sea-col strong { font-size: 15px; color: var(--fg); font-weight: 700; }
.ev-sea-bar { width: 22px; border-radius: 4px 4px 0 0; background: rgba(160, 186, 216, 0.55); }
.ev-sea-offshore { background: rgba(160, 186, 216, 0.3); }
.ev-sea-total .ev-sea-bar { background: var(--ev-series-1); }
.ev-sea-plus { padding-bottom: 22px; font-size: 16px; color: var(--fg-faint); }
.ev-sea-reef { display: grid; justify-items: center; gap: 3px; padding-bottom: 20px; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); }
.ev-sea-reef span { width: 2px; height: 56px; border-radius: 1px; background: var(--border-strong); }

/* ---- tides -------------------------------------------------------------- */
.ev-tides { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ev-tides li { display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.04); font-size: 12px; }
.ev-tides strong { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-tide-kind { color: var(--fg-muted); font-size: 11px; }

/* ---- model comparison chart --------------------------------------------- */
.ev-models > summary, .ev-table-wrap > summary { cursor: pointer; font-size: 14px; font-weight: 650; list-style-position: inside; }
.ev-models > summary .ev-muted { font-size: 11.5px; margin-left: 6px; }
.ev-models-body { margin-top: 12px; }
.ev-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; font-size: 12px; color: var(--fg-muted); }
.ev-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ev-key { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--ev-model); flex: none; }
.ev-key-consensus { border-top-color: var(--ev-series-1); }
.ev-key-gusts { border-top-color: var(--ev-series-2); }
.ev-key-raw { border-top: 6px solid rgba(160, 186, 216, 0.4); border-radius: 2px; }
.ev-key-cal { border-top: 6px solid var(--ev-series-1); border-radius: 2px; }
.ev-key-band { height: 8px; border: 0; border-radius: 2px; background: color-mix(in srgb, var(--ev-series-1) 22%, transparent); }

.ev-chart-wrap { position: relative; }
.ev-chart { display: block; width: 100%; height: auto; touch-action: pan-y; outline: none; }
.ev-chart:focus-visible { outline: 2px solid var(--border-glow); border-radius: 6px; }
.ev-grid { stroke: var(--ev-grid); stroke-width: 1; }
.ev-tick { fill: var(--fg-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ev-band { fill: var(--ev-series-1); opacity: 0.14; }
.ev-line-model { fill: none; stroke: var(--ev-model); stroke-width: 1; stroke-linejoin: round; }
.ev-line-consensus { fill: none; stroke: var(--ev-series-1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ev-line-gusts { fill: none; stroke: var(--ev-series-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ev-threshold { stroke: var(--fg-faint); stroke-width: 1; }
.ev-dot-consensus { fill: var(--ev-series-1); stroke: var(--bg-2); stroke-width: 2; }
.ev-dot-gusts { fill: var(--ev-series-2); stroke: var(--bg-2); stroke-width: 2; }
.ev-endlabel { fill: var(--fg); font-size: 11.5px; font-weight: 600; }
/* Labels that sit on top of the lines get a surface-coloured halo instead of a box. */
.ev-halo { paint-order: stroke; stroke: var(--bg-2); stroke-width: 4px; stroke-linejoin: round; }
.ev-cross { stroke: var(--fg-muted); stroke-width: 1; }

.ev-tip {
    position: absolute;
    top: 6px;
    z-index: 2;
    min-width: 172px;
    max-width: 240px;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: rgba(12, 26, 52, 0.96);
    box-shadow: var(--shadow-1);
    font-size: 11.5px;
    pointer-events: none;
}
.ev-chart-wrap.is-narrow .ev-tip {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    max-width: none;
    margin-top: 8px;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.04);
}
.ev-chart-wrap.is-narrow .ev-tip[hidden] { display: none; }
.ev-chart-wrap.is-narrow .ev-tip-head { grid-column: 1 / -1; }
.ev-chart-wrap.is-narrow .ev-tip-row span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-tip-head { margin-bottom: 4px; font-weight: 650; }
.ev-tip-row { display: grid; grid-template-columns: 16px auto 1fr; align-items: center; gap: 6px; color: var(--fg-muted); line-height: 1.5; }
.ev-tip-row strong { color: var(--fg-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.ev-tip-row.is-strong, .ev-tip-row.is-strong strong { color: var(--fg); font-weight: 650; }

.ev-table-wrap { margin-top: 12px; }
.ev-table-wrap > summary { font-size: 12.5px; font-weight: 500; color: var(--fg-muted); }
.ev-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ev-table th, .ev-table td { padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--ev-grid); white-space: nowrap; }
.ev-table th:first-child, .ev-table td:first-child { text-align: left; white-space: normal; }
.ev-table th { color: var(--fg-muted); font-weight: 500; }
.ev-table .is-consensus td { font-weight: 650; }
.ev-table-wrap { overflow-x: auto; }

/* ---- model reliability section (home) ----------------------------------- */
.ev-reliability {
    --ev-series-1: #3987e5;
    --ev-model: rgba(160, 186, 216, 0.42);
    --ev-grid: rgba(160, 210, 255, 0.13);
    margin: 28px 0 0;
    padding: 20px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}
.ev-reliability h2 { margin: 0 0 6px; font-size: 19px; }
.ev-rel { display: grid; gap: 9px; margin-top: 12px; }
.ev-rel-row { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(90px, 2fr) auto; grid-template-areas: 'name bars val' 'name bars bias'; align-items: center; gap: 0 12px; font-size: 12.5px; }
.ev-rel-name { grid-area: name; }
.ev-rel-bars { grid-area: bars; display: grid; gap: 2px; }
.ev-rel-bar { display: block; height: 6px; border-radius: 0 4px 4px 0; }
.ev-rel-raw { background: rgba(160, 186, 216, 0.4); }
.ev-rel-cal { background: var(--ev-series-1); }
.ev-rel-val { grid-area: val; text-align: right; font-variant-numeric: tabular-nums; }
.ev-rel-bias { grid-area: bias; text-align: right; font-size: 11px; }
.ev-rel-row.is-consensus { padding: 8px 0; border-top: 1px solid var(--ev-grid); border-bottom: 1px solid var(--ev-grid); }
.ev-rel-row.is-consensus .ev-rel-name { font-weight: 650; }

.ev-metrics .metric-detail { font-size: 11px; color: var(--fg-muted); }
.ev-metric .metric-value small { font-size: 0.62em; font-weight: 500; color: var(--fg-muted); margin-left: 2px; }

@media (max-width: 420px) {
    .ev-block, .ev-session { padding: 12px 10px; }
    .ev-sea { gap: 4px; }
    .ev-sea-bar { width: 16px; }
    .ev-session-value { font-size: 23px; }
    .ev-rel-row { grid-template-columns: 1fr auto; grid-template-areas: 'name val' 'bars bars' 'bias bias'; gap: 3px 10px; }
    .ev-rel-bias { text-align: left; }
}

/* ---- live anemometer ---------------------------------------------------- */
.ev-live {
    display: grid;
    gap: 6px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-elevated);
}
.ev-live-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; }
.ev-live-title { font-weight: 650; }
.ev-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--score-green); box-shadow: 0 0 0 0 color-mix(in srgb, var(--score-green) 60%, transparent); animation: ev-pulse 2.4s ease-out infinite; }
@keyframes ev-pulse { to { box-shadow: 0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .ev-live-dot { animation: none; } }
.ev-live-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 14px; }
.ev-live-value { font-size: 28px; font-weight: 700; line-height: 1.1; }
.ev-live-note { font-size: 12.5px; }
.ev-live-source { font-size: 11px; color: var(--fg-faint); }

/* ---- official vigilance ------------------------------------------------- */
/* Status colour on the dot and the left edge only: the text keeps its ink, and the
   level is always written out ("Vigilance orange ..."), never colour alone. */
.ev-vigi {
    --vigi: var(--score-green);
    display: grid;
    gap: 4px;
    margin: 0 0 16px;
    padding: 10px 16px;
    border: 1px solid var(--border-strong);
    border-left: 4px solid var(--vigi);
    border-radius: var(--radius);
    background: var(--surface-elevated);
    font-size: 13px;
}
.ev-vigi-yellow { --vigi: var(--score-yellow); }
.ev-vigi-orange { --vigi: var(--score-orange); }
.ev-vigi-red { --vigi: var(--score-red); }
.ev-vigi-head { display: flex; align-items: center; gap: 10px; }
.ev-vigi-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vigi); flex: none; }
.ev-vigi-title { font-weight: 650; }
/* An all-clear is a quiet line, not a headline. */
.ev-vigi-green .ev-vigi-title { font-weight: 500; }
.ev-vigi-orange .ev-vigi-title, .ev-vigi-red .ev-vigi-title { font-size: 15px; }
.ev-vigi-note { font-size: 13px; }
.ev-vigi-meta { font-size: 11px; color: var(--fg-faint); }
.ev-vigi-meta a { color: inherit; text-decoration: underline; }