/* openwaves.craitr.no — ours, loaded after OpenBridge's openbridge.css. [ours] Neko, 21 Oct 2026 (OpenBridge pass).
   Every colour, size, weight, radius and shadow below is an OpenBridge 1.0.1 token (src/palettes/variables.css), so the
   brilliance menu (day · dusk · night · bright) recolours the whole page and the component-size class scales it.
   Type scale = the package's own mixins (src/mixins/fonts.css): label 12/16 · body 16/24 · title 24/32 · 32/48 ·
   overline 12/16 semibold, 1px tracking · instrument value 34/32. No other sizes. Gutter = --ui-components-card-gap (4px). */
@font-face { font-family: "Noto Sans"; src: url(obc/NotoSans.ttf) format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --gap: var(--ui-components-card-gap, 4px);
  --r: var(--global-border-radius-border-radius-base, 6px);
  --r-floating: var(--global-border-radius-border-radius-floating, 12px);
  --r-check: var(--global-border-radius-border-radius-check, 4px);
  --touch: var(--global-size-spacing-touch-target-min, 48px);
  --measure: 880px;            /* ours: the reading container (OpenBridge sets no prose measure) */
  --pad: 32px;                 /* --app-components-navigation-menu-sub-page-padding-horizontal-spatious, large value */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--container-backdrop-color); color: var(--element-active-color); }
body {
  font-family: var(--font-family-main, "Noto Sans"), "Noto Sans", sans-serif;
  font-weight: var(--font-weight-regular); font-size: var(--font-size-100); line-height: var(--line-height-100);
  font-feature-settings: "liga" off, "clig" off, "ss04" on; min-height: 100vh;
}
a { color: var(--instrument-enhanced-primary-color); }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: var(--global-size-spacing-border-weight-focusframe, 2px) solid var(--border-focus-color); outline-offset: 2px; }

/* ---- the type classes: OpenBridge's font mixins, by name ---- */
.kicker, .t-overline { font-size: var(--global-typography-ui-overline-font-size, 12px); line-height: var(--global-typography-ui-overline-line-height, 16px);
  font-weight: var(--global-typography-ui-overline-font-weight, 570); letter-spacing: 1px; color: var(--element-neutral-color); }   /* font-overline-new */
.lbl, .t-label { font-size: var(--global-typography-ui-label-font-size, 12px); line-height: var(--global-typography-ui-label-line-height, 16px);
  font-weight: var(--global-typography-ui-label-font-weight, 370); color: var(--element-neutral-color); }                          /* font-label */
.t-body { font-size: var(--global-typography-ui-body-font-size); line-height: var(--global-typography-ui-body-line-height); font-weight: var(--global-typography-ui-body-font-weight); }
h1 { font-size: var(--font-size-200); line-height: var(--line-height-200); font-weight: var(--font-weight-semibold); margin: 0; text-wrap: balance; }
h2, .t-title { font-size: var(--font-size-150); line-height: var(--line-height-150); font-weight: var(--font-weight-bold); margin: 0; text-wrap: balance; }   /* font-title */
.dek, .t-subtitle { font-size: var(--font-size-150); line-height: var(--line-height-150); font-weight: var(--font-weight-regular); color: var(--element-neutral-color); margin: 0; text-wrap: balance; }   /* font-subtitle */

/* ---- chrome: top bar, navigation menu, brilliance menu, app menu ---- */
obc-top-bar { position: sticky; top: 0; z-index: 40; display: block; }
.scrim { position: fixed; inset: var(--touch) 0 0 0; z-index: 45; }   /* OICL's own apps use a transparent click-catcher */
obc-navigation-menu { position: fixed; top: var(--touch); bottom: 0; left: 0; z-index: 50; }
obc-brilliance-menu, obc-app-menu { position: fixed; top: 52px; right: var(--gap); z-index: 50; max-width: calc(100vw - 2 * var(--gap)); }
obc-app-menu { max-height: calc(100vh - 56px); overflow: auto; }

