/* Fonts, vendored under app/web/fonts/ (SIL Open Font Licence, see the
   .txt files there). Rubik is a variable font; declaring it four times
   at the weights we use is what Google's own generated CSS does, and lets
   the browser pick the right instance out of the one file. */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/rubik-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/rubik-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/rubik-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/rubik-variable.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-600.woff2") format("woff2");
}

:root {
  /* "Bright reef" -- docs/design/dex-brief.md "Look", values copied from
     docs/design/dex/*.dc.html. Light theme only; dark theme deferred. */
  --bg: #fffbf2;
  --card: #ffffff;
  --lagoon: #0a6fb0;        /* top band, "to confirm" blue */
  --dark-blue: #0a4f80;     /* links */
  --pale-blue: #e3eef5;
  --faded: #eef2f4;         /* faded tile */
  --text: #14181a;          /* text and outlines */
  --muted: #3a4246;
  --muted-light: #4e575b;
  --grey-border: #9aa6ac;
  --grey-border-light: #c5cdd1;
  --divider: #e3e6e7;
  --accent: #ffc93c;
  --accent-text: #14181a;
  --on-blue: #e4f2fb;       /* body text on the lagoon band */
  --on-blue-quiet: #cfe6f5;
  --focus-ring: #ffc93c;

  /* Older names still used by pages not yet rebuilt. */
  --card-border: var(--grey-border-light);
  --field-border: var(--grey-border);
  --button-border: var(--grey-border-light);
  --input-bg: #ffffff;
  --well-bg: var(--faded);
  --accent-tint: #fff6dc;
  --bar-track: var(--faded);
  --nav-active-bg: var(--pale-blue);
  --link: var(--dark-blue);
  --link-hover: #063558;

  --font-body: "Rubik", system-ui, sans-serif;
  --font-heading: "Rubik", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
}

/* The analysis page is desktop-only by design (docs/research/tasks/09-app.md Part 3:
   "Target: current desktop Chrome, Firefox and Safari at laptop width").
   Every other page must work down to 360px, so the old blanket
   min-width: 1280px on body is gone; this page keeps its own. */
body.analysis-page { min-width: 1280px; }

h1, h2, h3 { font-family: var(--font-heading); }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- top bar */

header.topbar { background: var(--lagoon); border-bottom: 3px solid var(--text); }
/* Pages that open on a lagoon band (the Dex, A dive) continue the blue: the
   band carries the dark rule instead. */
body.has-band header.topbar { border-bottom: none; }

.topbar-inner {
  max-width: 1248px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #ffffff;
  font-weight: 800;
  font-size: 22px;
}
.logo:hover { color: #ffffff; }
.logo svg { flex: none; }
.beta-tag {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
}

.topbar-nav { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 99px;
  text-decoration: none;
  font-weight: 500;
  color: #ffffff;
}
.nav-link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.14); }
.nav-link[aria-current="page"] { font-weight: 700; background: #ffffff; color: var(--dark-blue); }
.topbar-add {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid #ffffff;
  border-radius: 99px;
  text-decoration: none;
  font-weight: 700;
  color: #ffffff;
}
.topbar-add:hover { color: var(--dark-blue); background: #ffffff; }
.topbar-logout { border: none; background: transparent; font: inherit; font-weight: 500; cursor: pointer; }

/* ------------------------------------------------------- shared pieces */

.wrap { max-width: 1248px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (max-width: 480px) { .wrap, .topbar-inner { padding-left: 16px; padding-right: 16px; } }

/* Pill buttons. .btn is the white outlined one; .btn-primary the yellow
   main button with the offset shadow; .btn-lg the 52 px size of the bands. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 99px;
  border: 2.5px solid var(--text);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { color: var(--text); background: var(--faded); border-color: var(--text); }
.btn-primary { background: var(--accent); box-shadow: 4px 4px 0 var(--text); font-weight: 800; }
.btn-primary:hover { background: #ffd666; }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 18px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 1; background: var(--faded); color: var(--muted-light); box-shadow: none; cursor: not-allowed; }
.btn-text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--dark-blue);
  text-decoration: underline;
  cursor: pointer;
}

.back-link { align-self: flex-start; font-size: 15px; font-weight: 700; color: var(--dark-blue); }

/* Mono counter pill: "2 / 73", yellow once started. */
.count-pill {
  padding: 3px 12px;
  border-radius: 99px;
  border: 2px solid var(--text);
  background: var(--card);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.count-pill.started { background: var(--accent); }

/* Small pills: "New", "6 new fish", "1 to confirm", "Sample". */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 99px;
  border: 2px solid var(--text);
  background: var(--card);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
}
.tag-new { background: var(--accent); }
.tag-confirm { border: 2px dashed var(--lagoon); color: var(--dark-blue); }

/* A section heading with the grey rule under it. */
.section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 10px; border-bottom: 2px solid var(--divider); }
.section-head h2 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.25; }
.section-head .sub { color: var(--muted); font-size: 15px; }

/* Fish tiles (Dex grid, Fish you could meet, A dive): the whole tile is the
   card. Met: dark outline + shadow. To confirm: dashed blue + "?". Not met:
   faded, thin grey border. */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
@media (max-width: 480px) { .tile-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; } }
.tile {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  background: var(--card);
}
.tile:hover { color: var(--text); }
/* 3:2, the shape of most reference photos (median width/height 1.5), and
   filled: the typical photo fits exactly; a 4:3 one loses a thin strip of
   sea at the top and bottom, never the fish's head or tail (user's review,
   2026-10-19). */
