/* base.css — one design system for every screen: Remember the Deep v7's under-sea language on the team palette.
   Layout: the page background IS the sea (#sea, full screen). It is brightest on deck and darkens with depth
   (Sea.depth in ocean.js, same curve as v7). Learner screens are one centred column over it — no device frame.
   The teacher and research pages are the control room above the dive: same type, darker water, hairlines.
   Type: Onest for text, Sora (thin) for giant display, DM Mono for labels, the HUD and buttons.
   Single dark theme by choice: the whole product lives under the sea. */

:root {
  /* team Figma palette */
  --navy: #123B52; --teal: #087F96; --mint: #A8E1CE; --cream: #FFF5DF; --coral: #F58C72;
  --brown: #725044; --wood: #E9BD8E; --brass: #D6B07A;
  /* the sea, surface → abyss (Remember the Deep v7) */
  --sea-1: #1D7C93; --sea-2: #135F78; --sea-3: #0A3B51;
  --abyss-1: #061D2B; --abyss-2: #030E16; --abyss-3: #01060A;
  --glow: #6FE7E1; --ox: #FF6A3D;
  /* ink on water */
  --ink: #F2F7F6; --ink-2: #C9DCDD; --ink-3: #9DBCC1; --ink-4: rgba(255, 255, 255, .46);
  --hair: rgba(255, 255, 255, .14); --hair-2: rgba(255, 255, 255, .28);
  --shade: rgba(2, 14, 22, .34);
  /* states on water */
  --ok: #57D9A3; --mid: #F2B54A; --no: #FF8466;
  /* paper dive log: the one light surface, for what you logged and what you did */
  --paper: #FBF3E1; --paper-line: #EADFC6; --paper-ink: #2E2418; --paper-mute: #8B6A3B;
  --stamp-ok: #2E7D57; --stamp-mid: #A9670A; --stamp-no: #B83A28;
  /* control room (teacher, research) */
  --c-bg: #050E14; --c-line: rgba(255, 255, 255, .085); --c-line-2: rgba(255, 255, 255, .16);
  --c-hi: #ECF3F3; --c-text: #B7CACD; --c-mute: #7F989E;
  /* type */
  --text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wide: "Sora", "Onest", system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* one column for every learner screen */
  --col: 480px; --gutter: 20px;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--abyss-3); color: var(--ink); font: 400 16px/1.5 var(--text); letter-spacing: -.005em; min-height: 100vh; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the sea: one fixed layer behind every learner screen ---- */
.sea { --dark: 0; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, var(--sea-1) 0%, var(--sea-2) 42%, var(--sea-3) 100%); }
.sea::before { content: ""; position: absolute; inset: 0; opacity: var(--dark); transition: opacity 1.2s ease;
  background: linear-gradient(180deg, var(--abyss-1) 0%, var(--abyss-2) 65%, var(--abyss-3) 100%); }
