/* ============================================================
   CYMOTHOE · boats.css
   Page-specific rules only — shared design system lives in common.css
   ============================================================ */
/* nav (shared) */
.brand{flex:0 0 auto}
/* sheet + header (shared) */
.lede{max-width:64ch}
/* ===== BOAT SELECTOR ===== */
.boat-tabs{display:flex;gap:1px;background:var(--bp-line-strong);border:1px solid var(--bp-line-strong);border-radius:var(--r);overflow:hidden;margin-bottom:1.4rem;flex-wrap:wrap}
.boat-tab{flex:1 1 0;min-width:150px;background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));border:none;cursor:pointer;padding:.9rem 1rem;text-align:left;color:var(--ink-dim);transition:.16s;font-family:inherit}
.boat-tab:hover{background:#13476f;color:var(--ink)}
.boat-tab.active{background:var(--cyan);color:var(--bp-deep)}
.boat-tab .tab-no{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;opacity:.8}
.boat-tab .tab-name{display:block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:1.12rem;font-weight:600;margin-top:.25rem;line-height:1}
.boat-tab .tab-class{display:block;font-family:var(--font-mono);font-size:.56rem;opacity:.75;margin-top:.3rem;letter-spacing:.08em}
/* ===== STAGE: viewer + info ===== */
.stage{display:grid;grid-template-columns:1fr 360px;gap:1.25rem;align-items:start}
.viewer{position:relative;border:1px solid var(--bp-line-strong);border-radius:var(--r);background:radial-gradient(120% 120% at 50% 30%,#0c3252 0%,#071a2e 70%);min-height:560px;overflow:hidden}
.viewer canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.viewer canvas:active{cursor:grabbing}
.viewer .tick{position:absolute;width:11px;height:11px;border-color:var(--cyan);opacity:.7;z-index:3}
.viewer .tick.tl{top:8px;left:8px;border-top:1.5px solid;border-left:1.5px solid}
.viewer .tick.tr{top:8px;right:8px;border-top:1.5px solid;border-right:1.5px solid}
.viewer .tick.bl{bottom:8px;left:8px;border-bottom:1.5px solid;border-left:1.5px solid}
.viewer .tick.br{bottom:8px;right:8px;border-bottom:1.5px solid;border-right:1.5px solid}
.viewer__hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase;background:rgba(7,21,38,.6);padding:.35rem .7rem;border-radius:var(--r);border:1px solid var(--bp-line);pointer-events:none;z-index:3;text-align:center}
.viewer__title{position:absolute;left:16px;top:14px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;color:var(--cyan);text-transform:uppercase;z-index:3}
.viewer__title b{display:block;font-family:var(--font-display);font-size:1.05rem;letter-spacing:.08em;color:var(--ink);margin-top:.1rem}
.viewer__btns{position:absolute;right:16px;top:14px;z-index:3;display:flex;gap:.4rem}
.vbtn{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);background:var(--bp-panel);border:1px solid var(--bp-line-strong);border-radius:var(--r);padding:.35rem .55rem;cursor:pointer;transition:.15s}
.vbtn:hover{color:var(--ink);border-color:var(--cyan)}
.vbtn.on{color:var(--bp-deep);background:var(--cyan);border-color:var(--cyan)}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase;z-index:4}
/* info / part card */
.partcard{border:1px solid var(--bp-line-strong);border-radius:var(--r);background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));position:relative;min-height:560px;display:flex;flex-direction:column}
.partcard__head{padding:1rem 1.1rem .8rem;border-bottom:1px solid var(--bp-line)}
.partcard__eyebrow{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.partcard__fig{margin:0;padding:1.1rem;border-bottom:1px solid var(--bp-line);background:repeating-linear-gradient(0deg,transparent,transparent 19px,rgba(38,52,58,.07) 19px,rgba(38,52,58,.07) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(38,52,58,.07) 19px,rgba(38,52,58,.07) 20px)}
.partcard__fig svg{display:block;width:100%;height:160px}
.partcard__body{padding:1rem 1.1rem 1.1rem;flex:1}
.partcard__tag{display:inline-block;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);border:1px solid rgba(151,103,26,.5);border-radius:var(--r);padding:.18rem .5rem;margin-bottom:.7rem}
.partcard h2{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.55rem;font-weight:600;line-height:1;margin-bottom:.6rem;color:var(--ink)}
.partcard p{font-size:.95rem;color:var(--ink-dim);line-height:1.6}
.partcard .empty{color:var(--ink-faint);font-style:italic}
.partcard__hint{font-family:var(--font-mono);font-size:.62rem;color:var(--ink-faint);letter-spacing:.05em;margin-top:1rem;line-height:1.7}
/* parts index chips */
.parts-index{margin-top:1.6rem}
.section-rule{margin:0 0 1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--ink-dim);background:rgba(28,100,136,.12);border:1px solid var(--bp-line-strong);border-radius:var(--r);padding:.4rem .7rem;cursor:pointer;transition:.15s}
.chip:hover{color:var(--ink);border-color:var(--cyan)}
.chip.active{background:var(--brass);color:var(--bp-deep);border-color:var(--brass)}
@media(max-width:900px){
.stage{grid-template-columns:1fr}
.partcard{min-height:auto}
.viewer{min-height:440px}
}
/* ============================================================
   2D SAIL PLAN (non-interactive)
   ============================================================ */