.tile-photo { position: relative; aspect-ratio: 3 / 2; background: var(--card); overflow: hidden; }
.tile-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* No photo: a "Wanted" poster (user's review, 2026-10-19): the logo's fish line,
   WANTED, and "Be the first to snap it", in the tile's own colours. */
.tile .tile-photo.no-photo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0 10px; text-align: center; background-color: var(--bg); color: var(--muted-light);
  border-bottom: 1.5px solid var(--grey-border-light);
}
.tile-photo.no-photo::before {
  content: "Wanted"; padding-top: 30px; font-family: var(--font-mono); font-size: 15px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  background: top center / 48px 24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' fill='none' stroke='%234E575B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M46 5C32 20 14 24 3 12C14 0 32 4 46 19'/%3E%3C/svg%3E");
}
.tile-photo.no-photo::after { content: "Be the first to snap it"; font-size: 12px; font-weight: 400; line-height: 1.3; }
.tile-body { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 1px; }
.tile-number { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--muted-light); }
.tile-name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.tile-sub { font-size: 13px; color: var(--muted-light); }
.tile-new { position: absolute; top: 8px; right: 8px; padding: 2px 10px; border-radius: 99px; background: var(--accent); border: 2px solid var(--text); font-size: 12px; font-weight: 800; }
/* A found fish: the reference photo, with the diver's own shot in a circle on
   its corner (the Dex and A dive). Diver shots are mostly small and blue, so
   they do not carry a whole tile. .no-ref: no reference photo, the shot
   becomes the picture and the circle goes. */
.tile-top { position: relative; }
.tile-shot { position: absolute; right: 10px; bottom: -22px; z-index: 1; width: 54px; height: 54px; border-radius: 99px; object-fit: cover; border: 2.5px solid var(--text); box-shadow: 2px 2px 0 var(--text); background: var(--card); }
.tile.has-shot .tile-body { padding-right: 72px; }
.tile.no-ref .tile-shot { display: none; }
.tile.no-ref .tile-body { padding-right: 12px; }
@media (max-width: 480px) {
  .tile-shot { width: 44px; height: 44px; bottom: -18px; right: 8px; }
  .tile.has-shot .tile-body { padding-right: 12px; padding-top: 22px; }
}

.tile--met { border: 2.5px solid var(--text); box-shadow: 3px 3px 0 var(--text); }
.tile--met .tile-photo { border-bottom: 2.5px solid var(--text); }
.tile--met .tile-number { color: var(--muted); }
.tile--met:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--text); }

.tile--confirm { border: 2.5px dashed var(--lagoon); }
.tile--confirm .tile-photo img { filter: saturate(0.45); opacity: 0.8; }
.tile-ask {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 99px; background: var(--lagoon); border: 2.5px solid var(--text);
  color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 28px;
}
.tile-cta { font-size: 13px; font-weight: 700; color: var(--dark-blue); }

.tile--faded { background: var(--faded); border: 1.5px solid var(--grey-border-light); }
.tile--faded .tile-photo { background: var(--faded); }
.tile--faded .tile-photo img { filter: grayscale(1) contrast(0.85); opacity: 0.5; }
.tile--faded .tile-name { font-size: 14px; font-weight: 500; color: var(--muted-light); line-height: 1.3; }
/* "Fish you could meet": faded, but on a white card with a darker border. */
.tile--suggest { background: var(--card); border: 1.5px solid var(--grey-border); }
.tile--suggest .tile-photo img { filter: grayscale(1) contrast(0.85); opacity: 0.6; }
.tile--suggest .tile-name { font-size: 14px; font-weight: 500; color: var(--muted); line-height: 1.3; }

.tile-more {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 120px; padding: 12px; border: 2px dashed var(--grey-border); border-radius: 18px;
  color: var(--muted-light); text-align: center; text-decoration: none;
}
.tile-more:hover { color: var(--text); border-color: var(--text); }
.tile-more .n { font-size: 26px; font-weight: 800; }
.tile-more .label { font-size: 13px; }

/* The lagoon band under the top bar (the Dex, A dive). */
.band { background: var(--lagoon); color: #ffffff; border-bottom: 3px solid var(--text); }

/* Loading shapes: grey blocks drawn in a page's real classes until its data
   arrives (My dives, the Dex), so nothing moves when the real page swaps in. */
.sk { display: block; flex: none; background: var(--faded); border-radius: 8px; animation: sk-pulse 1.4s ease-in-out infinite; }
.sk-line { height: 14px; }
.sk-pill { width: 84px; height: 28px; border-radius: 99px; }
.band .sk { background: rgba(255, 255, 255, 0.22); }
@keyframes sk-pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* Old helpers still used by pages not yet rebuilt. */
.nav-link-active { font-weight: 700; background: #ffffff; color: var(--dark-blue); }

.icon-btn {
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: none;
  background: none;
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.icon-btn:hover { background: var(--nav-active-bg); }

.disk-line {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 16px 0 4px;
}
.disk-line.warn { color: var(--accent); }

main { padding: 0; }
body.analysis-page main { padding: 20px; }

button, select, input {
  font-family: inherit;
  font-size: 14px;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--field-border);
  border-radius: 6px;
  padding: 6px 10px;
  min-height: 44px;
}

button { cursor: pointer; border-color: var(--button-border); background: var(--card); }
button:hover { border-color: var(--accent); }
button.primary, button.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
button.danger { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--card-border); font-size: 14px; }
th { color: var(--muted); font-weight: 600; cursor: pointer; user-select: none; }
th:hover { color: var(--text); }

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 14px;
}

.empty-state { text-align: center; color: var(--muted); padding: 60px 20px; }

