/* HOM3 v3w -- nav station panel styles. Nautical brass & tide.
   Sits inside the Helm page under .theme-nautical. Cards are movable
   (drag by title; order persists). ASCII-only. */

.navstation {
  --brass: #d9a441; --brass-hi: #f4d58a; --navy: #071523;
  --navy-2: #0c2033; --foam: #dfeaf2; --seafoam: #6fd0a8;
  --signal: #e2685f;
  display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: repeat(20, 1fr);
}
.nav-card {
  background: linear-gradient(180deg, rgba(12,32,51,0.85), rgba(7,21,35,0.9));
  border: 1px solid rgba(217,164,65,0.28);
  border-radius: 10px; padding: 12px 14px; position: relative;
  box-shadow: inset 0 1px 0 rgba(255,246,214,0.06), 0 2px 8px rgba(0,0,0,0.35);
}
.nav-card h3 {
  margin: 0 0 10px; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brass);
  display: flex; align-items: center; gap: 8px;
  cursor: grab; user-select: none; touch-action: none;
}
.nav-card.dragging {
  opacity: 0.75; outline: 1px dashed var(--brass);
  cursor: grabbing;
}
.nav-card h3 .badge-pred {
  font-size: 0.58rem; letter-spacing: 0.1em; padding: 1px 6px;
  border: 1px solid rgba(217,164,65,0.5); border-radius: 3px;
  color: var(--brass-hi); opacity: 0.85;
}
.dim { opacity: 0.5; font-size: 0.82rem; }

/* spans -- row 1: tide 30% / course 20% / instruments 50%;
   row 2: anchor / almanac / route (operator layout spec) */
.span-tide { grid-column: span 6; }
.span-compass { grid-column: span 4; }
.span-instruments { grid-column: span 10; }
.span-anchor { grid-column: span 7; }
.span-almanac { grid-column: span 6; }
.span-route { grid-column: span 7; }
@media (max-width: 820px) {
  .navstation { grid-template-columns: repeat(6, 1fr); }
  .span-tide, .span-instruments, .span-compass,
  .span-almanac, .span-route, .span-anchor { grid-column: span 6; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

/* tide chart */
.tide-head { display: flex; justify-content: space-between; align-items: center; }
.tide-head select {
  background: var(--navy-2); color: var(--foam);
  border: 1px solid rgba(217,164,65,0.4); border-radius: 5px;
  padding: 3px 8px; font-family: ui-monospace, monospace; font-size: 0.78rem;
}
#nav-tide-canvas {
  width: 100%; height: 118px; display: block; margin: 8px 0;
  border-radius: 6px; background: rgba(3,10,18,0.5);
}
.tide-extrema { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.tide-row { display: flex; align-items: baseline; gap: 8px; font-size: 0.82rem; }
.tide-k { font-weight: 700; letter-spacing: 0.05em; }
.tide-H { color: var(--brass); } .tide-L { color: #5da9e0; }
.tide-t { font-variant-numeric: tabular-nums; }
.tide-h { opacity: 0.7; }

/* instrument tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile {
  background: rgba(3,10,18,0.55); border: 1px solid rgba(180,214,240,0.12);
  border-radius: 8px; padding: 8px 10px; text-align: left;
}
.tile-label {
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.55;
}
.tile-val {
  font-size: 1.45rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--foam);
}
.tile-val.small { font-size: 0.95rem; }
.tile-unit { font-size: 0.7rem; opacity: 0.6; margin-left: 3px; }
.tile-pos .tile-val { font-size: 0.8rem; }

/* compass */
.compass-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.compass {
  width: 108px; height: 108px; border-radius: 50%; position: relative;
  border: 2px solid rgba(217,164,65,0.45);
  background: radial-gradient(circle at 50% 45%, #0e2a42, #05101c);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.6);
}
.compass .card-mark {
  position: absolute; font-size: 0.6rem; color: var(--brass-hi); opacity: 0.8;
}
.compass .cm-n { top: 4px; left: 50%; transform: translateX(-50%); }
.compass .cm-e { right: 5px; top: 50%; transform: translateY(-50%); }
.compass .cm-s { bottom: 4px; left: 50%; transform: translateX(-50%); }
.compass .cm-w { left: 5px; top: 50%; transform: translateY(-50%); }
.compass-needle {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 42px;
  margin-left: -1.5px; margin-top: -42px; transform-origin: 50% 100%;
  background: linear-gradient(180deg, var(--signal), rgba(226,104,95,0.2));
  border-radius: 2px; transition: transform 0.6s ease;
}
.compass-label {
  font-size: 1.1rem; font-weight: 700; color: var(--brass);
  font-variant-numeric: tabular-nums;
}

/* almanac + route + anchor */
.alm-row, .leg {
  display: flex; justify-content: space-between; font-size: 0.82rem;
  padding: 3px 0; border-bottom: 1px solid rgba(180,214,240,0.06);
}
.leg { display: grid; grid-template-columns: 1.6fr 0.7fr 0.9fr 0.7fr; gap: 6px; }
.leg-head { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em;
  opacity: 0.55; border-bottom: 1px solid rgba(217,164,65,0.25); }
.leg-foot { font-weight: 700; color: var(--brass); border-bottom: none;
  border-top: 1px solid rgba(217,164,65,0.25); margin-top: 2px; }

.anchor-ok, .anchor-alarm { text-align: center; }
.anchor-big {
  font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.anchor-ok .anchor-big { color: var(--seafoam); }
.anchor-alarm .anchor-big { color: var(--signal); animation: anchor-pulse 1s infinite; }
.anchor-sub { font-size: 0.72rem; opacity: 0.6; }
.anchor-state {
  margin: 6px 0; font-size: 0.78rem; letter-spacing: 0.08em; font-weight: 700;
}
.anchor-ok .anchor-state { color: var(--seafoam); }
.anchor-alarm .anchor-state { color: var(--signal); }
@keyframes anchor-pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) {
  .anchor-alarm .anchor-big { animation: none; }
  .compass-needle { transition: none; }
}

.btn-mini {
  background: rgba(217,164,65,0.15); border: 1px solid rgba(217,164,65,0.5);
  color: var(--brass-hi); border-radius: 5px; padding: 3px 10px;
  cursor: pointer; font-size: 0.74rem; margin-top: 6px;
}
.btn-mini:hover { background: rgba(217,164,65,0.28); }

.nav-foot {
  grid-column: 1 / -1; display: flex; justify-content: space-between;
  font-size: 0.68rem; opacity: 0.5; padding-top: 2px;
}