.sea::after { content: ""; position: absolute; inset: -10% -30% 40%; opacity: calc(.9 - var(--dark)); transition: opacity 1.2s ease;
  background: repeating-linear-gradient(104deg, rgba(255, 255, 255, .07) 0 34px, transparent 34px 110px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
  animation: rays 16s ease-in-out infinite alternate; }
@keyframes rays { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
.ocean { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
#app { position: relative; z-index: 1; }

/* ---- type: one headline per screen ---- */
.kicker, .lab { display: flex; align-items: flex-start; gap: 8px; font: 400 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.kicker::before, .lab::before { content: ""; width: 6px; height: 6px; margin-top: 5px; background: var(--glow); flex: none; }   /* stays on the first line when the label wraps */
.kicker b { font-weight: 400; color: var(--glow); }          /* the W7 journey stage */
.lab--glow { color: var(--glow); }
.lab--ink { color: var(--ink-3); }
.lab.no-sq::before { display: none; }
.grad { background: linear-gradient(180deg, #FFFFFF 0%, #EEF9F8 50%, #B9E7E8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.giant { font: 200 clamp(56px, 15vw, 88px)/.9 var(--wide); letter-spacing: -.055em; padding-bottom: .06em; }
.h-display { font: 400 clamp(40px, 11vw, 50px)/1 var(--text); letter-spacing: -.045em; text-wrap: balance; padding-bottom: .04em; }
.h-q { font: 400 28px/1.15 var(--text); letter-spacing: -.03em; text-wrap: balance; }
.t-body { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 36ch; }
.lede { font: 300 19px/1.45 var(--text); letter-spacing: -.01em; color: var(--ink); max-width: 34ch; }
.small, .note { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mono { font: 400 12.5px/1.5 var(--mono); letter-spacing: .02em; }
.metaline { font: 400 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.q-label { display: block; font: 400 10.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.link { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); font-weight: 500; }
.textlink { font: 400 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); padding: 10px 0; }
.textlink:hover { color: var(--ink); }
.wordmark { font: 400 12px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.wordmark i, .wordmark b { font-style: normal; font-weight: 400; color: var(--ox); }
.quiet { font: 400 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); padding: 10px 0; }
.quiet:hover { color: var(--ink); }

/* ---- buttons: paper pill with OceanX's orange dot; ghost = hairline ---- */
.pill { --bg: var(--paper); --fg: var(--navy); --dot: var(--ox);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px; border-radius: 999px;
  background: var(--bg); color: var(--fg); font: 500 12px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-align: center;
  transition: filter .15s, box-shadow .15s, transform .08s; }
.pill::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex: none; }
.pill:hover { filter: brightness(1.05); }
.pill:active:not([disabled]) { transform: scale(.98); }
.pill--cream { --bg: var(--paper); --fg: var(--navy); }
.pill--ghost { --bg: transparent; --fg: var(--ink); --dot: rgba(255, 255, 255, .45); box-shadow: inset 0 0 0 1px var(--hair-2); }
.pill--ghost:hover { box-shadow: inset 0 0 0 1px var(--glow); filter: none; }
.pill--ink { --bg: var(--navy); --fg: var(--paper); }
.pill--wide { width: 100%; }
.pill--sm { min-height: 40px; padding: 8px 16px; font-size: 11px; letter-spacing: .14em; gap: 8px; }
.pill--sm::after { width: 6px; height: 6px; }
.pill[disabled] { --bg: #21404F; --fg: #8FAAB1; --dot: #5D7D87; box-shadow: none; cursor: not-allowed; filter: none; }

/* ---- choices ---- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 44px; padding: 8px 16px; border-radius: 999px; font: 500 15px/1.2 var(--text); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); transition: background .15s, box-shadow .15s; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--glow); }
.chip[aria-pressed="true"] { background: var(--glow); color: #04202B; box-shadow: none; }

/* ---- fields: underline only, large type ---- */
.field { display: block; width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .32); border-radius: 0;
  padding: 8px 0 12px; font: 400 22px/1.35 var(--text); letter-spacing: -.015em; color: var(--ink); }
.field:focus { outline: 0; border-bottom-color: var(--glow); }
.field::placeholder { color: rgba(255, 255, 255, .38); }
textarea.field { resize: none; min-height: 96px; }
.field--sm { font-size: 18px; }

/* ---- the otter in a brass porthole (team art) ---- */
.port { position: relative; width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden; background: var(--paper);
  box-shadow: 0 0 0 3px var(--brass), 0 0 0 4px rgba(0, 0, 0, .3); display: grid; place-items: end center; }
.port img { width: 90%; height: auto; margin-bottom: -2px; }
.port--md { width: 64px; height: 64px; box-shadow: 0 0 0 4px var(--brass), 0 0 0 6px rgba(0, 0, 0, .3); }
.port--lg { width: 176px; height: 176px; box-shadow: 0 0 0 10px var(--brass), 0 0 0 13px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .35); }
.port--lg img { width: 81%; margin-bottom: 6px; animation: bob 3.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* otter speaks: porthole + one line, no bubble */
.comms { display: flex; gap: 14px; align-items: center; animation: rise .35s ease-out both; }
.comms > p, .comms > div > p:first-child { font-size: 17px; line-height: 1.45; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.comms--hero { flex-direction: column; text-align: center; gap: 26px; padding-top: 8px; }
.comms--hero > p { font: 400 27px/1.2 var(--text); letter-spacing: -.025em; max-width: 22ch; }
@keyframes rise { from { transform: translateY(10px); } to { transform: none; } }

/* ---- paper dive log (stamps live on paper) ---- */
.logbook { position: relative; background: var(--paper); color: var(--paper-ink); border-radius: 6px 18px 18px 6px; padding: 14px 16px 6px 24px; box-shadow: 0 20px 44px rgba(0, 0, 0, .3); }
.logbook::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: 6px 0 0 6px; background: repeating-linear-gradient(180deg, #B58A52 0 10px, #C9A36A 10px 20px); }
.logbook__head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 400 10px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-mute); padding-bottom: 9px; border-bottom: 2px solid var(--paper-ink); }
.logbook__rows { list-style: none; }
.logrow { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--paper-line); }
.logrow:last-child { border-bottom: 0; }
.logrow__n { font: 400 11px/1 var(--mono); color: var(--paper-mute); }
.logrow__t { font: 500 16.5px/1.25 var(--text); letter-spacing: -.01em; }
.logrow__s { font-size: 13.5px; line-height: 1.4; color: var(--paper-mute); margin-top: 2px; }
.stamp { --c: var(--stamp-ok); display: inline-flex; align-items: center; font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c);
  border: 2px solid var(--c); border-radius: 5px; padding: 5px 6px 4px; transform: rotate(-4deg); white-space: nowrap; opacity: .92; }
.stamp--had, .stamp--stamped, .stamp--verified { --c: var(--stamp-ok); }
.stamp--partly, .stamp--logged, .stamp--review { --c: var(--stamp-mid); }
.stamp--missed, .stamp--planned, .stamp--returned { --c: var(--stamp-no); transform: rotate(3deg); }
.stamp--commended { --c: #A07A3A; background: rgba(214, 176, 122, .22); }
.stamp--mission { --c: var(--ox); font-size: 8.5px; padding: 3px 5px 2px; transform: rotate(-2deg); vertical-align: middle; }
.stamp--none { --c: var(--paper-mute); opacity: .6; }

/* ---- readouts and bars (instrument style, hairlines instead of boxes) ---- */
.readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.readout > div { display: grid; gap: 4px; align-content: start; padding: 14px 12px 0 0; min-width: 0; }
.readout > div + div { padding-left: 12px; border-left: 1px solid var(--hair); }
.readout b { font: 300 36px/1.05 var(--text); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.readout span { font: 400 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.bar { position: relative; height: 2px; background: rgba(255, 255, 255, .16); border-radius: 2px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(111, 231, 225, .2), var(--glow)); border-radius: 2px; }
.bar i::after { content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 14px var(--glow); }

/* ---- art in a scanner frame ---- */
.scan { position: relative; border-radius: 22px; overflow: hidden; line-height: 0; background: var(--navy); }
.scan img { width: 100%; height: auto; }
.scan__frame { position: absolute; inset: 7px; pointer-events: none; --c: var(--glow); background:
  linear-gradient(var(--c), var(--c)) 0 0 / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 2px 16px no-repeat,
  linear-gradient(var(--c), var(--c)) 100% 0 / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 16px no-repeat,
  linear-gradient(var(--c), var(--c)) 0 100% / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 2px 16px no-repeat,
  linear-gradient(var(--c), var(--c)) 100% 100% / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 16px no-repeat; }
.scan__tag { position: absolute; right: 14px; bottom: 13px; font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #04202B; background: var(--glow); padding: 5px 8px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}