.run-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.run-row img.thumb { width: 96px; height: 54px; object-fit: cover; border-radius: 4px; background: #000; }
.status-pill { font-size: 12px; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; background: var(--nav-active-bg); color: var(--text); }

.form-grid { display: grid; grid-template-columns: 220px 1fr; gap: 10px 16px; align-items: center; max-width: 720px; }
.form-grid label { color: var(--muted); }

.progress-bar { height: 8px; border-radius: 4px; background: var(--bar-track); overflow: hidden; }
.progress-bar > div { height: 100%; background: var(--accent); width: 0%; }

.analysis-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; }
.filters { display: flex; flex-direction: column; gap: 14px; }
.filters .group { border-top: 1px solid var(--card-border); padding-top: 10px; }
.filters .group h3 { font-size: 12px; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.filters label { display: block; font-size: 13px; margin-bottom: 6px; }
.filters input[type="range"] { width: 100%; }

.live-numbers { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.live-numbers .stat { background: var(--card); border: 1px solid var(--card-border); border-radius: 8px; padding: 8px 12px; min-width: 110px; }
.live-numbers .stat .value { font-size: 20px; font-weight: 700; }
.live-numbers .stat .label { font-size: 11px; color: var(--muted); }
.live-numbers .note { font-size: 11px; color: var(--muted); align-self: center; }
.live-numbers .stat.greyed { opacity: 0.4; }

.tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tabs button.active { background: var(--accent); color: var(--accent-text); }

.sighting-card { border: 1px solid var(--card-border); border-radius: 8px; padding: 10px; margin-bottom: 10px; background: var(--card); }
.sighting-card.selected { border-color: var(--accent); }
.sighting-card .crops-strip { display: flex; gap: 4px; margin-bottom: 8px; overflow-x: auto; }
.sighting-card .crops-strip img { height: 64px; border-radius: 4px; }
.sighting-card .names { font-size: 13px; }
.sighting-card .unsure-mark { color: var(--accent); font-weight: 600; }

.frames-view img.frame { display: block; max-width: 100%; height: auto; border: 1px solid var(--card-border); border-radius: 4px; }
.frames-view .boxes { position: relative; display: inline-block; max-width: 100%; }
.frames-view svg.overlay { position: absolute; top: 0; left: 0; }

.timeline { position: relative; height: 28px; background: var(--card); border: 1px solid var(--card-border); border-radius: 4px; margin-top: 10px; }
.timeline .marker { position: absolute; top: 4px; width: 6px; height: 20px; border-radius: 2px; cursor: pointer; }
.timeline .marker.named { background: var(--accent); }
.timeline .marker.unsure { background: var(--muted); }

.chart { background: var(--card); border: 1px solid var(--card-border); border-radius: 8px; padding: 10px; margin-bottom: 10px; }

/* ------------------------------------------------------------ dive cards */

.dive-list { display: flex; flex-direction: column; gap: 16px; }

.dive-card {
  display: flex;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;
}

.dive-card-thumb {
  flex: 0 1 260px;
  min-height: 150px;
  background: var(--bar-track);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.dive-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dive-card-thumb svg { stroke: var(--muted); }

.dive-card-body {
  flex: 999 1 420px;
  min-width: 0;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dive-card-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dive-card-heading h2 { margin: 0; font-size: 21px; }

.state-tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: var(--nav-active-bg);
  color: var(--text);
}

.dive-card-sub { font-size: 15px; color: var(--muted); }

.fish-count-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 2px; }
.fish-count-value { font-family: var(--font-heading); font-weight: 700; font-size: 28px; }
.fish-count-label { font-size: 14px; color: var(--muted); }

.dive-card-action { flex: 0 1 auto; padding: 22px 24px; display: flex; align-items: center; }

.dive-edit-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.dive-edit-field label { font-size: 13px; color: var(--muted); }
.dive-edit-actions { display: flex; gap: 8px; margin-top: 4px; }

.more-menu { position: relative; }
.more-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  z-index: 10;
}
.more-menu-list button { text-align: left; border: none; }

.welcome-card { text-align: center; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.welcome-card h2 { margin: 0; }
.welcome-card p { margin: 0; color: var(--muted); max-width: 440px; }

/* ----------------------------------------------------------------- a dive */

/* The page itself: dive.html. */

/* ------------------------------------------------------------- add a dive */

.dive-form-card { display: flex; flex-direction: column; gap: 22px; border-radius: 20px; padding: 28px; }

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 20px;
  border: 2px dashed var(--field-border);
  border-radius: 16px;
  background: var(--well-bg);
  text-align: center;
  color: var(--text);
}
.dropzone.drag-over { border-color: var(--accent); }

.dropzone-title { font-weight: 700; font-size: 20px; }
.dropzone-subtitle { font-size: 15px; color: var(--muted); }

.dropzone-chosen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 20px;
  border: 2px solid var(--accent);
  border-radius: 16px;
  background: var(--well-bg);
  text-align: center;
}
.dropzone-chosen .filename { font-weight: 700; font-size: 17px; word-break: break-all; }

.link-btn {
  border: none;
  background: none;
  color: var(--link);
  text-decoration: underline;
  font-size: 14px;
  padding: 10px 0;
  min-height: 44px;
  text-align: center;
  cursor: pointer;
  align-self: center;
}
.link-btn:hover { color: var(--link-hover); }

.inbox-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.inbox-list button { text-align: left; }

.field-block { display: flex; flex-direction: column; gap: 8px; }
.field-block > label { font-weight: 700; font-size: 18px; }
.field-block select { min-height: 52px; padding: 0 14px; font-size: 17px; width: 100%; }

.find-fish-btn { min-height: 52px; font-size: 18px; }

.estimate-line { font-size: 15px; color: var(--muted); text-align: center; }

.hidden { display: none !important; }
.row { display: flex; align-items: center; gap: 10px; }
.muted { color: var(--muted); }
.error-box { background: var(--accent-tint); border: 1px solid var(--accent); color: var(--text); padding: 10px; border-radius: 6px; }

/* -------------------------------------------------------------- pick a clip */

.clip-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; }

