/* ============================================================
   CYMOTHOE · weather.css
   Page-specific rules only — shared design system lives in common.css
   ============================================================ */
/* Beaufort */
.bf{border:1px solid var(--bp-line-strong);border-radius:var(--r);background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));overflow:hidden}
.bf-wave{position:relative;height:200px;background:linear-gradient(180deg,#0c2f4d,#0a2236);overflow:hidden}
.bf-wave svg{position:absolute;inset:0;width:100%;height:100%}
.bf-boat{position:absolute;left:50%;bottom:66px;width:54px;height:54px;transform:translateX(-50%);transform-origin:center bottom;transition:bottom .05s linear}
.bf-boat svg{width:100%;height:100%;overflow:visible}
.bf-boat svg *{stroke:var(--ink);fill:none;stroke-width:1.6}
.bf-wave-label{position:absolute;top:.7rem;left:.8rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;color:#EAF4FA;background:rgba(6,19,31,.55);border:1px solid rgba(147,197,221,.35);border-radius:var(--r);padding:.3rem .55rem;pointer-events:none}
.bf-body{padding:1.3rem 1.4rem}
.bf-top{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem}
.bf-force{font-family:var(--font-display);font-size:3rem;font-weight:700;line-height:.85;color:var(--cyan)}
.bf-force small{font-size:1rem;color:var(--ink-faint);letter-spacing:.1em}
.bf-name{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.6rem;font-weight:600;color:var(--ink)}
.bf-speed{font-family:var(--font-mono);font-size:.85rem;color:var(--brass);margin-left:auto}
.bf-sea{color:var(--ink-dim);margin:.4rem 0 .9rem;max-width:64ch}
.bf-advice{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;border:1px solid var(--bp-line);border-left:2px solid var(--cyan);border-radius:var(--r);padding:.7rem .9rem;color:var(--ink-dim);line-height:1.6}
.bf-advice b{color:var(--ink)}
.bf-slider{padding:1.1rem 1.4rem 1.4rem;border-top:1px solid var(--bp-line)}
.bf-scale-labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.58rem;color:var(--ink-faint);margin-bottom:.4rem;letter-spacing:.06em}
input[type=range].bfr{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;outline:none;background:linear-gradient(90deg,#5FC9A0 0%,#5FC9A0 33%,#E0A94E 58%,#E0664E 100%)}
input[type=range].bfr::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ink);border:3px solid var(--bp-deep);cursor:pointer;box-shadow:0 0 0 1px var(--bp-line-strong)}
input[type=range].bfr::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ink);border:3px solid var(--bp-deep);cursor:pointer}
/* clouds */
.clouds{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bp-line-strong);border:1px solid var(--bp-line-strong);border-radius:var(--r);overflow:hidden}
.cloud-card{background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));padding:1.1rem 1.2rem}
.cloud-card svg{width:100%;height:64px;margin-bottom:.4rem}
.cloud-card svg *{stroke:var(--ink-dim);fill:none;stroke-width:1.4}
.cloud-card .lvl{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.cloud-card h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem;color:var(--ink);margin:.2rem 0 .3rem}
.cloud-card p{color:var(--ink-dim);font-size:.86rem;margin:0;line-height:1.5}
/* fronts */
.fronts{border:1px solid var(--bp-line-strong);border-radius:var(--r);background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));overflow:hidden}
.front-tabs{display:flex;gap:1px;background:var(--bp-line-strong);border-bottom:1px solid var(--bp-line-strong)}
.front-tab{flex:1;background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));border:none;cursor:pointer;padding:.8rem;color:var(--ink-dim);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:1rem;font-weight:600;transition:.14s}
.front-tab:hover{color:var(--ink)}
.front-tab.active{background:var(--cyan);color:var(--bp-deep)}
.front-fig{padding:1.3rem}
.front-fig svg{width:100%;height:auto;display:block}
.front-desc{padding:0 1.4rem 1.3rem;color:var(--ink-dim);max-width:72ch}
.front-desc b{color:var(--ink)}
/* pressure */
.pressure{display:grid;grid-template-columns:300px 1fr;gap:1.5rem;align-items:center}
.pressure-fig{border:1px solid var(--bp-line-strong);border-radius:var(--r);background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));padding:1.2rem}
.pressure-fig svg{width:100%;height:auto;display:block}
.pressure-txt{color:var(--ink-dim)}
.pressure-txt p{margin-bottom:1rem}
.pressure-txt b{color:var(--ink)}
@media(max-width:880px){
.clouds{grid-template-columns:1fr 1fr}
.pressure{grid-template-columns:1fr}
}
@media(max-width:520px){
.clouds{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
.bf-boat{transition:none}
}
/* dark chart-inset panels (keep original artwork) */
.bf,.bf-wave,.fronts,.pressure-fig,.cloud-card{--bp-deep:#0A2540;--bp-deep-2:#071B30;--bp-panel:#0E3A5C;--bp-panel-2:#10416A;--bp-line:rgba(147,197,221,.16);--bp-line-strong:rgba(147,197,221,.42);--ink:#EAF4FA;--ink-dim:#9FBFD4;--ink-faint:#6E91A8;--cyan:#58C4E0;--brass:#E0A94E;--danger:#E0664E;--ok:#5FC9A0}
/* ---------- wind: compass rose, points of sail, wind words ---------- */
.lede{max-width:64ch}
/* two interactive panels */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
.panel{position:relative;border:1px solid var(--bp-line-strong);border-radius:var(--r);background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));padding:1.3rem}
.panel--fixed{height:750px;overflow:hidden}   /*The tables fixed size*/
.panel .tick{position:absolute;width:10px;height:10px;border-color:var(--cyan);opacity:.7}
.panel .tick.tl{top:-1px;left:-1px;border-top:1.5px solid;border-left:1.5px solid}
.panel .tick.tr{top:-1px;right:-1px;border-top:1.5px solid;border-right:1.5px solid}
.panel .tick.bl{bottom:-1px;left:-1px;border-bottom:1.5px solid;border-left:1.5px solid}
.panel .tick.br{bottom:-1px;right:-1px;border-bottom:1.5px solid;border-right:1.5px solid}
.panel__title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:1.25rem;margin-bottom:.2rem}
.panel__hint{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:1rem;text-transform:uppercase}
.panel svg{width:100%;height:auto;display:block;touch-action:none}
/* readouts */
.readout{margin-top:1rem;border-top:1px solid var(--bp-line);padding-top:1rem;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.readout__big{font-family:var(--font-display);font-size:2.6rem;font-weight:700;line-height:.9;color:var(--cyan);letter-spacing:.02em}
.readout__name{font-family:var(--font-body);font-size:1.05rem;color:var(--ink)}
.readout__deg{font-family:var(--font-mono);font-size:.85rem;color:var(--brass);margin-left:auto}
.readout__sub{font-family:var(--font-mono);font-size:.66rem;color:var(--ink-dim);width:100%;letter-spacing:.04em;line-height:1.7;margin-top:.2rem}
.tackpill{display:inline-block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--bp-line-strong);border-radius:var(--r);padding:.2rem .5rem;color:var(--ink)}
.tackpill.port{color:#ff8a6e;border-color:rgba(224,102,78,.6)}
.tackpill.stbd{color:var(--ok);border-color:rgba(95,201,160,.6)}
/* svg helper classes */
.wr-ring{fill:none;stroke:var(--bp-line-strong)}
.wr-rhumb{stroke:rgba(38,52,58,.16);stroke-width:1}
.wr-rhumb.card{stroke:rgba(38,52,58,.30)}
.wr-tick{stroke:var(--ink-dim);stroke-width:1.5}
.wr-lbl{fill:var(--ink-dim);font-family:var(--font-display);text-transform:uppercase}
.wr-lbl.card{fill:var(--ink);font-weight:600}
.wr-hit{fill:transparent;cursor:pointer}
.wr-hit:hover{fill:rgba(28,100,136,.08)}
.wr-sel{fill:rgba(28,100,136,.14);stroke:var(--cyan);stroke-width:1.5}
.wr-needle{stroke:var(--cyan);stroke-width:2.5}
.wr-needle-h{fill:var(--cyan)}
.pos-nogo{fill:rgba(224,102,78,.16);stroke:rgba(224,102,78,.4);stroke-dasharray:5 4}
.pos-band{fill:none;stroke:var(--bp-line);stroke-width:1}
.pos-wind{stroke:var(--cyan);stroke-width:2.5}
.pos-windh{fill:var(--cyan)}
.pos-lbl{fill:var(--ink-faint);font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.pos-hull{fill:#0c3252;stroke:var(--ink);stroke-width:2}
.pos-sail{fill:none;stroke:var(--brass);stroke-width:2.5}
.pos-track{stroke:var(--ink-dim);stroke-width:1;stroke-dasharray:4 4}
.pos-hit{fill:transparent;cursor:pointer}
/* wind language cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--bp-line-strong);border:1px solid var(--bp-line-strong);border-radius:var(--r);overflow:hidden}
.cards>div{background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));padding:1.1rem 1.2rem}
.cards h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:1.1rem;color:var(--ink);margin-bottom:.35rem}
.cards p{color:var(--ink-dim);font-size:.92rem;margin:0}
.cards .term{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.18em;color:var(--cyan);text-transform:uppercase;display:block;margin-bottom:.5rem}
@media(max-width:880px){
.duo{grid-template-columns:1fr}
.cards{grid-template-columns:1fr}
}