/* ============================================================
   CYMOTHOE · navigation.css
   Page-specific rules only — shared design system lives in common.css
   ============================================================ */
/* tool bar */
.map-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem;align-items:center}
.tool{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));border:1px solid var(--bp-line-strong);border-radius:var(--r);padding:.6rem .9rem;cursor:pointer;transition:.15s;min-width:150px}
.tool:hover{border-color:var(--cyan)}
.tool.active{background:var(--cyan);border-color:var(--cyan)}
.tool.active *{color:var(--bp-deep) !important}
.tool .tn{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;font-weight:600;color:var(--ink)}
.tool .td{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.06em;color:var(--ink-faint)}
.tool-clear{margin-left:auto;background:none;border:1px solid var(--bp-line-strong);color:var(--ink-dim);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.55rem .9rem;border-radius:var(--r);cursor:pointer;transition:.15s}
.tool-clear:hover{color:var(--ink);border-color:var(--danger)}
/* stage */
.map-stage{display:grid;grid-template-columns:1fr 320px;gap:1.25rem;align-items:start}
.chart-wrap{position:relative;border:1px solid var(--bp-line-strong);border-radius:var(--r);overflow:hidden;background:#0a2a44}
.chart-wrap canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:none}
.chart-wrap .tick{position:absolute;width:11px;height:11px;border-color:var(--cyan);opacity:.7;z-index:3;pointer-events:none}
.chart-wrap .tick.tl{top:8px;left:8px;border-top:1.5px solid;border-left:1.5px solid}
.chart-wrap .tick.tr{top:8px;right:8px;border-top:1.5px solid;border-right:1.5px solid}
.chart-wrap .tick.bl{bottom:8px;left:8px;border-bottom:1.5px solid;border-left:1.5px solid}
.chart-wrap .tick.br{bottom:8px;right:8px;border-bottom:1.5px solid;border-right:1.5px solid}
.live-coord{position:absolute;left:12px;bottom:12px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;color:var(--cyan);background:rgba(255,255,255,.7);border:1px solid var(--bp-line);padding:.3rem .6rem;border-radius:var(--r);z-index:3;pointer-events:none}
/* readout */
.chart-readout{border:1px solid var(--bp-line-strong);border-radius:var(--r);background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));min-height:300px}
.cr-head{padding:.9rem 1.1rem;border-bottom:1px solid var(--bp-line)}
.cr-head .eyebrow{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.cr-head h2{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.35rem;font-weight:600;margin-top:.15rem}
.cr-body{padding:1rem 1.1rem}
.cr-body p{color:var(--ink-dim);font-size:.92rem;margin-bottom:.8rem}
.cr-data{font-family:var(--font-mono);font-size:.8rem;color:var(--ink);background:rgba(255,255,255,.6);border:1px solid var(--bp-line);border-radius:var(--r);padding:.7rem .8rem;line-height:1.9;letter-spacing:.04em}
.cr-data .k{color:var(--ink-faint)}
.cr-data .v{color:var(--cyan);float:right}
.cr-data .v.b{color:var(--brass)}
.cr-steps{list-style:none;margin-top:.4rem}
.cr-steps li{font-family:var(--font-mono);font-size:.66rem;color:var(--ink-dim);letter-spacing:.03em;padding:.3rem 0 .3rem 1.4rem;position:relative;line-height:1.5}
.cr-steps li::before{content:attr(data-n);position:absolute;left:0;top:.3rem;color:var(--cyan);font-size:.6rem;border:1px solid var(--bp-line-strong);border-radius:50%;width:1rem;height:1rem;display:flex;align-items:center;justify-content:center}
/* explanation */
.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}
@media(max-width:880px){
.map-stage{grid-template-columns:1fr}
.tool-clear{margin-left:0}
}
/* ============================================================
   COMPASS · true / magnetic / compass north (static reference)
   ============================================================ */
.cmp-static{display:grid;grid-template-columns:200px 1fr;gap:1.4rem;align-items:start;margin-bottom:1.3rem}
.rose-fig{border:1px solid var(--bp-line-strong);border-radius:var(--r);background:radial-gradient(120% 100% at 50% 32%,#0e2a44,#06121f);padding:.7rem}
.rose-fig svg{display:block;width:100%;height:auto}
.rose-cap{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.03em;color:var(--ink-faint);padding:.55rem .3rem 0;line-height:1.65}
.rose-cap b{color:var(--ink-dim)}
.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)}
@media(max-width:820px){
.cmp-static{grid-template-columns:1fr}
.cmp-static .rose-fig{max-width:220px;margin:0 auto}
}
/* dark chart-inset panel (keep original artwork) */
.rose-fig{--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}

/* ============================================================
   HOW TO READ A NAUTICAL CHART
   ============================================================ */
.depth-table{border:1px solid var(--bp-line-strong);border-radius:var(--r);overflow:hidden;margin-bottom:1.3rem}
.dt-row{display:grid;gap:.8rem;padding:.65rem .9rem;border-bottom:1px solid var(--bp-line);background:var(--bp-panel-2);align-items:center}
.dt-row{grid-template-columns:110px 170px 1fr}
.dt-row:last-child{border-bottom:none}
.dt-row.dt-head{background:var(--bp-panel);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.dt-sym{font-family:var(--font-mono);font-size:.95rem;color:var(--brass)}
.dt-row span:nth-child(2){font-family:var(--font-mono);font-size:.78rem;color:var(--ink)}
.dt-row span:nth-child(3){color:var(--ink-dim);font-size:.85rem;line-height:1.5}
@media(max-width:680px){
.dt-row{grid-template-columns:1fr;gap:.2rem}
.dt-row.dt-head{display:none}
}