/* ---- pages: the backdrop, 4 px gutters, containers on it (the conning grammar) ---- */
main { padding: var(--gap); }
.page { display: block; }
.doc, .panel-card {   /* the reading container: obc-card's own wrapper rule (card.css), as a page */
  max-width: var(--measure); margin: 0 auto; padding: 24px var(--pad) 40px;
  background: var(--container-background-color); border: 1px solid var(--border-outline-color); border-radius: var(--r);
}
.band { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: var(--gap); }
.band > * { min-width: 0; }
.band > .panel-card { max-width: none; margin: 0; }
.doc-head { margin: 0 0 24px; }
.doc-head .kicker { margin: 0 0 8px; }
.doc-head .dek { margin-top: 8px; }
.doc p { margin: 0 0 16px; }
.doc .lede { margin-bottom: 24px; }
.doc .note { font-size: var(--font-size-075); line-height: var(--line-height-075); color: var(--element-neutral-color); }
.doc .pull { font-weight: var(--font-weight-bold); margin: 8px 0 0; }
.doc section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border-divider-color); }
.doc section > h2 { margin-bottom: 16px; }
.doc section > h2:not(:first-child) { margin-top: 32px; }

.facts { display: grid; grid-template-columns: 160px minmax(0, 1fr); margin: 24px 0 0; border-top: 1px solid var(--border-divider-color); }
.facts dt, .facts dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--border-divider-color); }
.facts dt { padding-right: 16px; font-size: var(--font-size-075); line-height: var(--line-height-075); font-weight: var(--font-weight-semibold); color: var(--element-neutral-color); padding-top: 12px; }
.ideas { margin: 0; }
.ideas dt { font-weight: var(--font-weight-bold); margin-top: 16px; }
.ideas dt:first-child { margin-top: 0; }
.ideas dd { margin: 0; color: var(--element-neutral-color); }

/* lists = stacked elevated cards (OpenBridge's list item) */
.list { display: grid; gap: 0; border: 1px solid var(--border-outline-color); border-radius: var(--r); overflow: hidden; background: var(--container-global-color); }
.list obc-elevated-card { display: block; min-width: 0; }

/* figures: the instrument value type (34/32, −0.5 tracking) with the instrument unit and label */
.figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px 24px; margin: 16px 0 24px; }
.fig b { display: block; font-size: var(--global-typography-instrument-value-large-font-size, 34px); line-height: var(--global-typography-instrument-value-large-line-height, 32px);
  letter-spacing: var(--global-typography-instrument-value-large-letter-spacing, -0.5px); font-weight: var(--global-typography-instrument-value-large-font-weight-regular, 370);
  color: var(--instrument-enhanced-primary-color); font-variant-numeric: tabular-nums; }
.fig b small { margin-left: 4px; font-size: var(--global-typography-instrument-unit-font-size, 12px); line-height: var(--global-typography-instrument-unit-line-height, 16px);
  font-weight: var(--global-typography-instrument-unit-font-weight, 570); color: var(--element-neutral-color); letter-spacing: 0; }
.fig span { display: block; margin-top: 4px; font-size: var(--font-size-075); line-height: var(--line-height-075); color: var(--element-neutral-color); }

.tbl { display: block; margin: 8px 0 16px; overflow-x: auto; }
.recs { display: grid; gap: 8px; }
.rec-item { display: grid; gap: 4px; }
.rec-item b { font-weight: var(--font-weight-bold); }
.photorow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 16px; }
.photorow button, .log .ph button { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-check); }
.photorow img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-check); }   /* height:auto — the width/height attributes would otherwise pin the height and defeat aspect-ratio */
.photorow.wide img { aspect-ratio: 16 / 9; }
.caption { margin: 8px 0 0; }

/* the timeline */
.log { display: grid; gap: 0; margin-top: 8px; }
.log .entry { padding: 8px 0 16px; border-bottom: 1px solid var(--border-divider-color); }
.log .entry.now { box-shadow: inset 4px 0 0 var(--instrument-enhanced-primary-color); padding-left: 12px; }
.log .entry obc-event-item { display: block; }
.log .ph { display: flex; gap: var(--gap); overflow-x: auto; padding: 8px 0 2px 8px; scrollbar-width: thin; }
.log .ph img { height: 112px; width: auto; border-radius: var(--r-check); }
.log .links { padding: 0 8px; margin: 0; }
.log .desc { padding: 0 8px; margin: 0 0 4px; color: var(--element-neutral-color); max-width: 80ch; }

