/* ============================================================
   CYMOTHOE · safety.css
   Page-specific rules only — shared design system lives in common.css
   ============================================================ */
/* right of way explorer */
.row-explorer{display:grid;grid-template-columns:230px 1fr;gap:1.25rem;align-items:start}
.row-tabs{display:flex;flex-direction:column;gap:.45rem}
.row-tab{text-align:left;background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));border:1px solid var(--bp-line-strong);border-left:2px solid var(--bp-line-strong);border-radius:var(--r);padding:.7rem .85rem;cursor:pointer;transition:.14s;color:var(--ink-dim);font-family:inherit}
.row-tab:hover{color:var(--ink);border-left-color:var(--cyan)}
.row-tab.active{background:rgba(28,100,136,.12);border-left-color:var(--cyan);color:var(--ink)}
.row-tab .rt-name{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.02rem;font-weight:600;display:block;line-height:1.05}
.row-tab .rt-sub{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.08em;color:var(--ink-faint);margin-top:.2rem;display:block}
.row-stage{border:1px solid var(--bp-line-strong);border-radius:var(--r);background:linear-gradient(180deg,#DCEEF7,#EAF5FB);position:relative;overflow:hidden} /*table with boats */
.row-fig{padding:1.4rem;border-bottom:1px solid var(--bp-line);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)}
.row-fig svg{width:100%;max-width:560px;height:auto;display:block;margin:0 auto}
.row-rule{padding:1.2rem 1.4rem}
.row-rule .ruleno{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.row-rule h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.4rem;font-weight:600;margin:.2rem 0 .5rem;color:var(--ink)}
.row-rule p{color:var(--ink-dim);font-size:.95rem;max-width:62ch}
.legend2{display:flex;gap:1.4rem;margin-top:1rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;color:var(--ink-dim)}
.legend2 span{display:flex;align-items:center;gap:.45rem}
.legend2 i{width:18px;height:3px;display:inline-block;border-radius:2px}
/* pecking order */
.pecking{display:flex;flex-direction:column;gap:1px;background:var(--bp-line-strong);border:1px solid var(--bp-line-strong);border-radius:var(--r);overflow:hidden;max-width:680px}
.pecking li{list-style:none;background:linear-gradient(90deg,#f5f6f7,#f1f4f5);display:flex;align-items:center;gap:1rem;padding:.7rem 1rem}
.pecking .rank{font-family:var(--font-mono);font-size:.7rem;color:var(--cyan);width:1.6rem}
.pecking .who{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem;color:var(--ink)}
.pecking .desc{font-family:var(--font-body);font-size:.85rem;color:var(--ink-faint);margin-left:auto;text-align:right}
/* callout */
.callout{margin-top:1.4rem;border:1px solid var(--bp-line);border-left:2px solid var(--danger);border-radius:var(--r);background:rgba(224,102,78,.07);padding:1rem 1.2rem}
.callout .label{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--danger);display:block;margin-bottom:.3rem}
.callout p{color:var(--ink-dim);margin:0}
@media(max-width:880px){
.row-explorer{grid-template-columns:1fr}
.row-tabs{flex-direction:row;flex-wrap:wrap}
.row-tab{flex:1 1 45%}
}
@media(max-width:520px){
.pecking .desc{display:none}
}
/* ============================================================
   LIGHTS & SIGNALS  (tabs + accordions)
   ============================================================ */
.lt-legend{display:flex;flex-wrap:wrap;gap:.55rem 1.3rem;margin:.2rem 0 1.3rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;color:var(--ink-dim)}
.lt-legend span{display:flex;align-items:center;gap:.45rem}
.lt-legend i{width:13px;height:13px;border-radius:50%;display:inline-block;box-shadow:0 0 7px 0 currentColor}
.lt-legend .lt-arc{color:var(--ink-faint);letter-spacing:.02em}
.lt-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
.lt-tab{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);background:rgba(28,100,136,.10);border:1px solid var(--bp-line-strong);border-radius:var(--r);padding:.45rem .75rem;cursor:pointer;transition:.15s}
.lt-tab:hover{color:var(--ink);border-color:var(--cyan)}
.lt-tab.active{background:var(--cyan);color:var(--bp-deep);border-color:var(--cyan)}
.acc{display:flex;flex-direction:column;gap:.5rem}
.acc-item{border:1px solid var(--bp-line-strong);border-radius:var(--r);background:rgba(255,255,255,.6);overflow:hidden}
.acc-btn{width:100%;display:flex;align-items:center;gap:.85rem;text-align:left;background:none;border:none;cursor:pointer;padding:.7rem .9rem;color:var(--ink);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:1.08rem;font-weight:500}
.acc-btn:hover{background:rgba(28,100,136,.10)}
.acc-btn .mini{flex:0 0 auto;width:46px;height:46px;border:1px solid var(--bp-line);border-radius:var(--r);background:radial-gradient(120% 100% at 50% 0%,#0e2a44,#06121f)}
.acc-btn .mini svg{display:block;width:100%;height:100%}
.acc-btn .acc-t{flex:1;line-height:1.1}
.acc-btn .acc-sub{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase;display:block;margin-top:.25rem}
.acc-btn .chev{flex:0 0 auto;color:var(--cyan);transition:transform .2s;font-size:.9rem}
.acc-item.open .chev{transform:rotate(90deg)}
.acc-body{display:none;padding:0 .9rem 1rem}
.acc-item.open .acc-body{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start}
.acc-fig{flex:0 0 auto;width:236px;max-width:100%;border:1px solid var(--bp-line);border-radius:var(--r);background:radial-gradient(130% 110% at 50% 0%,#0e2a44,#05101b)}
.acc-fig svg{display:block;width:100%;height:auto}
.acc-text{flex:1;min-width:210px}
.acc-text p{color:var(--ink-dim);font-size:.92rem;margin:0 0 .65rem}
.acc-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.acc-chip{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.05em;color:var(--ink-dim);border:1px solid var(--bp-line);border-radius:var(--r);padding:.22rem .5rem;display:flex;align-items:center;gap:.3rem}
.acc-chip i{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 4px 0 currentColor}
.acc-day{display:flex;align-items:center;gap:.6rem;margin-top:.7rem;padding-top:.6rem;border-top:1px dashed var(--bp-line)}
.acc-day .lbl{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.acc-day svg{height:58px;width:auto}
.dayshapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.dayshape{border:1px solid var(--bp-line-strong);border-radius:var(--r);background:rgba(255,255,255,.6);padding:.85rem .8rem;text-align:center}
.dayshape svg{height:72px;width:auto;display:block;margin:0 auto .55rem}
.dayshape h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:.95rem;color:var(--ink);margin-bottom:.2rem}
.dayshape p{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.02em;color:var(--ink-dim);line-height:1.5}
/* dark chart-inset panels (keep original artwork) */
.acc-fig,.acc-btn .mini{--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}
.lt-legend i,.acc-chip i{border:1px solid rgba(38,52,58,.35)}
/* ============================================================
   LIGHTS & MARKS  (lighthouses, light characteristics, IALA buoys)
   ============================================================ */
.prose{max-width:70ch;color:var(--ink-dim)}
.prose p{margin-bottom:1rem}
.prose b{color:var(--ink)}
.prose h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;color:var(--ink);font-size:1.15rem;margin:1.4rem 0 .4rem}
.cmp-note{border:1px solid var(--bp-line);border-left:2px solid var(--brass);border-radius:var(--r);background:rgba(151,103,26,.09);padding:1rem 1.1rem;margin:1.1rem 0}
.cmp-note .label{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:.3rem}
.cmp-note p{margin:0 0 .6rem;color:var(--ink-dim);font-size:.92rem}
.cmp-note p:last-child{margin-bottom:0}
.cmp-note b{color:var(--ink)}
.lt-table{border:1px solid var(--bp-line-strong);border-radius:var(--r);overflow:hidden;margin-bottom:1.3rem}
.lt-row{display:grid;gap:.8rem;padding:.65rem .9rem;border-bottom:1px solid var(--bp-line);background:var(--bp-panel-2);align-items:center;grid-template-columns:70px 140px 1fr}
.lt-row:last-child{border-bottom:none}
.lt-row.lt-head{background:var(--bp-panel);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.lt-row span:nth-child(1){font-family:var(--font-mono);font-size:.78rem;color:var(--ink)}
.lt-row span:nth-child(3){color:var(--ink-dim);font-size:.85rem;line-height:1.5}
.lt-row span:nth-child(2){color:var(--ink-dim);font-size:.82rem}
.lt-row.lt-head span:nth-child(1),.lt-row.lt-head span:nth-child(2){color:var(--ink-faint)}
@media(max-width:680px){
.lt-row{grid-template-columns:1fr;gap:.2rem}
.lt-row.lt-head{display:none}
}
.lt-anatomy{border:1px solid var(--bp-line-strong);border-radius:var(--r);background:var(--bp-panel-2);padding:1.1rem 1.2rem;margin-bottom:1rem}
.lt-anatomy__string{font-family:var(--font-mono);font-size:1.25rem;letter-spacing:.03em;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem;justify-content:center}
.lt-anatomy__string span{padding:.18rem .45rem;border-radius:4px;font-weight:500}
.lt-anatomy__keys{display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.4rem;font-size:.82rem;color:var(--ink-dim)}
.lt-anatomy__keys div{display:flex;align-items:baseline;gap:.5rem}
.lt-anatomy__keys i{width:10px;height:10px;border-radius:2px;flex:0 0 auto}
.lt-anatomy__keys b{color:var(--ink)}
@media(max-width:600px){.lt-anatomy__keys{grid-template-columns:1fr}}
.buoy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bp-line-strong);border:1px solid var(--bp-line-strong);border-radius:var(--r);overflow:hidden;margin-bottom:1.3rem}
.buoy-card{background:linear-gradient(180deg,var(--bp-panel),var(--bp-panel-2));padding:1rem}
.buoy-card svg{width:100%;height:64px;margin-bottom:.5rem;display:block}
.buoy-card h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:.92rem;color:var(--ink);margin-bottom:.2rem;line-height:1.15}
.buoy-card .hold{font-family:var(--font-mono);font-size:.53rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.4rem;display:block}
.buoy-card p{color:var(--ink-dim);font-size:.74rem;margin:0;line-height:1.4}
@media(max-width:880px){.buoy-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.buoy-grid{grid-template-columns:1fr}}