:root {
  --paper: #f3eedf;
  --paper-2: #ece5d2;
  --navy: #17304e;
  --navy-soft: rgba(23, 48, 78, 0.62);
  --navy-faint: rgba(23, 48, 78, 0.3);
  --rule: rgba(23, 48, 78, 0.25);
  --red: #bf3b2b;
  --brass: #a3823f;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--paper);
  color: var(--navy);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  min-height: 100vh;
}
/* svag sjökorts-raster i bakgrunden */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--navy-faint) 1px, transparent 1px) 0 0 / 100% 96px,
    linear-gradient(90deg, var(--navy-faint) 1px, transparent 1px) 0 0 / 96px 100%;
  opacity: 0.14;
}
.mono { font-family: "IBM Plex Mono", monospace; }
.page { position: relative; max-width: 1140px; margin: 0 auto; padding: clamp(18px, 3vw, 40px) clamp(16px, 3.5vw, 44px) 90px; }
.frame { border: 2px solid var(--navy); background: var(--paper); box-shadow: 6px 6px 0 rgba(23, 48, 78, 0.12); }
.frame-inner { border: 1px solid var(--rule); margin: 5px; }

/* stationshuvud */
.station {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px;
  padding: clamp(16px, 2.5vw, 26px) clamp(18px, 3vw, 34px);
  border-bottom: 2px solid var(--navy);
}
h1 { font-family: "IBM Plex Mono", monospace; font-size: clamp(18px, 2.6vw, 28px); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
h1 .sub { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; color: var(--navy-soft); margin-top: 4px; }
.coords { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--navy-soft); text-align: right; line-height: 1.7; }
.coords .live { color: var(--red); font-weight: 600; }
.coords .live::before { content: "●"; margin-right: 6px; animation: blink 2s step-end infinite; }
.coords .live.cached { color: var(--navy-soft); }
.coords .live.cached::before { animation: none; opacity: 0.55; }
@keyframes blink { 50% { opacity: 0.2; } }

.cap {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--navy-soft);
}

/* huvudgrid */
.grid { display: grid; grid-template-columns: 5fr 4fr; }
.grid > div { padding: clamp(18px, 3vw, 32px) clamp(18px, 3vw, 34px); }
.grid > div + div { border-left: 1px solid var(--rule); }

/* hero / mätare */
.hero-row { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); flex-wrap: wrap; }
.big {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(72px, 11vw, 128px); font-weight: 500; letter-spacing: -0.04em; line-height: 1;
}
.big .u { font-size: 0.32em; letter-spacing: 0; color: var(--navy-soft); font-weight: 400; }
.stamp {
  font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--red); border: 2px solid var(--red); border-radius: 4px;
  padding: 7px 14px; transform: rotate(-4deg); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--paper), inset 0 0 0 2px var(--red);
}
.hero-meta { margin-top: 18px; font-family: "IBM Plex Mono", monospace; font-size: 13px; line-height: 2; color: var(--navy-soft); }
.hero-meta b { color: var(--navy); font-weight: 600; }
.hero-meta .up { color: var(--red); }
.hero-meta .stale-meta { color: var(--red); font-size: 12px; margin-top: 6px; line-height: 1.5; }

/* kompass */
.compass-box { display: flex; gap: clamp(16px, 2.5vw, 28px); align-items: center; flex-wrap: wrap; }
.compass { width: clamp(130px, 16vw, 170px); flex: 0 0 auto; }
.compass text { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600; fill: var(--navy); }
.needle { transform-origin: 80px 80px; transition: transform 1.6s cubic-bezier(0.34, 1.4, 0.4, 1); }
.wx-list { font-family: "IBM Plex Mono", monospace; font-size: 13px; flex: 1; min-width: 180px; }
.wx-list .row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--rule); }
.wx-list .row:last-child { border-bottom: none; }
.wx-list .k { color: var(--navy-soft); }
.wx-list .v { font-weight: 600; }

/* graf */
.chart-sec { border-top: 2px solid var(--navy); padding: clamp(18px, 3vw, 30px) clamp(18px, 3vw, 34px); }
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.range { display: flex; border: 1.5px solid var(--navy); }
.range button {
  font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  background: none; border: none; color: var(--navy); padding: 7px 16px; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.range button + button { border-left: 1.5px solid var(--navy); }
.range button[aria-pressed="true"] { background: var(--navy); color: var(--paper); }
.chart-wrap { position: relative; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.gridline { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-line { fill: none; stroke: var(--navy); stroke-width: 2; }
.chart-area { fill: rgba(23, 48, 78, 0.06); }
.chart-end { fill: var(--red); stroke: var(--paper); stroke-width: 2; }
.axis { font-family: "IBM Plex Mono", monospace; font-size: 11px; fill: var(--navy-soft); }
.cursor-line { stroke: var(--red); stroke-width: 1; opacity: 0; }
.tip {
  position: absolute; top: 0; transform: translate(-50%, -6px);
  background: var(--navy); color: var(--paper); font-family: "IBM Plex Mono", monospace;
  font-size: 12px; padding: 4px 9px; pointer-events: none; opacity: 0; white-space: nowrap;
  transition: opacity 0.15s;
}

/* loggbok / prognos */
.log-sec { border-top: 2px solid var(--navy); padding: clamp(18px, 3vw, 30px) clamp(18px, 3vw, 34px); }
table { width: 100%; border-collapse: collapse; font-family: "IBM Plex Mono", monospace; font-size: 13px; }
th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy-soft); padding: 0 10px 10px; border-bottom: 1.5px solid var(--navy); }
td { padding: 9px 10px; border-bottom: 1px dashed var(--rule); }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; }
.sym-rain { color: var(--red); font-weight: 600; }
.bar { display: inline-block; height: 8px; background: var(--navy); vertical-align: middle; margin-right: 8px; min-width: 2px; }

/* footer */
.foot {
  display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between;
  border-top: 2px solid var(--navy); padding: 14px clamp(18px, 3vw, 34px);
  font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--navy-soft);
}
.foot b { color: var(--navy); }

@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(10px); animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
  .grid > div + div { border-left: none; border-top: 1px solid var(--rule); }
  .log-sec { overflow-x: auto; }
}