/* the manual: a section list (elevated cards, 320 = OpenBridge's menu width) beside the reading column */
.manual { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: start; }
.manual .mtoc { position: sticky; top: calc(var(--touch) + var(--gap)); }
.manual .mbody > section { margin-top: 0; padding-top: 0; border-top: 0; }
.manual .mbody > section + section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border-divider-color); }
.manual .mbody h2 { margin-bottom: 12px; }
.manual .prose p { margin: 0 0 12px; }
.manual .prose pre { font: var(--font-size-075) / var(--line-height-075) "Noto Sans Mono", ui-monospace, Menlo, monospace; white-space: pre; overflow-x: auto;
  background: var(--container-section-color); border: 1px solid var(--border-outline-color); padding: 12px; border-radius: var(--r-check); }

/* the gallery */
.gtabs { margin-bottom: 8px; }
.hscroll { overflow-x: auto; min-width: 0; max-width: 100%; scrollbar-width: thin; }
.hscroll > * { min-width: max-content; }
.masonry { columns: 5 220px; column-gap: var(--gap); }
.masonry button { display: block; width: 100%; padding: 0; border: 0; background: none; margin-bottom: var(--gap); break-inside: avoid; cursor: zoom-in; position: relative; border-radius: var(--r-check); }
.masonry img { width: 100%; height: auto; border-radius: var(--r-check); background: var(--container-section-color); }
.masonry .tagline { position: absolute; left: 4px; bottom: 4px; font-size: var(--font-size-075); line-height: var(--line-height-075); color: var(--overlay-element-active-color);
  background: var(--overlay-container-background-color); padding: 2px 8px; border-radius: var(--r-check); opacity: 0; transition: opacity .2s; }
.masonry button:hover .tagline, .masonry button:focus-visible .tagline { opacity: 1; }

/* the lightbox: OICL's detail-panel grammar (ref conning app): floating container, 48 px title row, icon buttons */
.panel { position: fixed; inset: 0; z-index: 60; margin: auto; padding: 0; border: 1px solid var(--border-outline-color); background: var(--container-global-color);
  border-radius: var(--r-floating); box-shadow: var(--shadow-floating); width: min(96vw, 1400px); max-height: 96vh; display: none; flex-direction: column; overflow: hidden; color: var(--element-active-color); }
.panel[open] { display: flex; }
.panel::backdrop { background: transparent; }
.panel-head { flex: none; position: relative; height: var(--touch); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border-divider-color); padding: 0 var(--touch); }
.panel-head h2 { font-size: var(--font-size-100); line-height: var(--line-height-100); font-weight: var(--font-weight-regular); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-head .actions { position: absolute; right: 0; top: 0; height: var(--touch); display: flex; align-items: center; }
.sep { width: 1px; height: 16px; background: var(--border-divider-color); margin: 0 4px; }
.panel-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px; }
.panel-body img { max-width: 100%; max-height: calc(96vh - var(--touch) * 2 - 16px); object-fit: contain; border-radius: var(--r-check); }
.panel-foot { flex: none; height: var(--touch); display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid var(--border-divider-color); font-variant-numeric: tabular-nums; }

.foot { max-width: var(--measure); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding: 16px var(--pad) 24px;
  font-size: var(--font-size-075); line-height: var(--line-height-075); color: var(--element-neutral-color); }