.clip-preview { position: relative; background: #14181a; }
.clip-preview video,
.clip-preview img.clip-still {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #14181a;
}
.clip-play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  min-height: 0;
  border-radius: 50%;
  border: none;
  background: rgba(20, 24, 26, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.clip-time-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(20, 24, 26, 0.78);
}

.clip-controls { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 18px; }

.clip-timeline-block { display: flex; flex-direction: column; gap: 8px; }

.clip-timeline { position: relative; height: 64px; border-radius: 12px; background: var(--bar-track); }

.clip-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  min-height: 0;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
}
.clip-range::-webkit-slider-runnable-track { background: none; border: none; }
.clip-range::-moz-range-track { background: none; border: none; }
.clip-range::-webkit-slider-thumb {
  appearance: none;
  width: var(--clip-box-width, 60px);
  height: 64px;
  border-radius: 10px;
  background: var(--accent-tint);
  border: 3px solid var(--accent);
  box-sizing: border-box;
  cursor: grab;
}
.clip-range::-moz-range-thumb {
  width: var(--clip-box-width, 60px);
  height: 64px;
  border-radius: 10px;
  background: var(--accent-tint);
  border: 3px solid var(--accent);
  box-sizing: border-box;
  cursor: grab;
}
.clip-range:focus-visible { outline: none; }
.clip-range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.clip-range:focus-visible::-moz-range-thumb { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.clip-timeline-labels { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.clip-hint { font-size: 15px; color: var(--muted); }

.clip-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--well-bg);
}
.clip-readout-label { display: block; font-size: 14px; color: var(--muted); }
.clip-readout-value { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 24px; }
.clip-nudge-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

.clip-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.clip-actions .find-fish-btn { flex: 1 1 260px; }

.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  padding: 14px 20px;
  min-height: 52px;
  box-sizing: border-box;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
  border: 1px solid var(--field-border);
  background: var(--card);
}
.back-btn:hover { color: var(--text); border-color: var(--accent); }

.clip-footer-note { margin: 0; font-size: 15px; color: var(--muted); text-align: center; }

/* ------------------------------------------------------------- processing */

.processing-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; }

