:root {
  --paper: #f2efe7;
  --white: #fcfbf7;
  --ink: #10211f;
  --muted: #66726e;
  --line: rgba(16, 33, 31, 0.14);
  --sea: #103c38;
  --deep-sea: #071d1b;
  --aqua: #65d4bf;
  --coral: #e96f57;
  --sun: #efd88b;
  --danger: #a63d2f;
  --serif: "Iowan Old Style", Baskerville, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 28px 80px rgba(16, 33, 31, 0.14);
  --content: 1240px;
  --dock-space: calc(92px + env(safe-area-inset-bottom));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.exhibiting { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { color: inherit; }
button { touch-action: manipulation; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { overflow-wrap: anywhere; }
.hidden { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #147d70;
  outline-offset: 3px;
}
:where(.select-panel, .atlas-panel, .exhibit, .lead, .workflow) :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--sun);
}

.primary, .ghost, .text-button, .danger-button, .dock button, .filter-chips button {
  min-height: 44px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
}
.primary, .ghost, .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 18px;
  text-align: center;
  text-decoration: none;
}
.primary { background: var(--ink); color: #fff; }
.primary:hover { background: #25433f; }
.primary.large { min-height: 50px; padding-inline: 22px; }
.primary:disabled { cursor: not-allowed; opacity: 0.5; }
.ghost { border: 1px solid var(--line); background: transparent; }
.ghost:hover { background: rgba(16, 33, 31, 0.06); }
.ghost.compact { padding-inline: 14px; }
.ghost.light { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.text-button {
  display: inline-flex;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px 3px;
  background: transparent;
}
.text-button span { margin-left: 7px; }
.danger-text { color: var(--danger); }
.danger-button { background: var(--danger); color: #fff; }

.eyebrow {
  color: var(--coral);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.view-panel { min-height: calc(100svh - 92px); padding-bottom: var(--dock-space); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  min-height: calc(76px + env(safe-area-inset-top));
  padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
  background: rgba(242, 239, 231, 0.9);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}
.wordmark {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  width: max-content;
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-decoration: none;
}
.privacy-pill {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}
.privacy-pill i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #439b76;
  box-shadow: 0 0 0 4px rgba(67, 155, 118, 0.13);
}
.top-actions { display: flex; justify-self: end; }
.top-actions .primary { white-space: nowrap; }
.storage-alert {
  position: sticky;
  top: calc(76px + env(safe-area-inset-top));
  z-index: 39;
  display: none;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(166, 61, 47, 0.22);
  background: #f8e8e3;
}
.storage-alert:has(button:not(.hidden)) { display: block; }
.storage-recovery {
  width: min(100%, var(--content));
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-panel {
  display: grid;
  align-items: center;
  gap: 30px;
  padding: clamp(42px, 11vw, 72px) 18px var(--dock-space);
}
.hero-copy { position: relative; z-index: 2; min-width: 0; }
.hero-copy h1 {
  max-width: 760px;
  margin: 17px 0 24px;
  font: 500 clamp(54px, 17vw, 88px) / 0.88 var(--serif);
  letter-spacing: -0.07em;
}
.hero-copy > p {
  max-width: 600px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(17px, 4.8vw, 21px);
  line-height: 1.55;
}
.hero-actions { display: grid; gap: 8px; margin: 30px 0 38px; }
.hero-actions > * { width: 100%; }
.hero-metrics, .passport-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.hero-metrics div, .passport-metrics div {
  min-width: 0;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.hero-metrics dt, .passport-metrics dt {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  text-transform: uppercase;
}
.hero-metrics dd, .passport-metrics dd {
  margin: 5px 0 0;
  font: 500 32px var(--serif);
}
.recent-outing {
  max-width: 600px;
  margin-top: 28px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(252, 251, 247, 0.66);
}
.collage { position: relative; min-height: 330px; display: grid; place-items: center; }
.art-halo {
  position: absolute;
  width: min(92vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #e7e4d8 48%, transparent 70%);
}
.collage > img {
  position: relative;
  width: min(115%, 650px);
  height: 350px;
  object-fit: contain;
  filter: drop-shadow(0 30px 26px rgba(28, 48, 45, 0.1));
  animation: drift 8s ease-in-out infinite;
}
.plate-note {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 180px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  background: rgba(252, 251, 247, 0.84);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.plate-note span { color: var(--coral); font-size: 8px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.plate-note strong { display: block; margin-top: 7px; font: 500 18px/1.08 var(--serif); }
@keyframes drift { 50% { transform: translateY(-10px) rotate(0.35deg); } }

.journal-panel, .passport-panel, .trip-panel { padding: 48px 16px var(--dock-space); background: var(--white); }
.panel-header {
  width: min(100%, var(--content));
  margin: 0 auto 32px;
  display: grid;
  gap: 20px;
}
.panel-header h2, .passport-header h2, .trip-detail-header h2, .workflow > h2, .lead h2, .faq > h2 {
  margin: 10px 0 0;
  font: 500 clamp(43px, 13vw, 76px) / 0.92 var(--serif);
  letter-spacing: -0.06em;
}
.panel-header p { max-width: 550px; margin: 0; color: var(--muted); line-height: 1.6; }
.panel-header > .primary { justify-self: start; }
.journal-layout {
  width: min(100%, var(--content));
  margin: 0 auto;
  display: grid;
  gap: 24px;
}
.trip-entry {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.trip-entry label, .lead label, .search-field, .sort-field {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}
.trip-entry label > b { color: var(--coral); }
.trip-entry em, .lead em { float: right; color: var(--muted); font-weight: 400; }
.trip-entry input:not([type="radio"]), .trip-entry select, .trip-entry textarea,
.lead input:not([type="checkbox"]), .lead select, .lead textarea,
.search-field input, .sort-field select {
  width: 100%;
  min-height: 48px;
  margin-top: 7px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #aeb7b3;
  border-radius: 0;
  outline-offset: 2px;
  background: transparent;
  color: inherit;
}
.trip-entry textarea, .lead textarea { min-height: 104px; resize: vertical; }
.wide { grid-column: 1 / -1; }
.form-intro { padding-bottom: 3px; }
.form-intro h3 { margin: 8px 0 5px; font: 500 36px var(--serif); letter-spacing: -0.04em; }
.form-intro p { margin: 0; color: var(--muted); line-height: 1.5; }
.activity-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.activity-field legend { margin-bottom: 8px; font-size: 12px; font-weight: 700; }
.activity-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.activity-options label { position: relative; }
.activity-options input { position: absolute; opacity: 0; }
.activity-options span {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}
.activity-options input:checked + span { border-color: var(--sea); background: var(--sea); color: #fff; }
.activity-options input:focus-visible + span { outline: 3px solid #147d70; outline-offset: 3px; }
.outing-more { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.outing-more summary { min-height: 50px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.details-grid { display: grid; gap: 20px; padding: 10px 0 22px; }
.form-error { min-height: 1.3em; margin: 0; color: var(--danger); font-size: 13px; }
.trip-form-actions { display: grid; gap: 8px; }
.trip-ledger { min-width: 0; min-height: 420px; padding: 20px; border-radius: 24px; background: var(--paper); }
.ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.ledger-head h3 { margin: 5px 0 0; font: 500 26px var(--serif); }
.trip-card { position: relative; padding: 8px 0; border-bottom: 1px solid var(--line); }
.trip-select {
  width: 100%;
  min-height: 96px;
  padding: 15px 55px 15px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.trip-card.active .trip-select { background: #fff; box-shadow: 0 9px 25px rgba(16, 33, 31, 0.07); }
.trip-select > span { color: var(--coral); font-size: 9px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.trip-select h3 { margin: 5px 0; font: 500 21px var(--serif); }
.trip-select p { margin: 0 0 7px; color: var(--muted); font-size: 12px; }
.trip-select strong { font-size: 10px; text-transform: uppercase; }
.trip-edit, .trip-more { position: absolute; top: 23px; right: 5px; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.unfiled-card { margin: 16px 0 8px; padding: 18px; border: 1px solid rgba(233, 111, 87, 0.3); border-radius: 16px; background: rgba(252, 251, 247, 0.72); }
.unfiled-card h4 { margin: 8px 0; font: 500 23px var(--serif); }
.unfiled-card p { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.journal-empty { padding: 56px 10px 20px; color: var(--muted); }
.journal-empty > div { color: #ced2cc; font: 500 72px var(--serif); }
.journal-empty strong { display: block; margin-bottom: 8px; color: var(--ink); font: 500 25px var(--serif); }
.journal-empty p { line-height: 1.6; }

.select-panel { padding: 0 14px calc(132px + env(safe-area-inset-bottom)); background: var(--sea); color: #fff; }
.select-header {
  position: sticky;
  top: calc(76px + env(safe-area-inset-top));
  z-index: 25;
  margin-inline: -14px;
  padding: 12px 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(16, 60, 56, 0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.select-header .ghost { border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.select-title { margin-top: 18px; }
.select-title h2 { margin: 7px 0 3px; font: 500 clamp(42px, 12vw, 66px)/0.94 var(--serif); letter-spacing: -0.055em; }
.select-title p { margin: 0; color: #bfd0cc; }
.species-tools { display: grid; gap: 12px; margin-top: 20px; }
.select-panel .search-field { color: #fff; }
.select-panel .search-field input { padding-inline: 13px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 14px; background: rgba(255, 255, 255, 0.07); color: #fff; }
.select-panel .search-field input::placeholder { color: #aec5c0; }
.filter-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 5px; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chips button { flex: 0 0 auto; padding: 8px 15px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: transparent; color: #fff; }
.filter-chips button[aria-pressed="true"] { border-color: var(--aqua); background: var(--aqua); color: var(--ink); }
.catalog-note { margin: 20px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.select-panel > .catalog-note { color: #b8cdc8; }
.species-grid, .passport-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.species-card {
  position: relative;
  min-width: 0;
  min-height: 252px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
}
button.species-card { display: flex; width: 100%; flex-direction: column; text-align: left; cursor: pointer; }
.species-card[data-status="seen"], .species-card.seen { background: #f7f3e9; color: var(--ink); }
.species-card[data-status="maybe"], .species-card.maybe { background: #2a5751; color: #fff; }
.species-toggle {
  width: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.species-more {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(7, 29, 27, 0.7);
  color: #fff;
  cursor: pointer;
}
.species-card[data-status="seen"] .species-more { background: rgba(16, 33, 31, 0.82); }
.fish-photo { height: 112px; margin-bottom: 15px; overflow: hidden; border-radius: 12px; background: #0a2926; }
.fish-photo img { width: 100%; height: 100%; object-fit: cover; }
.fish { position: relative; display: block; width: 74px; height: 41px; margin: 46px auto 48px; border-radius: 55%; background: linear-gradient(135deg, var(--a), var(--b)); }
.fish::after { content: ""; position: absolute; top: 7px; right: -21px; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 23px solid var(--b); }
.species-card h3 { margin: 7px 0 3px; font: 500 clamp(18px, 5.4vw, 23px)/1 var(--serif); }
.species-card > i, .species-toggle > i { color: var(--aqua); font: italic 12px var(--serif); }
.species-card.seen > i, .species-card[data-status="seen"] i { color: #467b72; }
.species-card p { margin: 8px 0; font-size: 11px; line-height: 1.4; opacity: 0.78; }
.status-copy, .species-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.selection-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 38;
  display: grid;
  gap: 7px;
  padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(7, 29, 27, 0.96);
}
.selection-bar p { margin: 0; color: #b8cdc8; font-size: 11px; text-align: center; }
.selection-bar .primary { background: var(--aqua); color: var(--ink); }
body[data-viewer="select"] .dock { display: none; }

.passport-panel { background: linear-gradient(180deg, #f5f1e6 0, var(--white) 300px); }
.passport-header, .passport-tools, .result-status, .passport-panel > .passport-grid, .passport-panel > .catalog-note, .maybe-collection, .passport-empty {
  width: min(100%, var(--content));
  margin-inline: auto;
}
.passport-header > p { max-width: 560px; color: var(--muted); line-height: 1.6; }
.passport-metrics { margin-top: 30px; }
.passport-tools { display: grid; gap: 14px; margin-top: 35px; }
.passport-tools .search-field input, .passport-tools .sort-field select { padding-inline: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.result-status { min-height: 22px; margin-top: 12px; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.passport-grid { margin-top: 18px; }
.passport-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 13px 32px rgba(16, 33, 31, 0.06);
}
.passport-card button { width: 100%; min-height: 100%; padding: 12px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.passport-card img, .passport-art { width: 100%; height: 130px; object-fit: cover; border-radius: 12px; background: var(--sea); }
.passport-card h3 { margin: 14px 0 3px; font: 500 21px/1 var(--serif); }
.passport-card i { color: var(--muted); font: italic 12px var(--serif); }
.passport-card p { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.passport-stamp { display: inline-flex; min-height: 24px; align-items: center; margin-top: 10px; color: #176f63; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.passport-empty { padding: 54px 15px; text-align: center; }
.passport-empty h3 { margin: 14px 0 7px; font: 500 30px var(--serif); }
.passport-empty p { max-width: 430px; margin: 0 auto 20px; color: var(--muted); line-height: 1.55; }
.stamp-outline { display: grid; width: 78px; height: 78px; margin: auto; place-items: center; border: 2px dashed #9fb0aa; border-radius: 50%; color: #6e847e; font: 500 22px var(--serif); transform: rotate(-7deg); }
.maybe-collection { margin-top: 55px; padding-top: 35px; border-top: 1px solid var(--line); }
.maybe-collection h3, .trip-maybe-section h3, .outing-life h3, .trip-notes h3 { margin: 8px 0; font: 500 34px var(--serif); }
.maybe-collection p, .trip-maybe-section > p { color: var(--muted); }

.trip-panel { width: 100%; }
.trip-panel > * { width: min(100%, var(--content)); margin-inline: auto; }
.back-button { margin-bottom: 24px; }
.trip-detail-header { display: grid; gap: 24px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.trip-date, .trip-place { color: var(--muted); }
.trip-detail-header h2 { margin-top: 7px; }
.trip-detail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: end; }
.trip-detail-actions .primary, .trip-detail-actions .ghost { grid-column: span 2; }
.trip-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.trip-facts div { min-width: 110px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; }
.trip-facts dt { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.trip-facts dd { margin: 5px 0 0; font: 500 17px var(--serif); }
.trip-notes, .outing-life, .trip-maybe-section, .media-future { margin-top: 42px; }
.trip-notes > p { max-width: 720px; color: var(--muted); line-height: 1.7; white-space: pre-wrap; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.outing-empty { padding: 40px 0; }
.outing-empty h4 { margin: 0 0 8px; font: 500 29px var(--serif); }
.outing-empty p { color: var(--muted); }
.media-future { padding: 26px; border: 1px dashed #9baba5; border-radius: 22px; background: #f2efe7; }
.media-future h3 { margin: 10px 0; font: 500 31px var(--serif); }
.media-future p { max-width: 720px; margin-bottom: 0; color: var(--muted); line-height: 1.65; }

.recommendations, .workflow, .lead, .faq { padding: 58px 16px calc(70px + env(safe-area-inset-bottom)); }
.recommendations, .faq { background: var(--white); }
.pick-grid { display: grid; gap: 12px; width: min(100%, var(--content)); margin: auto; }
.pick-card { min-height: 270px; display: flex; flex-direction: column; padding: 25px; border: 1px solid var(--line); border-radius: 21px; }
.pick-card > span { color: var(--coral); font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.pick-card h3 { margin: 40px 0 10px; font: 500 31px var(--serif); }
.pick-card p { color: var(--muted); line-height: 1.55; }
.pick-card a { min-height: 44px; display: inline-flex; align-items: center; margin-top: auto; font-weight: 700; text-decoration: none; }
.compare-wrap { width: min(100%, var(--content)); margin: 40px auto 0; overflow-x: auto; border-radius: 14px; }
table { width: 100%; min-width: 680px; border-collapse: collapse; }
th, td { padding: 17px; border-bottom: 1px solid var(--line); text-align: left; }
th { font-size: 10px; text-transform: uppercase; }
.disclosure { width: min(100%, var(--content)); margin: 16px auto 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.workflow { background: var(--coral); color: #fff; }
.workflow > h2, .workflow ol { width: min(100%, var(--content)); margin-inline: auto; }
.workflow ol { display: grid; margin-top: 45px; padding: 0; list-style: none; }
.workflow li { min-height: 220px; padding: 25px 0; border-top: 1px solid rgba(255, 255, 255, 0.35); }
.workflow li b { font: 500 46px var(--serif); }
.workflow h3 { margin: 40px 0 8px; font: 500 25px var(--serif); }
.lead { display: grid; gap: 34px; background: var(--sea); color: #fff; }
.lead > div, .lead > form { width: min(100%, 620px); }
.lead > div p { color: #b9cdc8; line-height: 1.6; }
.lead form { display: grid; gap: 20px; }
.lead label { color: #fff; }
.lead input:not([type="checkbox"]), .lead select, .lead textarea { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.lead select option { color: var(--ink); }
.consent { min-height: 44px; display: flex; align-items: center; gap: 10px; }
.consent input { width: 22px; height: 22px; }
.faq > * { width: min(100%, var(--content)); margin-inline: auto; }
.faq details { padding: 20px 0; border-top: 1px solid var(--line); }
.faq summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 500 21px var(--serif); }
.faq details p { color: var(--muted); line-height: 1.6; }
.sources { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.sources a { min-height: 44px; display: inline-flex; align-items: center; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; text-decoration: none; }

.dock {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left));
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  max-width: 540px;
  margin: auto;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 22px;
  background: rgba(252, 251, 247, 0.9);
  box-shadow: 0 12px 40px rgba(16, 33, 31, 0.16);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.dock button { min-width: 0; min-height: 52px; display: grid; place-items: center; gap: 1px; padding: 5px 2px; border-radius: 17px; background: transparent; color: var(--muted); font-size: 10px; }
.dock button span { font-size: 14px; line-height: 1; }
.dock button.active, .dock button[aria-current="page"] { background: var(--ink); color: #fff; }
footer { padding: 45px 16px calc(104px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 9px; letter-spacing: 0.13em; text-align: center; text-transform: uppercase; }

.dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  align-items: end;
  padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  overflow-y: auto;
  background: rgba(4, 20, 18, 0.7);
}
.dialog-card {
  position: relative;
  width: min(100%, 620px);
  max-height: calc(100svh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin-inline: auto;
  padding: 30px 20px 24px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 26px 26px 16px 16px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.dialog-handle { position: absolute; top: 9px; left: 50%; width: 42px; height: 4px; border-radius: 99px; background: #c5ccc8; transform: translateX(-50%); }
.dialog-card h2 { margin: 9px 0 12px; font: 500 clamp(38px, 11vw, 56px)/0.95 var(--serif); letter-spacing: -0.05em; }
.dialog-close { position: sticky; top: 0; z-index: 2; float: right; background: var(--white); }
.species-dialog { width: min(100%, 980px); padding-top: 20px; }
.species-detail-art { min-height: 240px; display: grid; place-items: center; margin: 55px -10px 25px; overflow: hidden; border-radius: 20px; background: radial-gradient(circle, #28665f, var(--deep-sea)); }
.species-detail-art img { width: 100%; max-height: 390px; object-fit: contain; }
.species-detail-copy > i { color: var(--muted); font: italic 17px var(--serif); }
.field-mark { padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.65; }
.encounter-summary { display: grid; gap: 10px; margin: 22px 0 32px; }
.encounter-summary div { padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.encounter-summary dt { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.encounter-summary dd { margin: 5px 0 0; }
.species-detail-copy section h3 { margin: 28px 0 10px; font: 500 28px var(--serif); }
.history-list { display: grid; gap: 8px; }
.history-row, .history-list > button { min-height: 64px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: transparent; text-align: left; }
.maybe-history { padding-top: 8px; }
.maybe-history > p { color: var(--muted); font-size: 12px; }
.sheet-actions { display: grid; gap: 8px; margin-top: 22px; }
.action-sheet .sheet-actions button, .completion-card .sheet-actions button, .share-dialog .sheet-actions button { width: 100%; }
.completion-card { text-align: center; }
.completion-stamp { display: grid; width: 70px; height: 70px; margin: 0 auto 18px; place-items: center; border-radius: 50%; background: var(--aqua); font-size: 30px; }
.confirm-card p, .privacy-note { color: var(--muted); line-height: 1.6; }
.dialog-actions { display: grid; gap: 8px; margin-top: 24px; }
.share-preview { min-height: 260px; display: flex; flex-direction: column; margin-top: 20px; padding: 24px; border-radius: 20px; background: var(--sea); color: #fff; }
.share-preview > span { color: var(--aqua); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.share-preview h3 { margin: auto 0 9px; font: 500 36px/0.95 var(--serif); }
.share-preview p { color: #c2d5d1; line-height: 1.5; }
.share-preview small { margin-top: auto; }
#share-status { min-height: 20px; color: var(--muted); font-size: 12px; }
.share-canvas { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); pointer-events: none; }
body[data-share-support="fallback"] #share-native { display: none; }

.exhibit {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  background: var(--deep-sea);
  color: #fff;
}
.exhibit-chrome { display: grid; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.exhibit-chrome > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.exhibit-chrome button, .exhibit-prev, .exhibit-next { min-width: 44px; min-height: 44px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: #fff; cursor: pointer; }
.specimen-stage { position: relative; min-height: 0; display: grid; overflow: hidden; }
.specimen-art { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0.32; background: radial-gradient(circle, #1c534d, var(--deep-sea) 68%); }
.specimen-art img { width: 82%; height: 74%; object-fit: contain; filter: drop-shadow(0 35px 44px rgba(0, 0, 0, 0.35)); }
.specimen-card { position: relative; align-self: end; max-height: 72svh; margin: 44px 16px 18px; padding: 23px; overflow-y: auto; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 24px; background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.specimen-card > span { color: var(--aqua); font-size: 9px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.specimen-card h2 { margin: 13px 0 5px; font: 500 clamp(42px, 14vw, 78px)/0.87 var(--serif); letter-spacing: -0.06em; }
.specimen-card > i { color: #b7cfca; font: italic 17px var(--serif); }
.specimen-card > p { line-height: 1.6; }
.specimen-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 21px; padding-top: 17px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.specimen-card dt { color: var(--aqua); font-size: 8px; text-transform: uppercase; }
.specimen-card dd { margin: 5px 0 0; font-size: 11px; }
.specimen-number { position: absolute; top: 16px; left: 16px; z-index: 3; font-size: 10px; }
.exhibit-prev, .exhibit-next { position: absolute; z-index: 5; top: 50%; width: 46px; height: 46px; }
.exhibit-prev { left: 5px; }
.exhibit-next { right: 5px; }
.exhibit-progress { display: flex; min-height: calc(35px + env(safe-area-inset-bottom)); justify-content: center; gap: 5px; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); overflow-x: auto; }
.exhibit-progress button { flex: 0 1 35px; min-width: 12px; height: 4px; padding: 0; border: 0; background: rgba(255, 255, 255, 0.22); }
.exhibit-progress button.active { background: var(--coral); }
.story-closing-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

@media (min-width: 600px) {
  .topbar { grid-template-columns: 1fr auto 1fr; padding-inline: clamp(20px, 5vw, 72px); }
  .privacy-pill { grid-column: auto; justify-self: center; }
  .hero-actions { display: flex; align-items: center; }
  .hero-actions > * { width: auto; }
  .panel-header { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .trip-entry, .details-grid, .lead form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trip-form-actions { display: flex; }
  .species-grid, .passport-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fish-photo { height: 145px; }
  .passport-tools { grid-template-columns: minmax(0, 1fr) minmax(190px, 0.35fr); align-items: end; }
  .trip-detail-actions { grid-template-columns: repeat(3, auto); justify-content: start; }
  .trip-detail-actions .primary, .trip-detail-actions .ghost { grid-column: auto; }
  .encounter-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workflow ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workflow li { padding: 25px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.35); }
  .workflow li:first-child { border-left: 0; }
  .lead { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .dialog-layer { align-items: center; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
  .sheet-layer { align-items: end; }
  .dialog-card { border-radius: 27px; padding: 34px; }
  .dialog-actions { grid-template-columns: auto auto; justify-content: end; }
  .exhibit-chrome { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-inline: 20px; }
}

@media (min-width: 900px) {
  .home-panel { min-height: calc(100svh - 76px); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); padding: clamp(60px, 7vw, 100px) clamp(28px, 5vw, 72px) var(--dock-space); }
  .hero-copy h1 { font-size: clamp(72px, 7vw, 112px); }
  .collage { min-height: 610px; }
  .collage > img { width: min(52vw, 750px); height: 610px; }
  .plate-note { right: 2%; bottom: 8%; max-width: 220px; padding: 21px; }
  .plate-note strong { font-size: 24px; }
  .journal-panel, .passport-panel, .trip-panel { padding: 75px clamp(28px, 6vw, 90px) var(--dock-space); }
  .journal-layout { grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr); gap: 55px; }
  .trip-ledger { padding: 27px; }
  .select-panel { padding-inline: clamp(28px, 6vw, 90px); }
  .select-header { top: calc(76px + env(safe-area-inset-top)); margin-inline: clamp(-90px, -6vw, -28px); padding-inline: clamp(28px, 6vw, 90px); }
  .select-header { display: grid; grid-template-columns: auto minmax(300px, 0.8fr) minmax(420px, 1fr); align-items: end; gap: 28px; }
  .select-title, .species-tools { margin-top: 0; }
  .species-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .species-card { min-height: 335px; padding: 14px; }
  .fish-photo { height: 155px; }
  .species-card h3 { font-size: 23px; }
  .selection-bar { left: 50%; right: auto; width: min(720px, calc(100% - 32px)); transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 0; border-radius: 22px 22px 0 0; }
  .passport-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .passport-card img, .passport-art { height: 170px; }
  .trip-detail-header { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .trip-detail-actions { justify-content: end; }
  .species-dialog { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 34px; }
  .species-detail-art { position: sticky; top: 35px; min-height: 540px; margin: 45px 0 0; align-self: start; }
  .species-detail-copy { padding-top: 55px; }
  .sheet-layer { align-items: center; }
  .specimen-stage { grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr); }
  .specimen-art { position: relative; opacity: 1; }
  .specimen-card { align-self: center; margin: 36px; padding: 42px; }
  .specimen-card dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .exhibit-prev { left: 16px; }
  .exhibit-next { right: 16px; }
}

@media (max-width: 359px) {
  .topbar { padding-inline: 12px; }
  .wordmark { font-size: 18px; }
  .top-actions .primary { padding-inline: 13px; font-size: 12px; }
  .home-panel { padding-inline: 14px; }
  .hero-copy h1 { font-size: 50px; }
  .hero-metrics dt, .passport-metrics dt { font-size: 8px; }
  .dock { right: 6px; left: 6px; }
  .dock button { font-size: 9px; }
  .species-grid, .passport-grid { gap: 7px; }
  .species-card { min-height: 238px; padding: 8px; }
  .fish-photo { height: 100px; }
  .species-card h3 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .collage > img { animation: none; }
}