/* Wind and sea traffic light (page /vento-e-mare/). Colour is never the only signal: every light has a text label and a symbol. */
.ws-page{max-width:var(--wrap);margin-inline:auto}
.ws-msg{margin:0 0 18px;padding:10px 14px;border-radius:var(--r-sm);background:var(--cream);border:1px solid var(--line)}
.ws-msg[hidden]{display:none}
.ws-now{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 22px;padding:0;list-style:none}
.ws-now li{padding:14px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line)}
.ws-now span{display:block;font-size:.85rem;color:#4A5963}
.ws-now strong{display:block;font-size:1.35rem;font-variant-numeric:tabular-nums;color:var(--navy)}
.ws-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.ws-card{padding:18px;border-radius:var(--r);background:#fff;border:1px solid var(--line);border-inline-start:8px solid #4A5963;box-shadow:var(--shadow)}
.ws-card h3{margin:0 0 10px;font-size:1.15rem;color:var(--navy)}
.ws-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-weight:700;background:#4A5963;color:#fff}
.ws-badge::before{content:"?";font-weight:800}
.ws-why{margin:10px 0 6px;min-height:2.6em}
.ws-ideal{margin:0;font-size:.88rem;color:#4A5963}
.ws-card[data-level=green]{border-inline-start-color:#1B6E3A}
.ws-card[data-level=green] .ws-badge{background:#1B6E3A}
.ws-card[data-level=green] .ws-badge::before{content:"\2713"}
.ws-card[data-level=yellow]{border-inline-start-color:#F2B705}
.ws-card[data-level=yellow] .ws-badge{background:#F2B705;color:#1a1a1a}
.ws-card[data-level=yellow] .ws-badge::before{content:"!"}
.ws-card[data-level=red]{border-inline-start-color:#B3261E}
.ws-card[data-level=red] .ws-badge{background:#B3261E}
.ws-card[data-level=red] .ws-badge::before{content:"\2715"}
.ws-foot{margin:14px 0 0;font-size:.85rem;color:#4A5963}
.ws-how{margin-top:28px}
.ws-how h2,.ws-safety h2{color:var(--navy)}
.ws-tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;margin:14px 0 8px}
.ws-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.ws-table th,.ws-table td{padding:10px 14px;text-align:start;border-bottom:1px solid var(--line)}
.ws-table thead th{background:var(--cream);color:var(--navy)}
.ws-note{font-size:.88rem;color:#4A5963}
.ws-safety{margin-top:24px;padding:18px;border-radius:var(--r);background:var(--cream);border:1px solid var(--line)}
@media(prefers-reduced-motion:no-preference){.ws-card{transition:border-color .2s}}