.processing-picture { position: relative; background: #14181a; aspect-ratio: 16 / 9; }
.processing-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.processing-picture svg { position: absolute; inset: 0; margin: auto; stroke: var(--muted); }

.processing-body { padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.processing-body h1 { margin: 0; font-size: 26px; }

.processing-progress { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.processing-time { font-size: 16px; color: var(--muted); }

.processing-note { margin: 0; max-width: 420px; color: var(--muted); }

.processing-failure { margin: 0; max-width: 420px; }

/* --------------------------------------------------- confirm / mystery fish */

.breadcrumb-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; }

.link-like { padding: 0; min-height: 44px; border: none; background: none; font: inherit; font-weight: 600; color: var(--text); text-decoration: underline; cursor: pointer; display: inline-flex; align-items: center; }

.fish-page { display: flex; flex-direction: column; gap: 24px; max-width: 1120px; margin: 0 auto; }
.fish-page-head { display: flex; flex-direction: column; gap: 8px; }
.fish-page-head h1 { margin: 0; font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; }
.fish-page-head p { margin: 0; font-size: 16px; color: var(--muted); }
.fish-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fish-title-row .new-badge { align-self: center; }
.fish-sci-line .num { font-family: var(--font-mono); font-size: 14px; }

.confirm-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.confirm-photo-col { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.confirm-photo-col > img.main-shot { display: block; width: 100%; height: 360px; object-fit: cover; border-radius: 16px; background: #14181a; }
.confirm-thumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.confirm-thumbs button { padding: 0; width: 84px; height: 64px; border-radius: 12px; border: 1px solid var(--card-border); overflow: hidden; background: #14181a; cursor: pointer; }
.confirm-thumbs button[aria-pressed="true"] { border: 3px solid var(--text); }
.confirm-thumbs button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.confirm-thumbs .watch-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: 4px; font-weight: 600; }
.confirm-caption { font-size: 15px; color: var(--muted); }

.confirm-info-col { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.confirm-info-card { display: flex; flex-direction: column; gap: 14px; border-radius: 16px; padding: 22px 24px; }
.confirm-info-card .fish-name { font-size: 21px; font-weight: 700; }
.confirm-info-card .fish-family { display: block; font-size: 15px; color: var(--muted); }
.confirm-info-card h3 { margin: 0 0 6px; font-size: 15px; }
.confirm-info-card p { margin: 0; font-size: 16px; line-height: 1.5; }


.confirm-actions { display: flex; flex-direction: column; gap: 10px; }
.confirm-actions button { min-height: 52px; font-size: 18px; }
.confirm-actions .ask-later { align-self: center; min-height: 44px; font-weight: 600; }
.confirm-helper { font-size: 14px; color: var(--muted); }

.joined-card { display: flex; flex-wrap: wrap; border-radius: 20px; overflow: hidden; }
.joined-photo { position: relative; flex: 1 1 380px; min-width: 0; }
.joined-photo img { display: block; width: 100%; height: 360px; object-fit: cover; background: #14181a; }
.joined-photo .badge { position: absolute; left: 14px; top: 14px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--accent-text); background: var(--accent); }
.joined-body { flex: 1 1 420px; min-width: 0; padding: 36px; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.joined-body h1 { margin: 0; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; }
.joined-progress { align-self: stretch; max-width: 420px; display: flex; flex-direction: column; gap: 8px; }
.joined-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.joined-undo, .back-btn-text { padding: 0; min-height: 44px; border: none; background: none; font: inherit; font-weight: 600; color: var(--text); text-decoration: underline; cursor: pointer; }

.fish-picker-list { display: flex; flex-direction: column; gap: 10px; }
.fish-picker-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  min-height: 64px;
  border-radius: 14px;
  border: 1px solid var(--button-border);
  background: var(--card);
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.fish-picker-row[aria-pressed="true"] { border: 2px solid var(--accent); }
.fish-picker-row img { flex: none; width: 84px; height: 64px; object-fit: cover; border-radius: 10px; background: #14181a; }
.fish-picker-row .name { display: flex; flex-direction: column; gap: 2px; }
.fish-picker-row .name .common { font-size: 17px; font-weight: 700; }
.fish-picker-row .name .family { font-size: 15px; color: var(--muted); }

.compare-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-border); }
.compare-panel img.main { display: block; width: 100%; height: 260px; object-fit: cover; border-radius: 10px; background: #14181a; }
.compare-panel .caption { font-size: 14px; color: var(--muted); }
.compare-panel .compare-thumbs { display: flex; gap: 8px; }
.compare-panel .compare-thumbs img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; background: #14181a; }

.mystery-page-shot { display: block; width: 100%; height: 440px; object-fit: cover; border-radius: 16px; background: #14181a; }
.mystery-selector { display: flex; flex-wrap: wrap; gap: 10px; }
.mystery-selector button { padding: 0; width: 72px; height: 72px; border-radius: 12px; border: 1px solid var(--card-border); overflow: hidden; background: #14181a; cursor: pointer; }
.mystery-selector button[aria-pressed="true"] { border: 3px solid var(--text); }
.mystery-selector button img { display: block; width: 100%; height: 100%; object-fit: cover; }

.mystery-search-field { display: flex; flex-direction: column; gap: 6px; }
.mystery-search-field label { font-size: 15px; font-weight: 700; }

.mystery-bottom-actions { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.mystery-bottom-actions .not-a-fish-btn { align-self: flex-start; padding: 0; min-height: 44px; border: none; background: none; font: inherit; font-weight: 600; color: var(--text); text-decoration: underline; cursor: pointer; }
.mystery-footnote { font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------- a fish */

.fish-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }

.fish-main-shot { aspect-ratio: 4 / 3; height: auto; }

.photo-switch { display: inline-flex; align-self: flex-start; border-radius: 999px; background: var(--well-bg); padding: 4px; gap: 4px; }
.photo-switch .switch-btn { border: none; background: none; padding: 8px 16px; min-height: 36px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; color: var(--text); }
.photo-switch .switch-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }

/* The main picture: arrows on hover (always on touch screens), and where
   your own shot comes from over its bottom edge. */
.fish-main-wrap { position: relative; }
.fish-main-wrap img.main-shot { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: #14181a; }
/* No reference photo and no shot of yours: the Dex's "Wanted" poster, not a black box. */
.fish-main-wrap > .main-shot.no-photo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 4 / 3;
  border-radius: 16px; text-align: center; background-color: var(--bg); color: var(--muted-light); border: 1.5px solid var(--grey-border-light);
}
.fish-main-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 99px; border: 2px solid var(--text); background: rgba(255, 255, 255, 0.92); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.fish-main-arrow.prev { left: 12px; }
.fish-main-arrow.next { right: 12px; }
.fish-main-wrap:hover .fish-main-arrow, .fish-main-arrow:focus-visible { opacity: 1; }
@media (hover: none) { .fish-main-arrow { opacity: 1; } }
/* The play button and caption come in on hover too, like the arrows (user's review, 2026-10-21); always shown on touch screens. */
.fish-main-play, .fish-main-caption { opacity: 0; transition: opacity 0.15s; }
.fish-main-wrap:hover .fish-main-play, .fish-main-wrap:hover .fish-main-caption, .fish-main-wrap:focus-within .fish-main-play, .fish-main-wrap:focus-within .fish-main-caption { opacity: 1; }
@media (hover: none) { .fish-main-play, .fish-main-caption { opacity: 1; } }
.fish-main-caption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 4px 12px; border-radius: 99px; background: rgba(20, 24, 26, 0.82); color: #fff; font-size: 14px; }
.fish-main-dive-link { color: #fff; font-weight: 600; }
/* Play, top right: clear of the fish (usually mid-crop), the caption and the arrows. */
.fish-main-chip { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; padding: 0; border: none; border-radius: 99px; background: rgba(20, 24, 26, 0.82); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fish-main-chip:hover { background: rgba(20, 24, 26, 0.95); }
/* The clip, in the picture's own 4:3 box (canvas "Fish clip player controls", artboard E): a top bar (caption, back to
   the photo), the frame letterboxed in what is left, and a bottom bar of controls, so nothing covers the fish. The SVG's
   default "meet" scaling keeps the boxes on the contained frame. */
.fish-main-playing { display: flex; flex-direction: column; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #14181a; color: #fff; }
.fish-clip-bar { flex: none; height: 48px; display: flex; align-items: center; padding: 0 12px 0 2px; }
.fish-clip-bar:first-child { justify-content: space-between; gap: 8px; padding: 0 2px 0 14px; }
.fish-clip-caption { min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Small 32 px faces so the video keeps the attention; the tap area stays 44 px. */
.fish-clip-btn { flex: none; width: 44px; height: 44px; min-height: 0; padding: 0; border: none; border-radius: 99px; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fish-clip-face { width: 32px; height: 32px; border-radius: 99px; display: flex; align-items: center; justify-content: center; }
.fish-clip-face svg { width: 16px; height: 16px; }
.fish-clip-btn:hover:not(:disabled) .fish-clip-face { background: rgba(255, 255, 255, 0.16); }
.fish-clip-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -4px; }
.fish-clip-time { flex: none; font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
/* The timeline: a native range (keyboard and drag for free) whose track carries the grey/yellow gradient fish.js sets in --stretches. */
.fish-clip-timeline { flex: 1 1 auto; min-width: 0; height: 44px; min-height: 0; margin: 0 12px 0 8px; padding: 0; border: none; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.fish-clip-timeline:disabled { cursor: default; }
.fish-clip-timeline:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.fish-clip-timeline::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--stretches, rgba(255, 255, 255, 0.28)); }
.fish-clip-timeline::-moz-range-track { height: 6px; border-radius: 99px; background: var(--stretches, rgba(255, 255, 255, 0.28)); }
.fish-clip-timeline::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -3px; border: none; border-radius: 99px; background: #fff; box-shadow: 0 0 0 2px #14181a; }
.fish-clip-timeline::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 99px; background: #fff; box-shadow: 0 0 0 2px #14181a; }
.fish-main-player { position: relative; flex: 1 1 0; min-height: 0; }
.fish-clip-poster { display: block; width: 100%; height: 100%; object-fit: contain; }
.fish-main-player .frames-view, .fish-main-player .frames-view .boxes { display: block; width: 100%; height: 100%; }
.fish-main-player .frames-view img.frame { width: 100%; height: 100%; object-fit: contain; border: none; border-radius: 0; }
.fish-main-player .frames-view svg.overlay { width: 100%; height: 100%; }
.fish-main-player-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: #fff; }
.fish-shot-row-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 32px; }
.fish-shot-row-head .cover-status, .fish-shot-row-head .cover-btn { font-size: 14px; }
.cover-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.cover-btn { padding: 0; min-height: 32px; border: none; background: none; font: inherit; font-weight: 600; color: var(--text); text-decoration: underline; cursor: pointer; }

.new-badge { align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--accent-text); background: var(--accent); }

.fish-sci-line { margin: 0; font-size: 16px; color: var(--muted); }
.fish-sci-line em { font-style: italic; }
/* The line's hover tips: the app's dark tip (as on Help name your fish). */
.fish-page-head { position: relative; }
.fish-tip { position: absolute; z-index: 20; display: flex; flex-direction: column; gap: 2px; max-width: 280px; padding: 8px 12px; border-radius: 12px; background: var(--text); color: #ffffff; font-size: 13px; line-height: 1.35; pointer-events: none; box-shadow: 0 6px 18px rgba(20, 24, 26, 0.18); }
.fish-tip[hidden] { display: none; }
.fish-tip b { font-size: 14px; }
.fish-tip span[hidden] { display: none; }

.fish-recognise h2, .fish-lookalikes h2, .fish-dives h2 { margin: 0 0 8px; font-size: 20px; }
.fish-recognise p { margin: 0; font-size: 16px; line-height: 1.5; }
.fish-lookalikes { display: flex; flex-direction: column; gap: 8px; }
/* Look-alikes: compact cards, photo the size of the reference photos. */
.lookalike-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.lookalike-card { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; border: 1.5px solid var(--grey-border); background: var(--card); color: var(--text); text-decoration: none; }
.lookalike-card:hover { color: var(--text); border-color: var(--text); }
.lookalike-card.met { border: 2.5px solid var(--text); box-shadow: 3px 3px 0 var(--text); }
.lookalike-photo { flex: none; width: 120px; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: var(--pale-blue); }
.lookalike-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lookalike-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* Reference photos and your shots on the fish page: 3:2 photos, not chips. */
.fish-thumbs button, .fish-thumbs .shot-thumb-more, .fish-thumbs .shot-thumb-empty { width: 120px; height: 80px; }
@media (max-width: 480px) { .fish-thumbs button, .fish-thumbs .shot-thumb-more, .fish-thumbs .shot-thumb-empty { width: 104px; height: 69px; } .lookalike-photo { width: 104px; } }

.fish-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stat-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; }
.stat-label { font-size: 14px; color: var(--muted); }
.stat-value { font-size: 22px; font-weight: 700; font-family: var(--font-heading); }
.stat-sub { font-size: 14px; color: var(--muted); }

.not-found-line { margin: 0; font-size: 16px; color: var(--muted); }

.fish-dives { display: flex; flex-direction: column; gap: 14px; }
.dive-accordion { display: flex; flex-direction: column; gap: 12px; }
.dive-card { border-radius: 20px; border: 1px solid var(--card-border); background: var(--card); overflow: hidden; }
.dive-card-header { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 0 20px; border: none; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--text); }
.dive-card-title { flex: 1 1 auto; font-weight: 700; font-size: 17px; }
.dive-card-sub { font-size: 14px; color: var(--muted); }
.dive-card-header .chevron { flex: none; transition: transform 0.15s ease; }
.dive-card-body { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 16px; }

.timeline-wrap { display: flex; align-items: flex-start; gap: 10px; }
.timeline { position: relative; flex: 1 1 auto; border-radius: 12px; background: var(--well-bg); }
.timeline-pill { position: absolute; height: 14px; min-width: 14px; border-radius: 999px; background: var(--accent); border: 2px solid #14181a; box-sizing: border-box; }
.timeline-overflow-btn { flex: none; align-self: flex-start; min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 1px solid var(--button-border); background: var(--card); cursor: pointer; }
.timeline-axis { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }

.sightings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sighting-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; border: 1px solid var(--card-border); }
.sighting-row img { flex: none; width: 84px; height: 64px; object-fit: cover; border-radius: 10px; background: #14181a; }
.sighting-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sighting-time { font-weight: 700; font-size: 15px; }
.sighting-duration { font-size: 13px; color: var(--muted); }
.watch-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; font-weight: 600; font-size: 14px; border: 1px solid var(--button-border); background: var(--card); cursor: pointer; }

.dive-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.show-sightings-btn, .show-all-dives-btn { align-self: flex-start; padding: 0; min-height: 36px; border: none; background: none; font: inherit; font-weight: 600; color: var(--text); text-decoration: underline; cursor: pointer; }
.open-dive-link { font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; }

.fish-page-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--card-border); }
.fish-nav-random { font-weight: 700; text-decoration: underline; border: none; background: none; }
.fish-remove-dialog { max-width: 440px; padding: 24px; border: 2.5px solid var(--text); border-radius: 22px; box-shadow: 5px 5px 0 var(--text); background: var(--card); color: var(--text); }
.fish-remove-dialog::backdrop { background: rgba(20, 24, 26, 0.45); }
.fish-remove-dialog h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; line-height: 1.2; }
.fish-remove-dialog p { margin: 0 0 18px; color: var(--muted); }
.fish-remove-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.fish-number-line { margin: 0; font-size: 15px; color: var(--muted); }
.fish-tags-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fish-state-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 1px solid var(--button-border); }
.fish-state-pill.met { color: var(--accent-text); background: var(--accent); border-color: transparent; }
.fish-state-pill.not-met { color: var(--muted); background: var(--well-bg); }

.fish-shot-row { display: flex; flex-direction: column; gap: 10px; }
.fish-shot-row-head { font-size: 17px; font-weight: 700; }
.fish-shot-note { flex: 1 1 200px; margin: 0; font-size: 15px; color: var(--muted); }
.fish-shot-row-head .count { font-size: 14px; font-weight: 400; color: var(--muted); }

.shot-thumb-wrap { position: relative; display: inline-flex; flex: none; }
.shot-thumb-star { position: absolute; top: 4px; right: 4px; font-size: 14px; line-height: 1; color: #f5c518; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); pointer-events: none; }
button.shot-thumb-more { background: var(--well-bg); border: 2px dashed var(--grey-border); font: inherit; font-weight: 700; color: var(--dark-blue); cursor: pointer; }
button.shot-thumb-more:hover { border-color: var(--text); }
.shot-thumb-more { flex: none; display: flex; align-items: center; justify-content: center; width: 84px; height: 64px; border-radius: 12px; font-weight: 700; font-size: 16px; color: var(--muted); background: var(--well-bg); }
.shot-thumb-empty { flex: none; display: flex; align-items: center; justify-content: center; text-align: center; width: 84px; height: 64px; border-radius: 12px; font-size: 13px; line-height: 1.3; color: var(--muted); border: 1px dashed var(--field-border); background: none; cursor: default; padding: 4px; }

.fish-dive-list { display: flex; flex-direction: column; gap: 10px; }
.fish-dive-row { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; border: 1px solid var(--card-border); background: var(--card); text-decoration: none; color: var(--text); }
.fish-dive-row img { flex: none; width: 72px; height: 54px; object-fit: cover; border-radius: 10px; background: var(--well-bg); }
.fish-dive-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fish-dive-row-text .title { font-weight: 700; font-size: 15px; }
.fish-dive-row-text .sub { font-size: 13px; color: var(--muted); }

.fish-not-met-box { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }

.fish-dives { flex: 1 1 360px; min-width: 0; }


.fish-nav-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--card-border); }
.fish-nav-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--button-border); background: var(--card); font-weight: 600; font-size: 15px; text-decoration: none; color: var(--text); }
.fish-nav-link .num { color: var(--muted); font-weight: 400; }
@media (max-width: 480px) { .fish-nav-footer { justify-content: center; } .fish-nav-link { max-width: 100%; } .fish-nav-random { order: 3; flex-basis: 100%; text-align: center; } }

/* Previous / next on the back link's line (the footer above stays): quiet
   text links, a grey name cut with "…". */
.fish-top-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.fish-pager { position: relative; display: flex; align-items: center; gap: 12px; margin-left: auto; min-width: 0; }
/* A thin line between the two, so they don't read as one long name. */
.fish-pager-link.prev + .fish-pager-link.next::before { content: ""; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: var(--card-border); }
.fish-pager-link.next { position: relative; }
.fish-pager-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 0; padding: 0 10px; border-radius: 999px; color: var(--muted); font-size: 15px; font-weight: 400; text-decoration: none; }
.fish-pager-link:hover, .fish-pager-link:focus-visible { background: var(--faded); color: var(--text); }
.fish-pager-link .arrow { display: inline-flex; color: var(--text); }
.fish-pager-link .name { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fish-pager-preview { position: absolute; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; gap: 2px; width: 184px; padding: 8px 8px 10px; border-radius: 14px; border: 1px solid var(--card-border); background: var(--card); box-shadow: 0 8px 24px rgba(20, 24, 26, 0.16); pointer-events: none; }
.fish-pager-preview[hidden] { display: none; }
.fish-pager-preview img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; background: var(--faded); margin-bottom: 4px; }
.fish-pager-preview img[hidden] { display: none; }
.fish-pager-preview .num { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.fish-pager-preview b { font-size: 15px; line-height: 1.25; }
.fish-pager-preview .state { color: var(--muted); font-size: 13px; }
.fish-pager-preview.met .state { color: var(--text); font-weight: 600; }
@media (max-width: 480px) { .fish-pager-link { min-width: 44px; justify-content: center; } .fish-pager-link .name { display: none; } }
/* No hover on touch screens: tapping just goes to the fish. */
@media (hover: none) { .fish-pager-preview { display: none !important; } }

/* -------------------------------------------------------------- my fish */

.my-fish-page { display: flex; flex-direction: column; gap: 36px; max-width: 1120px; margin: 0 auto; }

.my-fish-head { display: flex; flex-direction: column; gap: 8px; }
.my-fish-head h1 { margin: 0; font-size: 48px; line-height: 1.05; letter-spacing: -0.02em; }
.my-fish-head p { margin: 0; font-size: 17px; color: var(--muted); }

.area-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.area-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  min-height: 44px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid var(--button-border);
  background: var(--card);
  font: inherit;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.area-chip[aria-pressed="true"] { border: 2px solid var(--text); background: var(--text); color: var(--bg); font-weight: 700; }
.area-chip.dashed { border: 1px dashed var(--field-border); background: none; color: var(--muted); }

.area-progress { max-width: 520px; display: flex; flex-direction: column; gap: 8px; }
.area-progress-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.area-progress-row .area-name { font-weight: 700; }
.area-progress-row .count { color: var(--muted); }

.my-fish-section { display: flex; flex-direction: column; gap: 18px; }
.my-fish-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.my-fish-section-head h2 { margin: 0; font-size: 26px; letter-spacing: -0.01em; }
.my-fish-section-head a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

.still-to-find-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
.still-to-find-card {
  padding: 8px 8px 14px;
  border-radius: 14px;
  border: 1px dashed var(--field-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
}
.still-to-find-card img { display: block; width: 100%; height: 110px; object-fit: cover; border-radius: 8px; background: var(--bar-track); }
.still-to-find-card span { font-size: 15px; font-weight: 600; color: var(--muted); }

/* ------------------------------------------------------- my fish, first visit */

.hero-band { margin: -20px -20px 0; background: #14181a; color: #f5f2ec; }
.hero-band-inner { max-width: 1120px; margin: 0 auto; padding: 56px 24px 60px; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.hero-text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hero-text h1 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -0.03em; }
.hero-text p { margin: 0; font-size: 19px; line-height: 1.5; color: #a8b0b3; max-width: 460px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 4px; }
.hero-cta { display: inline-flex; align-items: center; padding: 16px 26px; min-height: 56px; box-sizing: border-box; border-radius: 12px; text-decoration: none; font-size: 19px; font-weight: 700; color: #14181a; background: #db6a50; }
.hero-cta-secondary { gap: 8px; font-family: inherit; background: var(--card); color: var(--text); border: 2px solid var(--card-border); cursor: pointer; }
.hero-sub { margin: 0; font-size: 15px; color: #a8b0b3; }
.hero-band .error-box { font-size: 15px; }
.hero-explore-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 600; color: #f5f2ec; text-decoration: none; }
.hero-explore-link:hover { color: #f5f2ec; opacity: 0.85; }

.hero-picture { flex: 1.2 1 460px; min-width: 0; position: relative; border-radius: 18px; overflow: hidden; border: 1px solid #2b3338; aspect-ratio: 16 / 9; background: #101417; }
.hero-picture img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-box { position: absolute; border-radius: 6px; box-sizing: border-box; }
.hero-box.solid { border: 2px solid #db6a50; }
.hero-box.dashed { border: 2px dashed #ffffff; }
.hero-box-label { position: absolute; transform: translateY(-100%); margin-top: -4px; padding: 4px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; color: #14181a; }
.hero-box-label.solid { background: #db6a50; }
.hero-box-label.dashed { background: #ffffff; }
.hero-new-card { position: absolute; right: 14px; top: 14px; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; background: #ffffff; color: #14181a; }
.hero-new-card img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: #14181a; }
.hero-new-card .label { display: flex; flex-direction: column; gap: 2px; }
.hero-new-card .label .tag { font-size: 13px; font-weight: 700; color: #4e575b; }
.hero-new-card .label .name { font-size: 17px; font-weight: 700; }

.first-visit-main { max-width: 1120px; margin: 0 auto; padding: 0 20px 44px; display: flex; flex-direction: column; gap: 48px; }

.stat-strip { margin-top: -28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-radius: 18px; background: var(--card); border: 1px solid var(--card-border); overflow: hidden; }
.stat-strip-item { padding: 22px 26px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--card-border); }
.stat-strip-item:first-child { border-left: none; }
.stat-strip-item .big { font-family: var(--font-heading); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.02em; }
.stat-strip-item .big.accent { color: var(--accent); }
.stat-strip-item .small { font-size: 16px; color: var(--muted); }

.first-visit-processing { display: flex; flex-direction: column; gap: 8px; border-radius: 16px; padding: 20px 24px; }

.section-head-lg { display: flex; flex-direction: column; gap: 6px; }
.section-head-lg h2 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; }
.section-head-lg p { margin: 0; font-size: 17px; color: var(--muted); }

.waiting-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.waiting-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.waiting-card img { display: block; width: 100%; height: 170px; object-fit: cover; background: var(--bar-track); }
.waiting-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.waiting-card-body .name { font-size: 17px; font-weight: 700; }
.waiting-card-body .sub { font-size: 14px; color: var(--muted); }
.waiting-empty-slot {
  min-height: 200px;
  padding: 18px 14px;
  box-sizing: border-box;
  border-radius: 16px;
  border: 2px dashed var(--field-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
}
.waiting-empty-slot .title { font-size: 17px; font-weight: 700; }
.waiting-empty-slot .link { font-size: 14px; font-weight: 600; text-decoration: underline; }

.area-pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.area-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 18px;
  min-height: 48px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid var(--button-border);
  background: var(--card);
  text-decoration: none;
  color: var(--text);
}
.area-pill .name { font-size: 17px; font-weight: 700; }
.area-pill .count { font-size: 15px; color: var(--muted); }
.area-pill.dashed { border: 1px dashed var(--field-border); color: var(--muted); font-weight: 600; font-size: 17px; }
.area-pill.dived { border-color: var(--accent); background: var(--well-bg); }
/* The "+N" / "Show less" chip after two rows of areas (fish page). */
.area-pill[hidden] { display: none; }
.area-pill-more { font: inherit; cursor: pointer; border: 2px dashed var(--grey-border); color: var(--dark-blue); }
.area-pill-more:hover { border-color: var(--text); }

/* --------------------------------------------------------------- explore page */

.explore-page { display: flex; flex-direction: column; gap: 28px; max-width: 1120px; }
.back-btn-text { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.explore-head { display: flex; flex-direction: column; gap: 8px; }
.explore-head h1 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; }
.explore-head p { margin: 0; font-size: 17px; color: var(--muted); }

.field-group { max-width: 520px; display: flex; flex-direction: column; gap: 6px; }
.field-group label { font-size: 15px; font-weight: 700; }
.field-group input { min-height: 48px; }

.my-fish-section h2 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 26px; letter-spacing: -0.01em; }
.my-fish-section-see-all { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.area-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.area-card {
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}
.area-card-name { font-size: 21px; font-weight: 700; }
.area-card-sub { font-size: 15px; color: var(--muted); }

.area-pill-row-list { display: flex; flex-direction: column; gap: 10px; }
.area-pill-row-item {
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-decoration: none;
  color: var(--text);
}
.area-pill-row-text { display: flex; flex-direction: column; gap: 4px; }
.area-pill-row-text .name { font-size: 21px; font-weight: 700; }
.area-pill-row-text .sub { font-size: 15px; color: var(--muted); }

/* ------------------------------------------------- my fish, exploring an area */

.not-dived-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
}
.not-dived-card-text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.not-dived-card-text .title { font-size: 18px; font-weight: 700; }
.not-dived-card-text .sub { font-size: 15px; color: var(--muted); }
.not-dived-card .hero-cta { font-size: inherit; }

/* Pages not yet rebuilt on .wrap (A dive, A fish, Help name your fish) had
   their padding from the old `main { padding: 20px }`. */
.fish-page { padding: 32px 24px 72px; }
@media (max-width: 480px) { .fish-page { padding: 24px 16px 56px; } }