/* Layout: field-station logbook — sticky header, specimen-label cards on a cool tidal grey, detail as photo + label sheet */
:root {
  --bg: #eef2f3;
  --surface: #ffffff;
  --sunk: #e3e9eb;
  --ink: #13232c;
  --muted: #586973;
  --line: #d2dbdf;
  --accent: #155a7c;
  --accent-soft: #dceaf1;
  --on-accent: #ffffff;
  --good: #246a40;
  --good-soft: #dff0e5;
  --warn: #a8661a;
  --warn-soft: #f6ead8;
  --neutral: #6f7d84;
  --neutral-soft: #e6eaec;
  --danger: #b33a32;
  --font-display: "Noto Serif SC", "Songti SC", "STSong", serif;
  --font-sci: "Source Serif 4", "Times New Roman", serif;
  --font-body: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius: 6px;
  --abyss: #0a2535;
  --abyss-2: #10405a;
  --on-abyss: #f1f7f9;
  --on-abyss-muted: #a9c3cf;
  --tide: #5cc4d6;
  --g-biv: #a8522f; --g-gas: #7f4f97; --g-cep: #a23d64; --g-cru: #8a6114; --g-ech: #55691a; --g-fish: #1d6690; --g-alg: #266c4c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d161b; --surface: #142128; --sunk: #0f1b21; --ink: #e2ebee; --muted: #93a5ae; --line: #253740;
    --accent: #6db3d6; --accent-soft: #17323f; --on-accent: #08161d;
    --good: #6cc492; --good-soft: #15302a; --warn: #e2ad5f; --warn-soft: #33281a;
    --neutral: #9aa8ae; --neutral-soft: #1d2a31; --danger: #e8776f;
    --abyss: #06161f; --abyss-2: #0c3044; --on-abyss: #e9f2f5; --on-abyss-muted: #93b2bf; --tide: #6fd0e0;
    --g-biv: #ec8d66; --g-gas: #be92d6; --g-cep: #e283aa; --g-cru: #e3b55a; --g-ech: #a9c45d; --g-fish: #6db6dc; --g-alg: #6cc697;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d161b; --surface: #142128; --sunk: #0f1b21; --ink: #e2ebee; --muted: #93a5ae; --line: #253740;
  --accent: #6db3d6; --accent-soft: #17323f; --on-accent: #08161d;
  --good: #6cc492; --good-soft: #15302a; --warn: #e2ad5f; --warn-soft: #33281a;
  --neutral: #9aa8ae; --neutral-soft: #1d2a31; --danger: #e8776f;
  --abyss: #06161f; --abyss-2: #0c3044; --on-abyss: #e9f2f5; --on-abyss-muted: #93b2bf; --tide: #6fd0e0;
  --g-biv: #ec8d66; --g-gas: #be92d6; --g-cep: #e283aa; --g-cru: #e3b55a; --g-ech: #a9c45d; --g-fish: #6db6dc; --g-alg: #6cc697;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--abyss); }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sci { font-family: var(--font-sci); font-style: italic; }
.mono { font-family: var(--font-mono); font-size: 0.86em; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--abyss); border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.top .wrap { display: flex; align-items: center; gap: 24px; padding-block: 10px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-abyss); }
.brand svg { width: 26px; height: 26px; color: var(--tide); }
.brand b { font-family: var(--font-display); font-size: 24px; letter-spacing: 0.08em; }
.brand span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--on-abyss-muted); text-transform: uppercase; }
nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
@media (max-width: 960px) { .brand { flex: 1; min-width: 0; } nav { order: 3; width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } nav::-webkit-scrollbar { display: none; } nav a { white-space: nowrap; flex: none; } }
nav a { text-decoration: none; color: var(--on-abyss-muted); padding: 6px 12px; border-radius: 999px; font-size: 14px; }
nav a:hover { color: var(--on-abyss); background: rgb(255 255 255 / 0.08); }
nav a[aria-current="page"] { color: var(--on-abyss); background: rgb(255 255 255 / 0.12); font-weight: 600; }
nav a.cta { background: var(--tide); color: var(--abyss); font-weight: 600; }
nav a.cta:hover { background: var(--tide); filter: brightness(1.08); color: var(--abyss); }

