/* ============================================================
   CYMOTHOE · anchors.css
   Page-specific rules only — shared design system lives in common.css
   ============================================================ */
/* scope calculator */
.scope{display:grid;grid-template-columns:300px 1fr;gap:1.25rem;align-items:start}
.scope-controls{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}
.ctl{margin-bottom:1.2rem}
.ctl label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);display:flex;justify-content:space-between}
.ctl label b{color:var(--cyan);font-weight:500}
.ctl input[type=range]{-webkit-appearance:none;width:100%;height:5px;border-radius:3px;background:var(--bp-line-strong);outline:none;margin-top:.5rem}
.ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--cyan);border:3px solid var(--bp-deep);cursor:pointer}
.ctl input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--cyan);border:3px solid var(--bp-deep);cursor:pointer}
.ratio-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.5rem}
.ratios{display:flex;flex-wrap:wrap;gap:.4rem}
.ratios button{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-dim);background:rgba(255,255,255,.6);border:1px solid var(--bp-line-strong);border-radius:var(--r);padding:.4rem .55rem;cursor:pointer;transition:.13s}
.ratios button:hover{color:var(--ink);border-color:var(--cyan)}
.ratios button.active{background:var(--cyan);color:var(--bp-deep);border-color:var(--cyan)}
.scope-fig{border:1px solid var(--bp-line-strong);border-radius:var(--r);overflow:hidden;background:#0a2a44}
.scope-fig svg{display:block;width:100%;height:auto}
.scope-out{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bp-line-strong);border-top:1px solid var(--bp-line-strong)}
.scope-out>div{background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));padding:.8rem 1rem;text-align:center}
.scope-out .k{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:.25rem}
.scope-out .v{font-family:var(--font-display);font-size:1.55rem;font-weight:600;color:var(--ink);line-height:1}
.scope-out .v small{font-size:.7rem;color:var(--ink-faint)}
.hold-good{color:var(--ok) !important}
.hold-ok{color:var(--brass) !important}
.hold-poor{color:var(--danger) !important}
/* anchor types */
.anchors{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}
.anchor-card{background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));padding:1.1rem}
.anchor-card svg{width:100%;height:80px;margin-bottom:.5rem}
.anchor-card svg *{stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.anchor-card h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:1.02rem;color:var(--ink);margin-bottom:.25rem;line-height:1}
.anchor-card .hold{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4rem;display:block}
.anchor-card p{color:var(--ink-dim);font-size:.82rem;margin:0;line-height:1.45}
/* seabed */
.seabed{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:760px}
.seabed li{list-style:none;background:linear-gradient(90deg,var(--bp-panel),var(--bp-deep-2));display:flex;align-items:center;gap:1rem;padding:.7rem 1.1rem}
.seabed .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.seabed .name{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem;color:var(--ink);min-width:130px}
.seabed .rate{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;min-width:84px}
.seabed .note{font-family:var(--font-body);font-size:.86rem;color:var(--ink-dim)}
/* tackle */
.tackle{display:grid;grid-template-columns:340px 1fr;gap:1.5rem;align-items:start}
.tackle-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}
.tackle-fig svg{width:100%;height:auto;display:block}
.gloss{display:flex;flex-direction:column;gap:.7rem}
.gloss div{border-left:2px solid var(--bp-line-strong);padding-left:.9rem}
.gloss dt{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1rem;color:var(--ink)}
.gloss dd{color:var(--ink-dim);font-size:.88rem;margin:0}
.cob{counter-reset:s}
.step{display:flex;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--bp-line)}
.step:last-child{border-bottom:none}
.step .n{flex:0 0 auto;width:2rem;height:2rem;border:1px solid var(--brass);color:var(--brass);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.85rem}
.step h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.08rem;color:var(--ink);margin-bottom:.15rem}
.step p{color:var(--ink-dim);font-size:.9rem;margin:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media(max-width:880px){
.scope,.tackle{grid-template-columns:1fr}
.anchors{grid-template-columns:1fr 1fr}
.two{grid-template-columns:1fr;gap:0}
}
@media(max-width:520px){
.anchors{grid-template-columns:1fr}
.seabed .note{display:none}
}