/* ===== Kraftverk: the replay, the instrument, the fifteen boats (OpenBridge cards and instruments on the backdrop) ===== */
obc-card.c { display: block; min-width: 0; }
obc-card.c > :not([slot="title"]) { width: 100%; align-self: stretch; }   /* the card centres its content; ours fills it */
obc-card.c p { margin: 0 0 12px; padding-inline: 12px; }
obc-card.c .lbl { padding-inline: 12px; }
.band-head { max-width: var(--measure); padding: 24px 12px 8px; }
.band-head h2 { margin-bottom: 8px; }
.band-head p { margin: 0; color: var(--element-neutral-color); }
.fields { display: grid; gap: 8px 16px; }
.fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.kv-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 8px; padding-inline: 12px; }
.kv-seek { display: block; width: 100%; }
.kv-timeline { display: block; width: 100%; height: 28px; cursor: pointer; border-radius: var(--r-check); background: var(--container-section-color); border: 1px solid var(--border-outline-color); }
#kv-legend { margin: 8px 0 12px; }
#kv-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.kv-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 16px 24px; align-items: start; padding-inline: 12px; }
.kv-boat h2 { margin: 0 0 4px; }
.kv-instr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.kv-instr .ci { aspect-ratio: 1; min-width: 0; }
.kv-instr .ci > * { display: block; width: 100%; height: 100%; }
.kv-streams { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--gap); }
.kvs { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 8px 2px; border-radius: var(--r-check); background: var(--container-section-color); border: 1px solid var(--border-outline-color); border-top: 3px solid var(--border-outline-color); min-width: 0; }
.kvs.vessel { border-top-color: var(--instrument-enhanced-primary-color); } .kvs.exact { border-top-color: var(--alert-alarm-color); }
.kvs.lit { box-shadow: inset 0 0 0 1px var(--instrument-enhanced-primary-color); }
.kvs .gv { width: 66px; height: 190px; position: relative; overflow: hidden; }   /* OpenBridge 1.0.1 gauge-vertical draws at a fixed 132×384 px */
.kvs .gv obc-gauge-vertical { position: absolute; left: 0; top: 0; display: block; width: 132px; height: 384px; transform: scale(.495); transform-origin: 0 0; }
.kvs b { font-weight: var(--font-weight-semibold); font-size: var(--font-size-075); line-height: var(--line-height-075); }
.kvs .mv { min-height: 16px; color: var(--instrument-enhanced-primary-color); padding: 0; }
.kv-media { display: grid; gap: var(--gap); padding-inline: 12px; }
.kv-media .photorow { margin-top: 0; }
.kv-event { display: grid; gap: 8px; }
.kv-event video { width: 100%; max-height: 70vh; background: var(--container-backdrop-color); border-radius: var(--r-check); }
.kv-event figure { margin: 0; }
.kv-event .photorow img { aspect-ratio: 4 / 3; }   /* 21 Oct: the event photos are 4:3; keep the people, not the ceiling */
.kv-event figcaption { margin-top: 4px; }

.instrument { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.instrument > * { min-width: 0; }
.boatstrip { min-width: 0; background: var(--container-background-color); border: 1px solid var(--border-outline-color); border-radius: var(--r); padding: 8px 12px 0; }
.boatstrip .lbl { display: block; padding: 0 0 4px; }
.conning { display: grid; gap: var(--gap); grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
.col { display: grid; gap: var(--gap); min-width: 0; }
.boatname { margin: 4px 0 0 !important; }
.boatname b { font-weight: var(--font-weight-bold); }
.vnote { color: var(--element-neutral-color); margin: 4px 0 8px !important; min-height: 24px; }
obc-card.c .compassbox { width: min(100%, 300px); aspect-ratio: 1; margin: 0 auto 8px; }
.compassbox obc-compass, .windbox obc-wind, .pr obc-pitch-roll, .hv obc-heave, .me obc-main-engine, .rd obc-rudder { display: block; width: 100%; height: 100%; }
.windrow, .thr { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; padding-inline: 12px; }
.windbox { width: 140px; height: 140px; }
.thr obc-thruster { display: block; width: 140px; height: 160px; }
.motion, .prop { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.pr, .hv, .me, .rd { height: 170px; min-width: 0; }

.camera .places { display: block; margin-bottom: 8px; overflow-x: auto; }
.feed { position: relative; margin: 0; border-radius: var(--r-check); overflow: hidden; background: var(--container-backdrop-color); aspect-ratio: 4 / 3; max-height: 560px; }
.feed img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: opacity .4s ease; }
.feed figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 12px;
  color: var(--overlay-element-active-color); background: var(--overlay-container-background-color); font-size: var(--font-size-075); line-height: var(--line-height-075); }
.feed .rec { position: absolute; top: 8px; left: 8px; }
.strip { display: flex; gap: var(--gap); overflow-x: auto; padding-top: 8px; scrollbar-width: thin; }
.strip button { flex: none; padding: 0; border: 2px solid transparent; border-radius: var(--r-check); background: none; cursor: pointer; }
.strip button[aria-pressed="true"] { border-color: var(--instrument-enhanced-primary-color); }
.strip img { width: 76px; height: 57px; object-fit: cover; border-radius: 2px; }

.soundrow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 8px; padding-inline: 12px; }
.soundrow .lbl { flex: 1 1 240px; padding: 0; }
.soundrow obc-progress-bar { flex: 1 1 100%; }
.simline { display: flex; gap: 8px; align-items: flex-start; font-size: var(--font-size-075); line-height: var(--line-height-075); color: var(--element-neutral-color); margin-bottom: 8px; flex-wrap: wrap; padding-inline: 12px; }
.simline span { flex: 1 1 260px; }
.masters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; padding-inline: 12px; }
.masters label { display: grid; gap: 2px; font-size: var(--font-size-075); line-height: var(--line-height-075); font-weight: var(--font-weight-semibold); color: var(--element-neutral-color); }
.streams { display: grid; gap: var(--gap); padding-inline: 4px; }
.stream { display: grid; grid-template-columns: 112px minmax(0, 1fr) 96px 72px; gap: 8px; align-items: center; min-height: 64px; padding: 4px 8px 4px 12px; border-radius: var(--r-check);
  background: var(--container-section-color); border: 1px solid var(--border-outline-color); border-left: 4px solid var(--border-outline-color); }