.sailplan{margin-top:1rem}
.sailplan .sail-h{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-weight:600;font-size:1.7rem;margin-bottom:.4rem}
.sailplan .sail-h + p{margin-bottom:1.6rem}
.sail-fig{border:1px solid var(--bp-line-strong);border-radius:var(--r);position:relative;overflow:hidden;padding:1.2rem;background:repeating-linear-gradient(0deg,transparent,transparent 23px,rgba(147,197,221,.06) 23px,rgba(147,197,221,.06) 24px),
    repeating-linear-gradient(90deg,transparent,transparent 23px,rgba(147,197,221,.06) 23px,rgba(147,197,221,.06) 24px),
    linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2))}
.sail-fig svg{width:100%;height:auto;display:block}
.sail-figs{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1rem}
.sail-panel__head{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.9rem;padding-bottom:.7rem;border-bottom:1px solid var(--bp-line)}
.sail-panel__no{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;color:var(--cyan)}
.sail-panel__name{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:1.1rem;font-weight:600;color:var(--ink)}
.sail-panel__sub{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.06em;color:var(--ink-faint);margin-left:auto}
.sail-panel--genoa .sail-panel__name{color:var(--cyan)}
@media(max-width:760px){
.sail-figs{grid-template-columns:1fr}
}
.sp-water{stroke:#58C4E0;stroke-width:1;opacity:.5;fill:none}
.sp-spar{stroke:#EAF4FA;stroke-width:3;stroke-linecap:round}
.sp-edge{stroke:#EAF4FA;stroke-width:2.2;fill:none;stroke-linejoin:round}
.sp-edge-genoa{stroke:#58C4E0;stroke-width:2.2;fill:none;stroke-linejoin:round}
.sp-fill-main{fill:rgba(234,244,250,.15);stroke:none}
.sp-fill-genoa{fill:rgba(88,196,224,.20);stroke:none}
.sp-ctrl{stroke:#E0A94E;stroke-width:1.6;fill:none;stroke-linecap:round}
.sp-reef{stroke:#58C4E0;stroke-width:1.3;fill:none;stroke-dasharray:5 4}
.sp-cringle{fill:none;stroke:#E0A94E;stroke-width:1.6}
.sp-ld{stroke:#58C4E0;stroke-width:.8;fill:none;opacity:.75}
.sp-lab{fill:#EAF4FA;font-family:var(--font-mono);font-size:11px;letter-spacing:.02em}
.sp-lab-g{fill:#7Fd3ea;font-family:var(--font-mono);font-size:11px;letter-spacing:.02em}
.sp-lab-c{fill:#E0A94E;font-family:var(--font-mono);font-size:11px;letter-spacing:.02em}
.sp-name{fill:rgba(234,244,250,.22);font-family:var(--font-display);font-weight:700;letter-spacing:.14em;font-size:26px}
.sp-name-genoa{fill:rgba(88,196,224,.32);font-family:var(--font-display);font-weight:700;letter-spacing:.14em;font-size:26px}
.sail-legend{display:flex;flex-wrap:wrap;gap:1.1rem 1.4rem;margin:1rem 0 1.6rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.05em;color:var(--ink-dim)}
.sail-legend span{display:flex;align-items:center;gap:.5rem}
.sail-legend i{width:20px;border-top-width:2px;border-top-style:solid;display:inline-block}
.sail-gloss{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bp-line-strong);border:1px solid var(--bp-line-strong);border-radius:var(--r);overflow:hidden}
.sail-gloss div{background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));padding:.8rem 1.05rem}
.sail-gloss dt{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1rem;color:var(--ink);margin-bottom:.15rem}
.sail-gloss dd{margin:0;color:var(--ink-dim);font-size:.86rem;line-height:1.5}
@media(max-width:760px){
.sail-gloss{grid-template-columns:1fr}
}
/* dark chart-inset panels (keep original artwork) */
.viewer,.sail-fig,.partcard{--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}