main { padding-block: 24px 64px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
h1 { font-family: var(--font-display); font-size: 26px; letter-spacing: 0.02em; }
h2 { font-family: var(--font-display); font-size: 19px; }
h3 { font-size: 15px; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.notice { margin-bottom: 16px; background: var(--warn-soft); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; }
.notice.info { background: var(--accent-soft); }

/* Buttons and chips */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); padding: 7px 14px; border-radius: var(--radius); cursor: pointer; font-size: 14px; text-decoration: none; color: var(--ink); }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.sm { padding: 4px 10px; font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--surface); padding: 4px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.research { color: var(--good); background: var(--good-soft); }
.pill.verified { color: var(--accent); background: var(--accent-soft); }
.pill.needs { color: var(--warn); background: var(--warn-soft); }
.pill.casual { color: var(--neutral); background: var(--neutral-soft); }
.rank { font-family: var(--font-mono); font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }

/* Explore */
.explore-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 32px; justify-content: space-between; }
.stats { display: flex; gap: 28px; flex-wrap: wrap; }
.stat b { display: block; font-family: var(--font-mono); font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat span { font-size: 12px; color: var(--muted); }
.filters { display: grid; gap: 10px; margin-block: 20px; }
.filters .row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.filters .lab { font-size: 12px; color: var(--muted); min-width: 3em; }
.search { flex: 1 1 220px; max-width: 320px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 7px 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.label-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.label-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.label-card .ph { aspect-ratio: 4 / 3; max-width: 100%; background: var(--sunk); overflow: hidden; }
.label-card .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.label-card .body { padding: 10px 12px 12px; display: grid; gap: 4px; border-top: 1px dashed var(--line); }
.label-card .name { font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.label-card .meta { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.label-card .meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { border: 1px dashed var(--line); border-radius: var(--radius); padding: 40px 20px; text-align: center; display: grid; gap: 12px; justify-items: center; background: var(--surface); }
.empty p { margin: 0; max-width: 40em; color: var(--muted); }

/* Detail */
.back { font-size: 14px; text-decoration: none; color: var(--muted); }
.detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; margin-top: 12px; }
@media (max-width: 820px) { .detail { grid-template-columns: minmax(0, 1fr); } }
.photo { background: var(--sunk); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.photo img { width: 100%; display: block; max-height: 70vh; object-fit: contain; background: var(--sunk); }
.sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.sheet + .sheet { margin-top: 16px; }
.sheet-h { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sheet-b { padding: 14px 16px; display: grid; gap: 12px; }
dl.fields { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; }
dl.fields dt { color: var(--muted); }
dl.fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ct-name { font-size: 22px; font-family: var(--font-display); line-height: 1.3; }
.ct-sci { font-size: 17px; }
.meter { height: 6px; background: var(--sunk); border-radius: 3px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; font-size: 13px; }
.checks li { color: var(--muted); }
.checks li.ok { color: var(--ink); }
.checks li::before { content: "○ "; font-family: var(--font-mono); }
.checks li.ok::before { content: "✓ "; color: var(--good); font-weight: 700; }
.idents { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ident { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; }
.ident:first-child { border-top: 0; padding-top: 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--accent-soft); color: var(--accent); }
.ident .who { font-size: 13px; color: var(--muted); }
.ident .tx { font-weight: 600; }
.ident .cm { font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.ident.withdrawn .tx { text-decoration: line-through; color: var(--muted); }
.tag-agree { font-size: 11px; font-weight: 600; color: var(--good); }
.tag-diff { font-size: 11px; font-weight: 600; color: var(--warn); }

/* Picker */
.picker { position: relative; }
.picker input { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 8px 12px; }
.picker ul { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 4; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); list-style: none; margin: 0; padding: 4px; max-height: 300px; overflow-y: auto; box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
.picker li button { width: 100%; text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.picker li button:hover, .picker li button:focus-visible { background: var(--accent-soft); }
.picked { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius); padding: 8px 12px; }

/* Upload */
.upload { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; margin-top: 16px; }
@media (max-width: 820px) { .upload { grid-template-columns: minmax(0, 1fr); } }
.drop { border: 2px dashed var(--line); border-radius: var(--radius); background: var(--surface); min-height: 280px; display: grid; place-items: center; text-align: center; padding: 24px; cursor: pointer; position: relative; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop img { max-width: 100%; max-height: 420px; border-radius: 4px; display: block; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tips { font-size: 13px; color: var(--muted); margin: 0; padding-left: 1.2em; }
.form { display: grid; gap: 14px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .form .two { grid-template-columns: 1fr; } }
.field { display: grid; gap: 4px; min-width: 0; }
.field > span { font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 8px 10px; width: 100%; min-width: 0; }
.field textarea { min-height: 70px; resize: vertical; }
.unit-row { display: flex; gap: 8px; align-items: center; }
.unit-row input { flex: 1; }
.ai { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ai-h { padding: 10px 14px; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.ai-b { padding: 10px 14px; display: grid; gap: 10px; }
.cand { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.cand:first-child { border-top: 0; }
.cand .why { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.cand .bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cand .bar .meter { flex: 1; }
.thinking { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.thinking::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .thinking::before { animation: none; } .label-card { transition: none; } .label-card:hover { transform: none; } }

/* Species */
.groups { display: grid; gap: 28px; margin-top: 20px; }
.sp-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table.sp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
table.sp th, table.sp td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); }
table.sp th { font-size: 12px; color: var(--muted); font-weight: 500; }
table.sp tr:last-child td { border-bottom: 0; }
table.sp td.n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
table.sp th.n { text-align: right; }
table.sp a { text-decoration: none; color: var(--ink); font-weight: 600; }
table.sp a:hover { color: var(--accent); }
.taxon-head { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: baseline; margin-top: 8px; }
.foot { margin-top: 40px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 8px 16px; border-radius: 999px; font-size: 14px; z-index: 20; }

/* Hero & bands: nautical-chart contours on deep water */
.hero, .band { position: relative; overflow: hidden; color: var(--on-abyss); background: radial-gradient(120% 140% at 85% 0%, var(--abyss-2) 0%, var(--abyss) 62%); }
.hero canvas, .band canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; padding-block: 56px 84px; align-items: end; }
@media (max-width: 820px) { .hero-in { grid-template-columns: minmax(0, 1fr); padding-block: 40px 76px; } }
.hero .eyebrow, .band .eyebrow { color: var(--tide); }
.hero-title { font-family: var(--font-display); font-size: clamp(36px, 6.4vw, 60px); line-height: 1.12; letter-spacing: 0.04em; color: var(--on-abyss); margin-top: 10px; }
.hero-title em { font-style: normal; color: var(--tide); }
.lede { color: var(--on-abyss-muted); max-width: 30em; font-size: 16px; margin: 16px 0 0; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.btn.tide { background: var(--tide); border-color: var(--tide); color: var(--abyss); font-weight: 700; padding: 10px 18px; }
.btn.tide:hover { filter: brightness(1.08); }
.btn.glass { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.28); color: var(--on-abyss); padding: 10px 18px; }
.btn.glass:hover { border-color: rgb(255 255 255 / 0.6); }
.gauge { border: 1px solid rgb(255 255 255 / 0.16); background: rgb(3 18 27 / 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 10px; padding: 16px 18px; display: grid; gap: 14px; }
.gauge-h { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--on-abyss-muted); text-transform: uppercase; }
.gauge-h i { font-style: normal; color: var(--tide); }
.gauge .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.gauge .stat b { color: var(--on-abyss); font-size: 30px; }
.gauge .stat span { color: var(--on-abyss-muted); }
.band-in { position: relative; padding-block: 36px 34px; display: grid; gap: 6px; }
.band h1 { font-size: clamp(26px, 4.4vw, 36px); color: var(--on-abyss); }
.band p { color: var(--on-abyss-muted); margin: 4px 0 0; max-width: 46em; }
.band a { color: var(--tide); }
.band .back { color: var(--on-abyss-muted); }
.band-title { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.band .ico-ring { background: rgb(255 255 255 / 0.1); color: var(--on-abyss); }
.band .rank { color: var(--on-abyss-muted); border-color: rgb(255 255 255 / 0.25); }

/* Steps overlapping the hero */
.steps { position: relative; margin-top: -76px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); box-shadow: 0 18px 40px -24px rgb(6 30 44 / 0.45); }
@media (max-width: 720px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { padding: 18px 20px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.step + .step { border-left: 1px solid var(--line); }
@media (max-width: 720px) { .step + .step { border-left: 0; border-top: 1px solid var(--line); } }
.step .ico-ring { grid-row: span 2; }
.step-h { font-size: 15px; font-family: var(--font-body); font-weight: 700; margin: 0; }
.step-h small { font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 500; margin-right: 6px; letter-spacing: 0.08em; }
.step p { margin: 0; font-size: 13px; color: var(--muted); }

/* Icons */
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; }
.ico-ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: var(--gc, var(--accent)); background: color-mix(in srgb, var(--gc, var(--accent)) 14%, transparent); flex: none; }
.ico-ring.lg { width: 56px; height: 56px; font-size: 30px; }
[data-g="biv"] { --gc: var(--g-biv); } [data-g="gas"] { --gc: var(--g-gas); } [data-g="cep"] { --gc: var(--g-cep); }
[data-g="cru"] { --gc: var(--g-cru); } [data-g="ech"] { --gc: var(--g-ech); } [data-g="fish"] { --gc: var(--g-fish); } [data-g="alg"] { --gc: var(--g-alg); }

/* Section heads and group tiles */
.sec-h { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; margin: 36px 0 14px; }
.sec-h h2 { font-size: 21px; }
.gtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.gtile { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; cursor: pointer; display: grid; gap: 10px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.gtile:hover { border-color: var(--gc); transform: translateY(-2px); }
.gtile.is-active { border-color: var(--gc); box-shadow: inset 0 0 0 1px var(--gc); background: color-mix(in srgb, var(--gc) 7%, var(--surface)); }
.gtile b { font-size: 15px; display: block; }
.gtile div > span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gtile.all { --gc: var(--accent); }

/* Card group tag */
.label-card .ph { position: relative; }
.gtag { position: absolute; left: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: var(--surface); color: var(--gc); box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); }
.label-card .ph-empty { width: 100%; height: 100%; display: grid; place-items: center; font-size: 56px; color: var(--gc, var(--muted)); background: color-mix(in srgb, var(--gc, var(--muted)) 10%, var(--sunk)); }

/* Empty-state illustration */
.ill { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.ill::before, .ill::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--g-biv) 45%, transparent); }
.ill::after { inset: 16px; border-style: solid; border-color: color-mix(in srgb, var(--g-biv) 25%, transparent); }
.ill .ico { width: 54px; height: 54px; color: var(--g-biv); }
.empty-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Upload drop zone art */
.drop .drop-art { display: grid; gap: 10px; justify-items: center; }
.drop .drop-art .ico-ring { width: 72px; height: 72px; font-size: 38px; }
.drop .drop-art .glyphs { display: flex; gap: 8px; font-size: 18px; color: var(--muted); }

/* Blog */
.gcover { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200' fill='none' stroke='%235cc4d6' stroke-opacity='.28'%3E%3Cpath d='M250 20c40 4 62 34 52 62s-50 40-86 30-52-38-40-62 34-34 74-30Z'/%3E%3Cpath d='M252 -6c58 6 92 50 78 92s-74 62-128 46-78-58-58-94 52-50 108-44Z'/%3E%3Cpath d='M256 -34c76 10 122 66 104 122s-98 82-170 60-104-76-78-124 68-66 144-58Z'/%3E%3Cpath d='M30 210c-20-40 0-80 44-88s78 18 84 52-10 52-40 60' /%3E%3Cpath d='M-10 230c-30-60 0-118 64-128s112 26 120 76-14 76-58 88'/%3E%3C/svg%3E") center / cover no-repeat, radial-gradient(120% 140% at 85% 0%, var(--abyss-2), var(--abyss) 65%); color: var(--gc); }
.gcover .ico { width: 34%; height: 34%; max-width: 96px; max-height: 96px; filter: drop-shadow(0 4px 14px rgb(0 0 0 / 0.35)); }
.cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--gc); }
.cat::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--gc); }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.post-card:hover { border-color: var(--gc, var(--accent)); transform: translateY(-2px); }
.post-card .cv { aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--sunk); }
.post-card .cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card .pb { padding: 14px 16px 16px; display: grid; gap: 8px; flex: 1; align-content: start; }
.post-card h3 { font-family: var(--font-display); font-size: 18px; line-height: 1.4; }
.post-card .ex { margin: 0; color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.post-card.feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-column: 1 / -1; }
.post-card.feature .cv { aspect-ratio: auto; min-height: 260px; }
.post-card.feature .pb { padding: 28px; align-content: center; gap: 12px; }
.post-card.feature h3 { font-size: clamp(22px, 3vw, 28px); }
.post-card.feature .ex { -webkit-line-clamp: 4; font-size: 15px; }
@media (max-width: 720px) { .post-card.feature { grid-template-columns: minmax(0, 1fr); } .post-card.feature .cv { min-height: 0; aspect-ratio: 16 / 9; } .post-card.feature .pb { padding: 16px; } }
.article { max-width: 720px; margin: 0 auto; display: grid; gap: 18px; }
.article h1 { font-size: clamp(26px, 4.6vw, 38px); line-height: 1.3; }
.article .cover { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 8; max-width: 100%; background: var(--sunk); }
.article .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prose { font-size: 16.5px; line-height: 1.95; }
.prose p { margin: 0 0 1.1em; }
.prose h3 { font-family: var(--font-display); font-size: 20px; margin: 1.6em 0 0.6em; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.prose li { margin: 0.25em 0; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose > :first-child { margin-top: 0; }
.post-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; border-block: 1px solid var(--line); padding-block: 12px; }
.btn.liked { border-color: var(--g-biv); color: var(--g-biv); background: color-mix(in srgb, var(--g-biv) 10%, var(--surface)); }
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); font-size: 13px; }
.sp-tag .ico { color: var(--gc); width: 18px; height: 18px; }
.sp-tag button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 0 0 2px; font-size: 15px; line-height: 1; }
.comments { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.comment { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.comment:first-child { border-top: 0; }
.comment p { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.writer { max-width: 820px; display: grid; gap: 16px; }
.writer .field textarea.body { min-height: 360px; font-size: 15.5px; line-height: 1.8; }
.cover-pick { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: center; }
@media (max-width: 520px) { .cover-pick { grid-template-columns: minmax(0, 1fr); } }
.cover-pick .cv { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--sunk); border: 1px solid var(--line); }
.cover-pick .cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fmt-hint { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
@media (prefers-reduced-motion: reduce) { .post-card { transition: none; } .post-card:hover { transform: none; } }

/* Species profile (图鉴) */
.profile { display: grid; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 8px; }
.profile-key { border-left: 3px solid var(--gc); padding: 2px 0 2px 14px; }
.profile-key p { margin: 4px 0 0; font-size: 16px; line-height: 1.8; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; margin: 0; }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-size: 14px; }
.profile-links { display: flex; flex-wrap: wrap; gap: 16px 40px; }
.profile-links > div { display: grid; gap: 8px; }
.zone-chip { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.spec-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.spec-card:hover { border-color: var(--gc); }
.spec-card p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
/* Habitat zones */
.zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.zone { position: relative; display: grid; gap: 8px; align-content: start; min-height: 220px; padding: 20px; border-radius: 12px; text-decoration: none; color: var(--on-abyss); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='240' fill='none' stroke='%235cc4d6' stroke-opacity='.22'%3E%3Cpath d='M260 30c40 4 60 34 50 60s-50 40-84 30-50-36-40-60 34-34 74-30Z'/%3E%3Cpath d='M262 0c58 6 92 50 78 92s-74 62-128 46-78-58-58-94 52-50 108-44Z'/%3E%3Cpath d='M266 -30c76 10 122 66 104 122s-98 82-170 60-104-76-78-124 68-66 144-58Z'/%3E%3C/svg%3E") right top / 260px auto no-repeat, linear-gradient(160deg, var(--abyss-2), var(--abyss) 70%); transition: transform .15s, box-shadow .15s; }
.zone:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgb(6 30 44 / 0.6); }
.zone .eyebrow { color: var(--tide); }
.zone h3 { font-family: var(--font-display); font-size: 21px; }
.zone p { margin: 0; color: var(--on-abyss-muted); font-size: 13px; }
.zone-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; }
.zone-icons { display: flex; gap: 6px; font-size: 18px; }
.zone-icons span { color: var(--gc); }
.zone .mono { color: var(--tide); }
/* Events */
.events { display: grid; gap: 12px; }
.event { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.event.past { opacity: 0.72; }
.evdate { display: grid; justify-items: center; align-content: center; gap: 0; border-radius: 10px; padding: 8px 0; background: color-mix(in srgb, var(--gc) 12%, var(--surface)); color: var(--gc); font-size: 12px; }
.evdate b { font-family: var(--font-mono); font-size: 28px; font-weight: 500; line-height: 1.15; color: var(--ink); }
.evbody { display: grid; gap: 6px; min-width: 0; }
.evbody h3 { font-family: var(--font-display); font-size: 18px; }
.evdesc { margin: 0; font-size: 14px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.evfoot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.evfoot .mono { margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .zone, .spec-card { transition: none; } .zone:hover { transform: none; } }

/* Species group heads */
.grp-h { display: flex; align-items: center; gap: 12px; }
@media (prefers-reduced-motion: reduce) { .gtile { transition: none; } .gtile:hover { transform: none; } }

/* ---------- Site build additions ---------- */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main#app { flex: 1 0 auto; width: 100%; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 30; background: var(--surface); color: var(--ink); padding: 8px 12px; border-radius: 6px; }
.skip:focus { left: 12px; }
.small { font-size: 12px; }
.top .wrap { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.top-tools { display: flex; align-items: center; gap: 8px; flex: none; }
/* language menu (works without JS: a <details> popover) */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgb(255 255 255 / 0.28); color: var(--on-abyss); border-radius: 999px; padding: 5px 11px 5px 9px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; user-select: none; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary .ico { width: 16px; height: 16px; }
.lang-menu summary:hover, .lang-menu[open] summary { border-color: var(--tide); color: var(--tide); }
.lang-menu summary:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; list-style: none; margin: 0; padding: 6px; min-width: 150px; background: var(--abyss); border: 1px solid rgb(255 255 255 / 0.16); border-radius: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / 0.35); }
.lang-menu li a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--on-abyss); text-decoration: none; font-size: 14px; }
.lang-menu li a:hover, .lang-menu li a:focus-visible { background: rgb(255 255 255 / 0.08); color: var(--tide); outline: none; }
.lang-menu li a[aria-current] { color: var(--tide); font-weight: 600; }
.lang-menu li a[aria-current]::after { content: " ✓"; }
.tr-block { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.tr-block summary { cursor: pointer; font-weight: 600; font-size: 14px; }

/* Japanese pages prefer Japanese system fonts (Mincho for display, Gothic for text) */
:root:lang(ja) {
  --font-display: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Noto Serif JP", "Noto Serif SC", serif;
  --font-body: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", system-ui, sans-serif;
}
:root:lang(ja) .hero-title { letter-spacing: 0.02em; }
/* Korean: Hangul is not in the self-hosted serif, so use Korean system fonts; break between words, not syllables */
:root:lang(ko) {
  --font-display: "Noto Serif KR", "Noto Serif CJK KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  --font-body: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif;
}
:root:lang(ko) body { word-break: keep-all; overflow-wrap: break-word; }
/* long German/French words in narrow headings */
:root:lang(de) h1, :root:lang(de) h2, :root:lang(de) h3, :root:lang(fr) h1, :root:lang(es) h1 { overflow-wrap: break-word; }
/* Japanese headings: break at phrase boundaries instead of mid-word */
:root:lang(ja) h1, :root:lang(ja) h2, :root:lang(ja) h3 { word-break: auto-phrase; }
/* keep the header on one row when the nav labels are long */
@media (max-width: 1240px) { .brand span { display: none; } }
:root:lang(fr) .brand span, :root:lang(de) .brand span, :root:lang(es) .brand span { display: none; }
.account { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-abyss-muted); }
.account a, .account button { color: var(--on-abyss); background: none; border: 1px solid rgb(255 255 255 / 0.18); border-radius: 999px; padding: 5px 12px; font-size: 13px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.account a:hover, .account button:hover { border-color: var(--tide); color: var(--tide); }
.account .who { max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--on-abyss); }
@media (max-width: 960px) {
  .top .wrap { gap: 8px 10px; padding-block: 8px; }
  .brand { flex: 1; min-width: 0; }
  .brand span { display: none; }
  .top-tools { order: 2; }
  nav { order: 3; width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  nav a { white-space: nowrap; flex: none; }
  .account .who { display: none; }
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; padding: 0; font-size: 13px; }
.crumbs li { color: var(--on-abyss-muted); }
.crumbs li + li::before { content: "/"; margin-right: 4px; opacity: 0.6; }
.crumbs a { color: var(--on-abyss-muted); text-decoration: none; }
.crumbs a:hover { color: var(--tide); }
main .crumbs li, main .crumbs a { color: var(--muted); }
main .crumbs a:hover { color: var(--accent); }
.band .eyebrow, .hero .eyebrow { margin: 0; }
.band h1 { margin: 0; }
.more { font-size: 14px; }
.chip-dark { color: var(--on-abyss); background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.2); text-decoration: none; }
.chip-dark:hover { border-color: var(--tide); color: var(--tide); }
.gtile { text-decoration: none; color: var(--ink); }
.ext { display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-size: 13px; color: var(--ink); }
.ext::after { content: " ↗"; color: var(--muted); }
.ext:hover { border-color: var(--accent); }
.profile-key h2.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
.article .prose h2 { font-family: var(--font-display); font-size: 21px; margin: 1.6em 0 0.6em; }
.article .crumbs { margin-bottom: 4px; }
h1.ct-name { font-size: 24px; margin: 0; }
h1.ct-name .sci { font-size: 17px; font-weight: 400; }
.site-foot { margin-top: 48px; background: var(--abyss); color: var(--on-abyss-muted); font-size: 13px; }
.site-foot .wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px 40px; padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); }
.site-foot b { color: var(--on-abyss); font-family: var(--font-display); font-size: 16px; }
.site-foot p { margin: 6px 0 0; max-width: 46em; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-foot a { color: var(--on-abyss); text-decoration: none; }
.site-foot a:hover { color: var(--tide); }
.site-foot .muted { color: var(--on-abyss-muted); grid-column: 1 / -1; }
@media (max-width: 640px) { .site-foot .wrap { grid-template-columns: minmax(0, 1fr); } }
.foot { display: none; }
/* Auth and admin */
.auth { max-width: 420px; margin: 8px auto 0; display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.auth .field input { font-size: 16px; }
.auth .err { color: var(--danger); font-size: 14px; margin: 0; min-height: 1.2em; }
.auth .alt { font-size: 14px; color: var(--muted); margin: 0; }
.admin { display: grid; gap: 28px; }
.admin table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.admin th, .admin td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin th { font-size: 12px; color: var(--muted); font-weight: 500; }
.admin .code { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.06em; }
.admin .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin .inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.admin .inline-form .field { min-width: 140px; }
.copy-ok { color: var(--good); font-size: 12px; }
/* breadcrumbs must not inherit the header nav styles */
nav.crumbs { display: block; margin: 0; width: auto; overflow: visible; order: 0; }
nav.crumbs a { padding: 0; border-radius: 0; background: none; font-size: 13px; white-space: normal; }
nav.crumbs a:hover { background: none; }
.zone { grid-template-columns: minmax(0, 1fr); }
.zone > * { min-width: 0; }
.zone-foot { flex-wrap: wrap; gap: 6px 10px; }
.zone-icons { flex-wrap: wrap; }

/* imported species (taxonomy only) */
.sp-more { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--surface); }
.sp-more summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.sp-basic { margin: 12px 0 4px; columns: 3 240px; column-gap: 28px; font-size: 14px; }
.sp-basic .fam { break-inside: avoid; margin-bottom: 14px; }
.sp-basic h3 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.sp-basic h3 span { text-transform: none; letter-spacing: 0; }
.sp-basic ul { list-style: none; margin: 0; padding: 0; }
.sp-basic li { padding: 2px 0; }
.sp-basic a { text-decoration: none; }
.sp-basic a:hover { text-decoration: underline; }
.profile.basic { display: grid; gap: 14px; }
.profile.basic dd { overflow-wrap: anywhere; }

/* species photos (iNaturalist) */
.sp-photos { display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: minmax(0, auto); gap: 10px; margin-bottom: 18px; }
.sp-photos.one { grid-template-columns: minmax(0, 720px); }
.sp-photos figure { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sp-photos figure:first-child { grid-row: span 2; }
.sp-photos img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 10px; background: var(--line); aspect-ratio: 4 / 3; }
.sp-photos figure:first-child img { aspect-ratio: auto; flex: 1; max-height: 640px; }
.sp-photos figcaption { font-size: 11px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.sp-photos figcaption a { color: inherit; }
.sp-photos-note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 640px) {
  .sp-photos { grid-template-columns: 1fr 1fr; }
  .sp-photos figure:first-child { grid-column: 1 / -1; grid-row: auto; }
  .sp-photos figure:first-child img { aspect-ratio: 4 / 3; max-height: none; }
}
.spec-card.has-photo { align-items: center; }
.spec-thumb { width: 64px; height: 64px; flex: none; object-fit: cover; border-radius: 8px; background: var(--line); }