.stream.vessel { border-left-color: var(--instrument-enhanced-primary-color); }
.stream.world { border-left-color: var(--element-neutral-color); }
.stream.exact { border-left-color: var(--alert-alarm-color); }
.stream .nm { font-weight: var(--font-weight-semibold); }
.stream .nm small { display: block; font-weight: var(--font-weight-regular); font-size: var(--font-size-075); line-height: var(--line-height-075); color: var(--element-neutral-color); }
.stream .sl { display: grid; gap: 0; min-width: 0; }
.stream .chr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: var(--font-size-075); line-height: var(--line-height-075); color: var(--element-neutral-color); }
.stream .chr i { font-style: normal; }
.stream .chr obc-slider { --slider-height: 24px; }
.stream obc-graph-mini { display: block; height: 32px; width: 100%; }
.stream obc-instrument-field { justify-self: end; }
.stream .move { grid-column: 1 / -1; font-size: var(--font-size-075); line-height: var(--line-height-075); color: var(--instrument-enhanced-primary-color); min-height: 0; }
.stream.lit { background: var(--container-global-color); box-shadow: inset 0 0 0 1px var(--instrument-enhanced-primary-color); }
.modes { margin-top: 12px; display: grid; gap: 8px; padding-inline: 12px; }
.modes .lbl { margin: 0; padding: 0; }
.modegroup { display: block; width: 100%; }
.advice { display: grid; gap: var(--gap); margin-bottom: 8px; padding-inline: 4px; }
.advice obc-advice-menu-item, .advice obc-alert-menu-item { opacity: .45; transition: opacity .3s ease; }
.advice obc-advice-menu-item.on, .advice obc-alert-menu-item.on { opacity: 1; }
.kboats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.kboats obc-elevated-card { display: block; cursor: pointer; }

/* at night a bridge dims its pictures too: the field camera and every photo drop to the night palette's level */
[data-obc-theme="night"] img, [data-obc-theme="night"] video { filter: brightness(.55) sepia(.35); }
[data-obc-theme="dusk"] img, [data-obc-theme="dusk"] video { filter: brightness(.85); }
[id] { scroll-margin-top: calc(var(--touch) + 8px); }

@media (max-width: 1100px) {
  .conning { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .conning .mid { grid-column: 1 / -1; order: -1; }
  .conning .mid .feed { aspect-ratio: 16 / 9; }
  .manual { grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
  :root { --pad: 16px; }
  .doc, .panel-card { padding: 16px var(--pad) 32px; }
  .conning, .manual { grid-template-columns: minmax(0, 1fr); }
  .manual .mtoc { position: static; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { padding: 12px 0 0; border-bottom: 0; }
  .facts dd { padding: 2px 0 12px; }
  .masters { grid-template-columns: minmax(0, 1fr); }
  .stream { grid-template-columns: 92px minmax(0, 1fr) 64px; }
  .stream obc-graph-mini { display: none; }
  .kv-grid { grid-template-columns: minmax(0, 1fr); }
  .kv-streams { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kvs .gv { transform: scale(.75); transform-origin: top center; height: 143px; }
  .windrow, .thr { grid-template-columns: 120px 1fr; }
  .masonry { columns: 2 140px; }
  .photorow.wide { grid-template-columns: minmax(0, 1fr); }
  .foot { padding: 16px var(--pad) 24px; }
}
@media (prefers-reduced-motion: reduce) { .feed img, .advice obc-advice-menu-item, .masonry .tagline { transition: none; } }