/* Clippership design language for the sea-trials page.

   style.css, index.html and app.js are regenerated from the coworker's artifact
   (tools/extract_artifact.py), so the look lives here instead: this file loads
   after style.css and overrides it, and the extractor never rewrites it.
   Ported from clippership-site (DESIGN.md, src/app/globals.css); token names match.

   1. The artifact's own colour variables are remapped onto the site's single-ink
      palette, so anything new the artifact adds picks up the palette for free.
   2. Type, shape and chrome are overridden per component below. A new artifact
      component with no rule here still renders, just less polished.

   The --s-*, --track* and --low/--mod/--sev colours are data encodings: the one
   place colour carries meaning. app.js reads --track and --track-hi, keep them literal. */

@font-face { font-family: "Newsreader"; font-weight: 200 800; font-display: swap; src: url(vendor/fonts/newsreader-latin.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(vendor/fonts/inter-latin.woff2) format("woff2"); }
@font-face { font-family: "Overpass Mono"; font-weight: 300 700; font-display: swap; src: url(vendor/fonts/overpass-mono-latin.woff2) format("woff2"); }

/* The two extra selectors match style.css's dark-mode blocks so this wins there too: the site is light only. */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
  color-scheme: light;
  --ink-rgb: 25 25 25;
  --color-ink: #291d1d; /* display type only */
  --color-text: rgb(var(--ink-rgb));
  --color-text-secondary: rgb(var(--ink-rgb) / 0.64);
  --color-text-quiet: rgb(var(--ink-rgb) / 0.48);
  --color-border-rule: rgb(var(--ink-rgb) / 0.16);
  --color-border-hairline: rgb(var(--ink-rgb) / 0.08);
  --color-surface: #fff;
  --color-panel-wash: rgb(229 228 230 / 0.32);
  --color-glass-mid: rgb(246 246 247 / 0.64);
  --font-display: "Exposure", "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Matter", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --duration-fast: 160ms;
  --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);

  /* style.css's variables, remapped */
  --page: var(--color-surface); --surface: var(--color-panel-wash);
  --ink: var(--color-text); --ink-2: var(--color-text-secondary); --muted: var(--color-text-quiet);
  --grid: var(--color-border-hairline); --axis: var(--color-border-rule); --ring: var(--color-border-hairline);
  --s-auto: #4d80e6; --s-gui: #eb6834; --s-rc: #1baf7a; --s-radio: #8a5cd6; --s-none: var(--color-border-rule);
  --track: #4d80e6; --track-hi: #eb6834;
}

/* ---- type ---- */
body { font: 16px/1.45 var(--font-sans); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
main { padding-block: 48px 96px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
h1, h2, .tile .value { font-family: var(--font-display); font-weight: 450; line-height: 1; letter-spacing: -0.04em; color: var(--color-ink); }
h1 { font-size: clamp(2.125rem, 4.1667vw, 3.75rem); margin: 0 0 16px; }
h2 { font-size: clamp(2rem, 3.3333vw, 3rem); margin: 64px 0 24px; }
a { color: inherit; }
.eyebrow, .tile .label, .legend .d, .legend .ld .nf, .gallery .cap, .mrows .mh b { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--color-text); }
.eyebrow { margin: 0 0 16px; }
.small { font-size: 14px; }
h1 + .small { font-size: clamp(1rem, 1.25vw, 1.125rem); font-weight: 500; line-height: 1.18; letter-spacing: -0.04em; max-width: 38em; margin: 0; } /* the intro, set as a lead */

/* ---- panels and tiles ---- */
.panel { border: 0; border-radius: var(--radius-lg); padding: 24px; }
.tiles { grid-template-columns: repeat(auto-fit, minmax(min(200px, 45%), 1fr)); margin-top: 48px; }
/* The number scales with its own tile (cqi = 1% of the tile's width), so it never spills at any column count. */
.tile { container-type: inline-size; }
.tile .label { min-height: 2em; } /* room for two lines, so numbers line up across a row */
.tile .value { font-size: clamp(1.75rem, 26cqi, 3rem); margin: 16px 0 8px; white-space: nowrap; }
.tile .note { font-size: 14px; line-height: 1.24; color: var(--color-text-secondary); margin: 0; }

/* ---- map, legend, gallery ---- */
#map { border-radius: var(--radius-md); }
.legend { padding: 8px; scrollbar-width: thin; scrollbar-color: var(--color-border-rule) transparent; }
.legend button { padding: 8px; border-radius: var(--radius-sm); font-size: 14px; letter-spacing: -0.02em; transition: background var(--duration-fast) var(--ease-fluid); }
.legend .dot { align-self: baseline !important; } /* app.js centres it inline; sit on the first line when a name wraps */
.legend .d { width: 92px; font-size: 11px; color: var(--color-text-secondary); }
.legend .ld .nf { margin-top: 16px; }
.gallery button { border-radius: var(--radius-md); }
.gallery .cap { padding: 24px 12px 10px; font-size: 10px; color: #fff; background: linear-gradient(transparent, rgb(43 38 38 / 0.8)); }
.legend button:focus-visible, .gallery button:focus-visible, .ptabs button:focus-visible { outline-color: var(--color-text); }

/* ---- "at a glance": tabs as the site's segment control, then the bar rows ---- */
.pillars { padding: 24px; overflow: visible; }
.ptabs { width: fit-content; max-width: 100%; gap: 4px; padding: 4px; border: 0; border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border-hairline); scrollbar-width: none; }
.ptabs button { height: 32px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); color: var(--color-text); font-size: 14px; font-weight: 600; letter-spacing: -0.02em; transition: background var(--duration-fast) var(--ease-fluid); }
.ptabs button[aria-selected="true"] { background: var(--color-text); color: #fff; font-weight: 500; }
#ppanel { padding: 24px 0 0; }
#ppanel .pdesc { margin: 0 0 16px; }
.keys { font-size: 14px; margin-bottom: 16px; }
.keys span { gap: 8px; }
.sw { width: 8px; height: 8px; border-radius: var(--radius-xs); }
.prows, .mrows { gap: 8px 12px; }
.prows .lbl, .mrows .lbl { font-size: 14px; }
.prows .val, .mrows .val, .mrows .mc em { font-size: 13px; }
.bar { height: 12px; }
.bar span:nth-child(n), .mrows .mt, .mrows .mt span { border-radius: var(--radius-xs); }
.mrows .mt { height: 8px; }

/* ---- floating chrome: no drop shadows anywhere ---- */
.tip { box-shadow: none; background: var(--color-glass-mid); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: var(--color-border-rule); }
.leaflet-container { font-family: var(--font-sans); }
.leaflet-bar, .leaflet-touch .leaflet-bar { border: 1px solid var(--color-border-rule); border-radius: var(--radius-pill); box-shadow: none; overflow: hidden; }
.leaflet-bar a { color: var(--color-text); border-bottom-color: var(--color-border-hairline); }
.leaflet-tooltip { border: 1px solid var(--color-border-rule); border-radius: var(--radius-sm); box-shadow: none; color: var(--color-text); font-size: 13px; padding: 6px 8px; }

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