/* Hallmark · job: estimate a fish's weight from its length · shape: app screen · genre: modern-minimal · theme: custom (Liquid Glass, user named) · redesign: polish
 * hero: settled · nav: floating glass capsule of tabs, at the bottom on phones · footer: none, an app screen ends at its last panel · posture: restrained · v2.0.0 */
/* Hallmark · dismissed F7 · the capsule tabs, account and segmented control are the Liquid Glass controls this fishing app was asked to follow; the form fields share one recipe on purpose so every input reads alike */
/* Hallmark · dismissed 29 · the angler asked for a see-through, airy chart background, so only the estimate chart card is frosted over the page glow; it turns solid when transparency is reduced or blur is unsupported */
/* Hallmark の点検用の記録（上の 2 つ。グラフのカードのすりガラスは、ユーザーの要望「透明感」による意図的な表現）: 画面の方針と、残した指摘の理由。
   カプセル形（タブ・アカウント・切り替え）は Liquid Glass の方針どおりなので残す。入力欄はどれも同じ見た目にそろえている。 */

/* uometri — ダッシュボード風のデザイン（全画面共通。末尾の「ダッシュボードのデザイン」の節）
   土台は Liquid Glass の作り（下の節）で、その上にダッシュボードの指定を重ねている。
   内容は白い角丸のカード、メニュー・主ボタン・選択中は黒いカプセル、ボタンとダイアログは不透明。
   ガラスとして残っているのは、巻尺の針・ツールチップ・吹き出しだけ。 */

:root {
  color-scheme: light dark;

  /* 内容の層 */
  --bg: #f2f2f7;              /* 画面の地 */
  --surface: #ffffff;         /* 内容の面 */
  --fill: rgba(118, 118, 128, 0.12); /* 切り替えの溝・巻尺の地 */
  --separator: rgba(60, 60, 67, 0.18);
  --field-edge: #8e8e93;      /* 入力欄の枠（白地に 3:1 以上） */

  /* 文字（白・地の灰のどちらでも 4.5:1 以上） */
  --label: #1c1c1e;
  --label-2: #5c5c62;
  --link: #0066d6;

  /* 強調（青）。--tint は文字・アイコン・印に、--tint-fill は白文字を載せる塗りに使う */
  --tint: #0066d6;
  --tint-fill: #0066d6;   /* 白文字が 4.5:1 以上になる濃さ */
  --on-tint: #fbfcff;     /* 青の塗りに載せる文字（純白をわずかに青へ寄せる） */

  /* 部品の色（直書きせず、ここにまとめる） */
  --mask: #000;           /* マスクの不透明な部分（色ではなく形として使う） */
  --pill-ink: #f7f9fc;    /* オフライン表示の文字（#636366 の上で 5.6:1） */
  --pill-bg: #636366;
  --sheen-strong: rgba(255, 255, 255, 0.28); /* 主ボタンの上半分の反射 */
  --sheen-soft: rgba(255, 255, 255, 0.12);   /* 吹き出しの弱い反射 */
  --shadow-control: 0 2px 6px rgba(0, 0, 0, 0.12);   /* 切り替えのつまみ */
  --shadow-control-flat: 0 1px 3px rgba(0, 0, 0, 0.1); /* 表の中のボタン */
  --shadow-tab: 0 2px 8px rgba(0, 0, 0, 0.1);        /* 管理メニューの選択中 */
  --needle-fill: rgba(255, 255, 255, 0.08);
  --needle-sheen: rgba(255, 255, 255, 0.35);
  --needle-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
  --backdrop: rgba(0, 0, 0, 0.25);                    /* ダイアログの後ろ */

  /* ガラス */
  --glass: rgba(255, 255, 255, 0.58);
  --glass-thick: rgba(255, 255, 255, 0.78);       /* ダイアログなど、文字の多いガラス */
  --glass-rim-top: rgba(255, 255, 255, 0.95);      /* 上の縁の光 */
  --glass-rim-bottom: rgba(255, 255, 255, 0.4);
  --glass-stroke: rgba(0, 0, 0, 0.07);             /* 白い地の上でも輪郭がわかる細い線 */
  --glass-sheen: rgba(255, 255, 255, 0.45);        /* 上半分の反射 */
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  --glass-filter: blur(14px) saturate(190%) brightness(1.04);
  --glass-popover: rgba(255, 255, 255, 0.4);     /* 吹き出し: 後ろの形がわかる薄いガラス（文字は淡い縁取りで読みやすくする） */
  --glass-popover-filter: blur(5px) saturate(160%);
  --glass-popover-text-halo: 0 0 2px rgba(255, 255, 255, 0.85);

  /* データ（グラフ） */
  --dot: #6e6e73;
  --band: rgba(0, 102, 214, 0.13);
  --curve: #1c1c1e;
  /* 曲線のヒートマップの色（白地で線が見えるよう、黄色は濃い黄土色） */
  --heat-1: #2f63d6;
  --heat-2: #0f8f9e;
  --heat-3: #2e9a44;
  --heat-4: #b8860b;
  --heat-5: #d9661a;
  --heat-6: #d0342c;
  --grid: rgba(60, 60, 67, 0.12);

  --ok: #1f7a34;
  --bad: #d70015;
  --focus: #0066d6;

  --font: -apple-system, BlinkMacSystemFont, system-ui, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'BIZ UDPGothic', 'Yu Gothic', 'Meiryo', sans-serif;
  --font-num: var(--font);
  --size-hero: clamp(3.75rem, 2.5rem + 6vw, 6rem);
  --size-title: 1.75rem;
  --size-head: 1.1875rem;
  --size-body: 1rem;
  --size-small: 0.8125rem;
  --gutter: 16px;
  --tap: 44px;
  --radius-surface: 26px;  /* 内容の面 */
  --radius-inner: 16px;    /* 面の中の部品（面の角丸と同心になる値） */
  --page-max: 1120px;
  --spring: linear(0, 0.5 15%, 1.06 38%, 0.98 58%, 1.005 78%, 1);

  accent-color: var(--tint);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #050608;              /* 純黒をわずかに青へ寄せる */
    --surface: #1c1c1e;
    --fill: rgba(118, 118, 128, 0.24);
    --separator: rgba(84, 84, 88, 0.6);
    --field-edge: #8e8e93;
    --label: #f5f6f8;           /* 純白をわずかに青へ寄せる（--surface #1c1c1e の上で 16:1） */
    --label-2: #aeaeb2;
    --link: #4da3ff;
    --tint: #4da3ff;      /* 暗い面・暗いガラスの上でも 4.5:1 以上 */
    --glass: rgba(44, 44, 48, 0.55);
    --glass-thick: rgba(44, 44, 48, 0.82);
    --glass-rim-top: rgba(255, 255, 255, 0.3);
    --glass-rim-bottom: rgba(255, 255, 255, 0.08);
    --glass-stroke: rgba(255, 255, 255, 0.1);
    --glass-sheen: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    --glass-filter: blur(14px) saturate(170%) brightness(0.95);
    --glass-popover: rgba(30, 30, 34, 0.45);
    --glass-popover-filter: blur(5px) saturate(150%) brightness(0.8);
    --glass-popover-text-halo: 0 0 2px rgba(0, 0, 0, 0.85);
    --dot: #98989d;
    --band: rgba(77, 163, 255, 0.2);
    --curve: #ffffff;
    --heat-1: #6f98ff;
    --heat-2: #34c3d1;
    --heat-3: #5cc96a;
    --heat-4: #f2c230;
    --heat-5: #ff8c3a;
    --heat-6: #ff5a4f;
    --grid: rgba(235, 235, 245, 0.12);
    --ok: #30d158;
    --bad: #ff6961;
    --focus: #4da3ff;
  }
}

/* 透明度を下げる設定、またはぼかしに対応しないブラウザでは、ガラスを不透明にする */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #ffffff; --glass-thick: #ffffff; --glass-filter: none; --glass-popover: #ffffff; --glass-popover-filter: none; --glass-popover-text-halo: none; }
}
@media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --glass: #2c2c2e; --glass-thick: #2c2c2e; --glass-popover: #2c2c2e; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: #ffffff; --glass-thick: #ffffff; --glass-popover: #ffffff; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) { --glass: #2c2c2e; --glass-thick: #2c2c2e; --glass-popover: #2c2c2e; }
  }
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); overflow-x: clip; }

body {
  margin: 0;
  overflow-x: clip;
  min-height: 100dvh;
  color: var(--label);
  background: var(--bg);
  font-family: var(--font);
  font-size: var(--size-body);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  /* 長い URL などは折り返す。anywhere だと単位（cm）などの部品が 1 文字幅まで縮むので break-word にする */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
p a, li a, .small a { text-decoration: underline; text-underline-offset: 0.2em; }

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

h1, h2, h3 { line-height: 1.3; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: var(--size-title); font-weight: 700; }
h2 { font-size: var(--size-head); font-weight: 700; }
h3 { font-size: var(--size-body); font-weight: 600; }
p { margin: 0; }

.num { font-family: var(--font-num); font-weight: 600; }

/* アイコン（文字と同じ色の線で描く） */
.icon {
  width: 1.2em; height: 1.2em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.with-icon { display: inline-flex; align-items: center; gap: 0.45em; }
h1.with-icon, h2.with-icon, p.with-icon { display: flex; }
h1 .icon, h2 .icon { color: inherit; }   /* 見出しは一色（一部だけ強調色にしない） */
.muted { color: var(--label-2); }
.small { font-size: var(--size-small); }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── ガラス（操作の層） ─────────────────────
   面: 半透明 + 後ろのぼかしと色の強調。縁: 上は明るく下は淡い光。上半分: 反射。外: 浮いた影 */

.glass,
.tabs,
.account,
.segmented button[aria-pressed='true'],
.btn,
.ruler-needle,
dialog,
.tooltip,
.length-help {
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  background-color: var(--glass);
  background-image: linear-gradient(180deg, var(--glass-sheen) 0%, transparent 55%);
  border: 0;
  box-shadow:
    inset 0 1px 0 var(--glass-rim-top),
    inset 0 -1px 0 var(--glass-rim-bottom),
    inset 0 0 0 0.5px var(--glass-stroke),
    var(--glass-shadow);
}

/* ── 骨組み ─────────────────────────────── */

/* ヘッダーは透明。スクロールすると、上端で内容がぼけて潜っていく（スクロール端の効果） */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px;
  padding: env(safe-area-inset-top, 0px) max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))) 0;
}
.site-header::before {
  content: ''; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, var(--mask) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, var(--mask) 55%, transparent 100%);
}
.wordmark {
  font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em;
  color: var(--label); text-decoration: none;
}
.wordmark:hover { text-decoration: none; }
/* アカウント: 浮かぶガラスのカプセル */
.account {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  min-height: 40px; padding: 0 16px;
  font-size: 0.875rem; border-radius: 999px;
}
.account:empty { display: none; }
.account a { font-weight: 600; }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12em; }
/* 狭い幅で「ログアウト」が 1 文字ずつ折り返してカプセルが崩れないよう、縮むのは名前だけにする */
.account .btn-link, .account .offline-pill { flex: none; white-space: nowrap; }
.section-title { font-size: var(--size-body); margin: 8px 0 4px; }
.initial-password { font-size: 1.5rem; letter-spacing: 0.06em; -webkit-user-select: all; user-select: all; }
.checkbox-field label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; min-height: var(--tap); }
.checkbox-field input { width: 20px; height: 20px; }
.offline-pill {
  padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap;
  color: var(--pill-ink); background: var(--pill-bg);
}
.offline-note { flex-basis: 100%; font-weight: 600; color: var(--label); }
.drafts { margin-top: 28px; padding-top: 16px; border-top: 0.5px solid var(--separator); }
.draft-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.draft-list li { padding: 12px 16px; border-radius: var(--radius-inner); background: var(--fill); }
.draft-list .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* タブ: 浮かぶガラスのカプセル。スマホは画面下、PC は上部中央（ツールバー） */
.tabs {
  position: fixed; z-index: 30;
  left: 50%; translate: -50% 0;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  display: flex; gap: 2px; padding: 4px;
  width: max-content; max-width: calc(100% - 24px);
  border-radius: 999px;
}
.tabs a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 54px; min-width: 72px; padding: 0 16px;
  color: var(--label); text-decoration: none; font-size: 0.6875rem; font-weight: 500; line-height: 1.3; white-space: nowrap;
  border-radius: 999px;
  transition: background-color 0.2s ease-out, scale 0.35s var(--spring);
}
.tabs .icon { width: 24px; height: 24px; }
/* 選択中: 色の付いたつまみ（文字は強調色 + 太字。色だけにしない） */
.tabs a[aria-current='page'] { color: var(--tint); font-weight: 700; background: var(--fill); }
.tabs a:active { scale: 0.94; }
@media (max-width: 400px) {
  /* 小さな画面でも 4 つのタブ（管理者）が収まるように詰める */
  .tabs a { min-width: 0; flex: 1 1 auto; padding: 0 12px; }
}
/* 上部に置くのは、ロゴ・タブ（管理者は 4 つ）・アカウント（名前とログアウト）が重ならずに並ぶ幅だけ。
   それより狭い幅では画面下に浮かべる */
@media (min-width: 1100px) {
  .tabs {
    top: max(10px, env(safe-area-inset-top, 0px)); bottom: auto;
    left: calc(max(var(--gutter), (100% - var(--page-max)) / 2 + var(--gutter)) + 120px); translate: none;
  }
  .tabs a { flex-direction: row; gap: 4px; min-height: 40px; min-width: 0; padding: 0 16px; font-size: 0.875rem; }
  .tabs .icon { width: 18px; height: 18px; }
  .tabs a:hover:not([aria-current='page']) { background: var(--fill); }
}

main {
  max-width: var(--page-max); margin: 0 auto;
  padding: 8px var(--gutter) calc(112px + env(safe-area-inset-bottom, 0px));
}
/* 画面切り替え時に読み上げのためフォーカスを移すだけなので、枠線は出さない */
main:focus { outline: none; }
@media (min-width: 1100px) { main { padding-top: 16px; padding-bottom: 64px; } }

/* 画面のまとまり（推定以外の画面は 1 枚の不透明な面） */
.view { padding: 24px; background: var(--surface); border-radius: var(--radius-surface); }
.view.view-bare { padding: 0; background: none; border-radius: 0; }
@media (max-width: 480px) { .view { padding: 20px 16px; } }

.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.stack > * + * { margin-top: 16px; }
.lead { margin: -8px 0 24px; color: var(--label-2); max-width: 40em; }

/* ── 部品 ─────────────────────────────── */

/* ボタン: ガラスのカプセル。押すとばねのように縮む */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 20px;
  font: inherit; font-weight: 600; color: var(--label);
  border-radius: 999px;
  cursor: pointer; text-decoration: none;
  transition: scale 0.35s var(--spring), filter 0.15s ease-out;
}
.btn:hover { filter: brightness(1.04); text-decoration: none; }
.btn:active { scale: 0.96; }
/* 主ボタン: 強調色を透かしたガラス */
.btn-primary { color: var(--on-tint); background-color: var(--tint-fill); background-image: linear-gradient(180deg, var(--sheen-strong) 0%, transparent 55%); }
.btn-small { min-height: 36px; padding: 0 16px; font-size: 0.875rem; }
.btn-link {
  min-height: 36px; padding: 0 4px; color: var(--link); font-weight: 500;
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn-link:hover { text-decoration: underline; }
.btn-danger { color: var(--bad); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; scale: 1; }

/* 切り替え（魚種・長さの種類）: 溝の上を、ガラスのつまみが動く */
.segmented {
  display: inline-flex; gap: 2px; padding: 4px;
  background: var(--fill);
  border-radius: 999px;
}
.segmented button {
  min-height: 38px; min-width: 64px; padding: 0 16px;
  font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--label);
  background: transparent; border: 0; border-radius: 999px; cursor: pointer;
  transition: scale 0.35s var(--spring);
}
.segmented button:active { scale: 0.95; }
/* 選択中: 白いガラスのつまみ + 太字（色だけにしない） */
.segmented button[aria-pressed='true'] {
  font-weight: 700; background-color: var(--glass-thick);
  /* 小さな部品なので、浮いた影は短く */
  box-shadow: inset 0 1px 0 var(--glass-rim-top), inset 0 0 0 0.5px var(--glass-stroke), var(--shadow-control);
}

/* 魚種の切り替え: 画像と名前のカードを横に並べる。多いときはこの中だけ横にスクロールする
   カードは内容の一部なので不透明な面にし、選択中は強調色の枠 + 太字で示す（色だけにしない） */
.species-picker {
  position: relative;            /* 選択中のカードまでスクロールする計算の基準 */
  flex: 1 1 100%; min-width: 0; max-width: 100%;
  contain: inline-size;          /* カードが多くても、ページや面の幅を押し広げない */
  display: flex; gap: 8px;
  /* フォーカスの輪（3px + 間 2px）が横スクロールの枠で切れないよう、内側に余白を取る */
  padding: 8px; margin: -8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: 6px;
  scrollbar-width: thin;
}
.species-card {
  flex: none; width: 96px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 4px 8px;
  font: inherit; font-size: var(--size-small); font-weight: 500; line-height: 1.3; color: var(--label);
  background: var(--fill); border: 0; border-radius: var(--radius-inner);
  box-shadow: inset 0 0 0 2px transparent;
  cursor: pointer; scroll-snap-align: start;
  transition: scale 0.35s var(--spring), box-shadow 0.2s ease-out;
}
.species-card:active { scale: 0.95; }
.species-card[aria-pressed='true'] {
  font-weight: 700; color: var(--tint);
  background: color-mix(in srgb, var(--tint-fill) 10%, var(--surface));
  box-shadow: inset 0 0 0 2px var(--tint);
}
.species-card-media {
  display: grid; place-items: center;
  aspect-ratio: 3 / 2; overflow: hidden;   /* 魚は横長なので、側面の画像の尾が切れにくい 3:2 */
  border-radius: calc(var(--radius-inner) - 4px);   /* カードの角丸と同心 */
  background: var(--surface); color: var(--label-2);
}
.species-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.species-card-media .icon { width: 36px; height: 36px; stroke-width: 1.4; }
.species-card[aria-pressed='true'] .species-card-media .icon { color: var(--tint); }
/* 名前は単語の区切りで折り返し、それでも入らない長い単語（英語名）だけハイフンを付けて切る */
.species-card-name { padding: 0 2px; text-align: center; overflow-wrap: break-word; hyphens: auto; }
/* 長さの種類のカード: 魚の図 + どこからどこまで測るかの線（線と点は選択中なら強調色、それ以外は補足の文字色） */
.length-card { width: 120px; }
.length-card-media {
  display: block; padding: 8px 4px 4px; color: var(--label-2);
  border-radius: calc(var(--radius-inner) - 4px); background: var(--surface);
}
.length-card[aria-pressed='true'] .length-card-media { color: var(--tint); }
.length-diagram { display: block; width: 100%; height: auto; overflow: visible; }
.length-fish { fill: var(--label-2); }
/* 「長さの種類 ⓘ」: ⓘ を押すと説明の吹き出し（popover）が開く */
/* 中のカードの並びは contain: inline-size で自分の幅を持たないので、入れ物は親の幅いっぱいにする */
.length-field { display: grid; gap: 8px; width: 100%; min-width: 0; }
.picker-head { display: flex; align-items: center; gap: 2px; }
.picker-title { margin: 0; font-size: var(--size-small); font-weight: 600; color: var(--label-2); }
.info-button {
  display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); margin: -12px 0;
  padding: 0; font: inherit; color: var(--tint); background: none; border: 0; border-radius: 999px; cursor: pointer;
}
.info-button .icon { width: 20px; height: 20px; }
/* 吹き出しは操作の層なのでガラス（上の共通の指定）。後ろが透けて見えるよう薄くし、そのぶんぼかしを強めて文字を読みやすくする */
.length-help {
  width: min(340px, 100% - 32px); padding: 16px 20px;
  color: var(--label); background-color: var(--glass-popover); border-radius: 20px;
  -webkit-backdrop-filter: var(--glass-popover-filter); backdrop-filter: var(--glass-popover-filter);
  text-shadow: var(--glass-popover-text-halo);
  /* 共通のガラスの「上半分の反射」（白 45%）が重なると白く濁って透けて見えないので、吹き出しでは弱くする */
  background-image: linear-gradient(180deg, var(--sheen-soft) 0%, transparent 40%);
}
.length-help-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 0.9375rem; line-height: 1.6; }
.length-help-list dt { font-weight: 700; }
.length-help-list dd { margin: 0; }
.length-help-static .length-help-list { color: var(--label-2); }
.length-help-tip { margin: 12px 0 0; padding-top: 12px; border-top: 0.5px solid var(--separator); font-size: 0.875rem; line-height: 1.65; }
.length-help-tip strong { font-weight: 700; }
.length-help-close { display: flex; margin: 12px 0 0 auto; text-shadow: none; }
/* 「信頼できる」「すべて」の説明（管理者の推定画面、切り替えの下） */
.scope-help {
  margin: 8px 0 0; padding: 8px 12px;
  font-size: 0.75rem; line-height: 1.6; color: var(--label-2);
  /* 枠は全体を同じ線で囲む（左だけの太線は AI っぽい癖として Hallmark で避ける）。補足の文字色を半分の濃さにした線で、はっきり見せる */
  border: 1px solid color-mix(in srgb, var(--label-2) 45%, transparent); border-radius: 12px;
}
.length-help-static .length-help-tip { color: var(--label-2); }
/* ⓘ のすぐ下に出す。位置指定に対応していないブラウザでは、画面の下にシートとして出す */
@supports (position-area: block-end) {
  /* 位置の基準を明示する（popovertarget による暗黙の結び付けに対応しないブラウザでもずれないように） */
  .info-button { anchor-name: --length-help; }
  .length-help {
    position-anchor: --length-help;
    inset: auto; margin: 8px 0;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  }
  /* スマホの幅: ⓘ の真下に、左右の余白をそろえて画面幅いっぱいに出す */
  @media (max-width: 600px) {
    .length-help { position-area: block-end span-all; position-try-fallbacks: flip-block; width: auto; margin: 8px 16px; }
  }
}
@supports not (position-area: block-end) {
  .length-help { position: fixed; inset: auto 16px 16px 16px; width: auto; max-width: 480px; margin: 0 auto; }
}
.length-bar { stroke: currentColor; stroke-width: 7; stroke-linecap: round; }
.length-guide { stroke: currentColor; stroke-width: 3; stroke-dasharray: 6 6; }
.length-point { fill: currentColor; stroke: var(--surface); stroke-width: 3; }

/* フォーム */
.form { max-width: 34em; }
.field { display: grid; gap: 8px; }
.field + .field { margin-top: 16px; }
.field label, .field legend { font-weight: 600; font-size: 0.9375rem; }
.field .hint { font-size: var(--size-small); color: var(--label-2); }
/* 下書き・編集の初期値がいまの選択肢にないときの警告 */
.field-warning { margin: 0; font-size: var(--size-small); font-weight: 600; color: var(--bad); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row > .field { margin-top: 0; }
/* 参考記録の英語の欄のまとまり（管理画面のダイアログ） */
.records-en { margin: 16px 0 0; padding: 4px 16px 16px; border: 1px solid var(--separator); border-radius: var(--radius-inner); }
.records-en legend { padding: 0 6px; font-weight: 600; }
.records-en > .hint { margin-top: 0; }
input[type='text'], input[type='email'], input[type='password'], input[type='date'], input[type='number'], select, textarea {
  width: 100%; min-height: var(--tap); padding: 8px 12px;
  font: inherit; color: var(--label);
  background: var(--surface);
  border: 1px solid var(--field-edge); border-radius: 12px;
}
.view input[type='text'], .view input[type='email'], .view input[type='password'], .view input[type='date'], .view input[type='number'], .view select, .view textarea { background: var(--bg); border-color: var(--field-edge); }
textarea { min-height: 96px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--label-2); }
.unit-input { display: flex; align-items: center; gap: 8px; }
.unit-input > span { flex: none; white-space: nowrap; }
.unit-input input { font-family: var(--font-num); font-weight: 600; font-size: 1.25rem; }
.form-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* 知らせ（左の帯 + 文字。色だけにしない） */
.notice {
  position: relative; padding: 12px 16px 12px 20px;
  background: var(--surface); border-radius: var(--radius-inner); overflow: hidden;
}
.view .notice, .panel .notice { background: var(--fill); }
.notice::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--label-2); }
.notice-error::before { background: var(--bad); }
.notice-ok::before { background: var(--ok); }
.notice ul { margin: 8px 0 0; padding-left: 1.2em; }

/* 状態（アイコン + 文字） */
.status { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 0.875rem; }
.status-icon { font-weight: 700; }
.status-approved .status-icon { color: var(--ok); }
.status-rejected .status-icon { color: var(--bad); }

/* 信頼の印（アイコン + 文字） */
.trust-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--size-small); font-weight: 600; color: var(--ok); white-space: nowrap; }
.trust-badge .icon { width: 1.1em; height: 1.1em; }
/* 外れ値の警告を確認して登録した記録の印（アイコン + 文字。色だけにしない） */
.outlier-confirmed { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: var(--size-small); font-weight: 600; color: var(--label-2); }
.outlier-confirmed .icon { width: 1.1em; height: 1.1em; }
.chart-meta .icon { color: var(--label-2); }
.ledger .actions.actions-start { justify-content: flex-start; align-items: center; }

/* ── 推定（トップ画面） ─────────────────── */

.estimate { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .estimate { grid-template-columns: minmax(340px, 420px) 1fr; align-items: start; gap: 20px; }
  .estimate > .panel:first-child { position: sticky; top: 76px; }
}
.panel { padding: 20px; color: var(--label); background: var(--surface); border-radius: var(--radius-surface); }
.estimate > .panel { min-width: 0; }  /* 魚種のカードが多くても、1 列のときに面が横に広がらない */
.controls { display: flex; flex-wrap: wrap; gap: 8px; }

.length-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.length-head > label { font-weight: 600; color: var(--label); font-size: 1rem; }
input.length-input { width: 6.5em; text-align: right; }

/* 巻尺: 溝の上の目盛り。針はガラスのレンズ（中央に強調色の線） */
.ruler {
  position: relative; height: 92px; margin-top: 12px;
  background: var(--fill);
  color: var(--label);
  border-radius: var(--radius-inner);
  overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none;
}
.ruler:active { cursor: grabbing; }
.ruler:focus-visible { outline-offset: 3px; }
.ruler svg {
  position: relative; display: block; width: 100%; height: 100%;
  /* 目盛りの両端を消して、テープが続いて見えるようにする（フォーカスの枠を消さないよう svg にだけかける） */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--mask) 36px, var(--mask) calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, var(--mask) 36px, var(--mask) calc(100% - 36px), transparent 100%);
}
.ruler .tick { stroke: var(--label); stroke-width: 1.5; stroke-opacity: 0.75; }
.ruler .tick-label { fill: var(--label); font-family: var(--font-num); font-weight: 600; font-size: 15px; text-anchor: middle; }
/* 針: 目盛りの部分だけにかかる透明なガラスのレンズ（下の数字は隠さない） */
.ruler-needle {
  position: absolute; top: 5px; height: 50px; left: 50%; width: 40px; margin-left: -20px;
  border-radius: 999px; pointer-events: none;
  /* レンズ: ぼかさず、明るさとコントラストを持ち上げて下の目盛りを浮かび上がらせる */
  -webkit-backdrop-filter: saturate(180%) brightness(1.06) contrast(1.2);
  backdrop-filter: saturate(180%) brightness(1.06) contrast(1.2);
  background-color: var(--needle-fill);
  background-image: linear-gradient(180deg, var(--needle-sheen) 0%, transparent 35%);
  box-shadow:
    inset 0 1px 0 var(--glass-rim-top),
    inset 0 -1px 0 var(--glass-rim-bottom),
    inset 0 0 0 0.5px var(--glass-stroke),
    var(--needle-shadow);
}
.ruler-needle::before {
  content: ''; position: absolute; top: 7px; bottom: 7px; left: 50%; width: 3px; margin-left: -1.5px;
  border-radius: 2px; background: var(--tint);
}
/* 透明度を下げる設定では、レンズの半透明をやめる（不透明にすると下の目盛りが隠れるので、背景なしで縁だけ残す） */
@media (prefers-reduced-transparency: reduce) {
  .ruler-needle { -webkit-backdrop-filter: none; backdrop-filter: none; background: none; }
}
/* 針の真下の数字の位置を示す小さな印 */
.ruler-needle::after {
  content: ''; position: absolute; top: calc(100% + 4px); left: 50%; width: 6px; height: 6px; translate: -50% 0;
  border-radius: 50%; background: var(--tint);
}

.result { margin-top: 16px; }
.result-label { font-size: 0.9375rem; color: var(--label-2); }
.result-label .icon, .chart-title .icon { color: var(--tint); }
.result-weight { font-size: var(--size-hero); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.result-weight .unit { font-size: 0.32em; font-weight: 600; margin-left: 0.12em; letter-spacing: 0; color: var(--label-2); }
.result-range { margin-top: 8px; color: var(--label-2); }
.result-range .num { color: var(--label); }
.result-warning { margin-top: 12px; font-size: 0.875rem; }
.result-warning:empty { display: none; }
.result-warning .notice + .notice { margin-top: 8px; }

/* グラフ */
.chart-title { font-size: var(--size-head); }
.chart { position: relative; margin-top: 12px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--grid); }
.chart .axis text { fill: var(--label-2); font-size: 12px; font-family: var(--font-num); }
.chart .axis-title { fill: var(--label-2); font-size: 12px; }
.chart .band { fill: var(--band); }
.chart .curve { fill: none; stroke: url(#curve-gradient); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* 曲線のヒートマップ: 長さが小さい側から 青 → 青緑 → 緑 → 黄土 → オレンジ → 赤 */
.chart .heat-stop-1 { stop-color: var(--heat-1); }
.chart .heat-stop-2 { stop-color: var(--heat-2); }
.chart .heat-stop-3 { stop-color: var(--heat-3); }
.chart .heat-stop-4 { stop-color: var(--heat-4); }
.chart .heat-stop-5 { stop-color: var(--heat-5); }
.chart .heat-stop-6 { stop-color: var(--heat-6); }
@media (forced-colors: active) { .chart .curve { stroke: CanvasText; } }
.chart .dot { fill: var(--dot); stroke: var(--surface); stroke-width: 1.5; }
.chart .dot-active { stroke: var(--label); stroke-width: 2; }
.chart .now-line { stroke: var(--tint); stroke-width: 2; stroke-dasharray: 4 4; }
.chart .now-dot { fill: var(--tint); stroke: var(--surface); stroke-width: 2.5; }
.chart .now-label { fill: var(--label); font-size: 13px; font-weight: 700; }
.chart .now-label-bg { fill: var(--surface); }
/* 参考記録: データ点と形を変えた菱形（色だけに頼らない） */
.chart .record-mark { fill: var(--label); stroke: var(--surface); stroke-width: 2; }
.chart .record-label { fill: var(--label); font-size: 12px; font-weight: 700; }
.tooltip {
  position: absolute; top: 0; left: 0; pointer-events: none;
  padding: 8px 12px; font-size: 0.8125rem; line-height: 1.5; white-space: pre; /* 改行は生かし、折り返さない */
  color: var(--label); background-color: var(--glass-thick);
  border-radius: 12px;
}
.chart-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--size-small); color: var(--label-2); }
details > summary { cursor: pointer; min-height: var(--tap); display: inline-flex; align-items: center; color: var(--link); font-weight: 500; }
details[open] > summary { margin-bottom: 8px; }
.method { font-size: 0.875rem; max-width: 40em; }
.method p + p { margin-top: 8px; }
.records { margin-top: 16px; padding-top: 16px; border-top: 0.5px solid var(--separator); }
.records-title { font-size: 0.9375rem; margin-bottom: 8px; }
.records-title .icon { color: var(--tint); }
.record-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 16px; }
.record-title { font-weight: 600; }

/* ── 表（1 件 1 行） ─────────────────── */

.ledger-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--radius-inner); }
* + .ledger-wrap { margin-top: 16px; }
.view .ledger-wrap { background: var(--bg); }
.ledger { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.ledger th {
  text-align: left; font-weight: 600; font-size: var(--size-small); color: var(--label-2);
  padding: 8px 12px; border-bottom: 0.5px solid var(--separator); white-space: nowrap;
}
.ledger td { padding: 8px 12px; border-bottom: 0.5px solid var(--separator); vertical-align: top; white-space: nowrap; }
/* 文の長い列だけ折り返す */
.ledger td.wrap { white-space: normal; min-width: 11em; }
.ledger td.wrap-narrow { white-space: normal; min-width: 6em; }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger td.n { text-align: right; font-family: var(--font-num); font-weight: 600; white-space: nowrap; }
.ledger th.n { text-align: right; }
.ledger .row-note td { padding-top: 0; color: var(--label-2); font-size: 0.875rem; white-space: normal; }
.ledger .has-note td { border-bottom: 0; }
.ledger .actions { display: flex; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; }
/* 表の中は行が多いので、ボタンの浮いた影を短くして静かにする */
.ledger .btn { box-shadow: inset 0 1px 0 var(--glass-rim-top), inset 0 0 0 0.5px var(--glass-stroke), var(--shadow-control-flat); }
.ledger .check-suspicious { font-weight: 600; }
/* 表の中のチェックボックス: セル全体を label にして 44px 四方を押せるようにする */
.ledger td.check-cell { padding: 0; vertical-align: middle; }
.ledger td.check-cell label { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.ledger td.check-cell input { width: 20px; height: 20px; margin: 0; }
.empty { padding: 32px 0; color: var(--label-2); }

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 16px; }
.toolbar .field { min-width: 10em; }
.toolbar .field + .field { margin-top: 0; }

/* ── データの表（/data） ─────────────────
   絞り込みは不透明な面の中の溝（--fill）にまとめ、表は .ledger をそのまま使う */

.filter-details { margin-bottom: 16px; }
.table-filter { padding: 16px; background: var(--fill); border-radius: var(--radius-inner); }
/* 絞り込みの見出し: どの幅でも押して開け閉めする（押せる大きさは 44px） */
.filter-details > summary {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 4px;
  font-weight: 600; color: var(--tint); cursor: pointer;
}
.filter-details[open] > summary { margin-bottom: 8px; }
/* 開け閉めの印（閉じているときは下向き、開いているときは上向き） */
.filter-details > summary { list-style: none; gap: 8px; }
.filter-details > summary::-webkit-details-marker { display: none; }
.filter-details > summary::after {
  content: ''; width: 8px; height: 8px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg;
  transition: rotate 0.2s ease-out;
}
.filter-details[open] > summary::after { margin-top: 4px; rotate: -135deg; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 16px; }
.filter-grid > .field + .field { margin-top: 0; }
.range-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.range-field legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 0.9375rem; }
.range-inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.range-inputs input { min-width: 0; }
.range-inputs input[type='text'] { font-family: var(--font-num); font-weight: 600; }
.range-sep { color: var(--label-2); }
.table-filter .hint { margin-top: 12px; font-size: var(--size-small); color: var(--label-2); }
.table-filter .notice { margin-top: 12px; }
.table-filter .form-actions { margin-top: 16px; }
input[aria-invalid='true'], select[aria-invalid='true'] { border-color: var(--bad); border-width: 2px; }

.table-status { font-size: var(--size-small); font-weight: 600; color: var(--label-2); }
.table-status:empty { display: none; }
.data-table { min-width: 22rem; }
/* 並び替えできる見出し: ボタンが余白を持ち、セルいっぱいに広がる */
.data-table th:has(> .sort-button) { padding: 0; }
.sort-button {
  display: flex; align-items: center; gap: 4px; width: 100%; min-height: var(--tap); padding: 8px 12px;
  font: inherit; font-weight: 600; color: inherit; text-align: inherit;
  background: none; border: 0; cursor: pointer;
}
.data-table th.n .sort-button { justify-content: flex-end; }
.sort-button:hover { color: var(--label); }
.sort-mark { display: inline-block; width: 1em; text-align: center; }
th[aria-sort] .sort-button { color: var(--label); }
th[aria-sort='ascending'] .sort-mark::before { content: '↑'; }
th[aria-sort='descending'] .sort-mark::before { content: '↓'; }
.load-more-row { display: flex; justify-content: center; margin-top: 16px; }
.load-more-row:has(> [hidden]) { display: none; }
/* 読み込み中: disabled にするとフォーカスが外れるので aria-disabled で示し、見た目は disabled と同じにする */
.load-more[aria-disabled='true'] { opacity: 0.45; cursor: progress; scale: 1; }
.load-sentinel { height: 1px; }
.table-link { margin-top: 12px; font-weight: 600; }

/* 管理メニュー: 溝の上のつまみ（切り替えと同じ形） */
.subnav { position: relative; display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; margin-bottom: 24px; width: fit-content; max-width: 100%; background: var(--fill); border-radius: 22px; }
.subnav a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px;
  color: var(--label); text-decoration: none; font-size: 0.875rem; font-weight: 500;
  border-radius: 999px;
}
.subnav a:hover { text-decoration: none; }
/* 言語の切り替え: 送信の途中で押したときは、終わるまで押せないことを見せる */
.lang-switch[aria-disabled='true'] { opacity: 0.5; cursor: progress; }
/* 幅が足りないときは横スクロールにせず、全体が見えるように 3 列 × 2 段にそろえて並べる */
@media (max-width: 999px) {
  .subnav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: 20px; }
  .subnav a { justify-content: center; text-align: center; }
}
/* スマホではアイコンを上、名前（と件数）を下にする。長い名前は文節（英語は単語）で 2 行に折り返す */
@media (max-width: 600px) {
  .subnav a {
    display: grid; grid-template-columns: minmax(0, auto) auto; justify-content: center; align-content: center;
    column-gap: 4px; row-gap: 2px; min-height: 56px; padding: 6px 4px;
    font-size: 0.75rem; line-height: 1.25; border-radius: 16px;
    word-break: auto-phrase; text-wrap: balance;
  }
  .subnav a .icon { grid-column: 1 / -1; justify-self: center; }
}
.subnav a[aria-current='page'] {
  font-weight: 700; background-color: var(--glass-thick);
  box-shadow: inset 0 1px 0 var(--glass-rim-top), inset 0 0 0 0.5px var(--glass-stroke), var(--shadow-tab);
}
.count { font-family: var(--font-num); font-weight: 600; }

/* ダイアログ（ブラウザ標準の固定配置のまま。見た目は末尾のダッシュボードの節で不透明なカードにしている） */
dialog {
  padding: 24px; color: var(--label); background-color: var(--glass-thick);
  border-radius: var(--radius-surface);
  max-width: min(36em, calc(100vw - 32px)); width: 100%;
  -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
}
dialog::backdrop { background: var(--backdrop); }
@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: sheet-in 0.4s var(--spring) both; }
}
@keyframes sheet-in { from { scale: 0.94; opacity: 0; } }

.masters { display: grid; gap: 32px; }
@media (min-width: 768px) { .masters { grid-template-columns: 1fr 1fr; } }
.plain-list { list-style: none; margin: 8px 0 16px; padding: 0; }
.plain-list li { padding: 8px 0; border-bottom: 0.5px solid var(--separator); }
.master-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.master-name { flex: 1; min-width: 6em; }
.visibility { font-size: var(--size-small); font-weight: 600; white-space: nowrap; }
.visibility.is-visible { color: var(--ok); }
.visibility.is-hidden { color: var(--label-2); }
.visibility.is-visible::before { content: '● '; }
.visibility.is-hidden::before { content: '○ '; }
.master-item > div { flex-basis: 100%; }
/* 海域: 記録の件数、削除できない理由、名前を変える入力欄 */
.master-count { font-size: var(--size-small); color: var(--label-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.master-note { flex-basis: 100%; margin: 0; }
.master-edit { flex-basis: 100%; flex-wrap: wrap; }
.master-edit input { min-width: 10em; }
/* 魚種・海域の英語名: 日本語名の下に出す。入力欄はラベルつきで横に並べ、狭い画面では折り返す */
.master-name-en { display: block; }
.master-add { flex-wrap: wrap; align-items: flex-end; }
.master-edit { align-items: flex-end; }
.master-edit .field, .master-add .field { flex: 1 1 12em; margin-top: 0; }
/* 魚種の画像（管理画面のサムネイル） */
.species-thumb {
  display: grid; place-items: center; flex: none;
  width: 64px; height: 48px; overflow: hidden;
  border-radius: 10px; background: var(--fill);
}
.species-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.species-thumb-none { font-size: 0.6875rem; color: var(--label-2); white-space: nowrap; }
.species-image-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; }

/* ハイコントラストモード: ガラスの縁や背景色で示している状態を、枠でも示す */
@media (forced-colors: active) {
  .tabs, .account, .btn, .segmented, dialog, .length-help { border: 1px solid CanvasText; }
  .segmented button[aria-pressed='true'], .tabs a[aria-current='page'], .subnav a[aria-current='page'] { outline: 2px solid Highlight; }
  .species-card { border: 1px solid CanvasText; }
  .species-card[aria-pressed='true'] { outline: 3px solid Highlight; outline-offset: -3px; }
  .ruler-needle::before { background: Highlight; }
}

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

/* ── ダッシュボードのデザイン（全画面共通） ──────────
   明るい灰色の地に、緑・オレンジ・青のぼかしの光。白い角丸のカード、メニューと主ボタンは黒いカプセル。
   推定画面だけの部品（入力のカード・推定重さ・数値のカード・下の黒い帯）は body[data-page='estimate'] の中だけ */
:root {
  --dash-bg: #ededeb;
  --dash-card: #ffffff;
  --dash-ink: #141414;            /* 選択中のメニュー・黒いバッジ */
  --dash-on-ink: #f7f7f5;
  --dash-band: #0c0c0d;           /* 下の黒い帯 */
  --dash-band-card: #1b1b1d;
  --dash-band-text: #ececec;
  --dash-band-text-2: #a4a4a8;
  --dash-glow-green: rgba(126, 196, 120, 0.38);
  --dash-glow-orange: rgba(244, 168, 82, 0.36);
  --dash-glow-blue: rgba(122, 150, 230, 0.30);
  --dash-line: rgba(20, 20, 20, 0.10);
  --dash-btn-line: rgba(20, 20, 20, 0.22);  /* ボタンの輪郭（白いカードの上でも押せるものとわかる濃さ） */
  --dash-spark-base: rgba(20, 20, 20, 0.35);
  --dash-spark-green: #3f9a4a;
  --dash-spark-blue: #2f63d6;
  --dash-radius: 28px;
  --dash-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  --dash-band-row: rgba(255, 255, 255, 0.05);
  --dash-band-link: #8ab4ff;     /* 黒い帯の上のリンク（#1b1b1d の上で 8:1 以上） */
  /* 推定重さのカードの絹の波（黒いカード）。光沢が最も強い所でも白い文字と 4.5:1 以上 */
  --silk-1: #0a1626;
  --silk-2: #123456;
  --silk-3: #1d5878;
  --silk-sheen: #ffffff;
  --silk-sheen-strength: 0.12;
  /* グラフのカードの絹の波（白い版）。灰色を抜いた澄んだ白〜淡い空色に、強めの白い光沢（透明感を出す） */
  --silk-chart-1: #ffffff;
  --silk-chart-2: #f5faff;
  --silk-chart-3: #e8f2ff;
  --silk-chart-sheen: #ffffff;
  --silk-chart-sheen-strength: 0.85;
  /* グラフのカードは少し透ける白（後ろのぼかしの光がうっすら見える、すりガラス） */
  --silk-chart-glass: rgba(255, 255, 255, 0.55);
  --silk-chart-glass-filter: blur(24px) saturate(160%);
  --silk-chart-canvas-opacity: 0.7;
  /* 下の帯（計算方法・参考記録）の絹の波: 黒から濃い青へ。ライト・ダークとも同じ（帯はいつも黒い）。
     光沢が最も強い所にすりガラスと行の面を重ねても、帯の文字（補足・リンクを含む）が 4.5:1 以上になる濃さ */
  --silk-band-1: #010307;
  --silk-band-2: #071d3b;
  --silk-band-3: #0c3366;
  --silk-band-sheen: #3d7fd0;
  --silk-band-sheen-strength: 0.15;
  /* 帯の中のカード: 少し透ける面 + 後ろのぼかし（すりガラス） */
  --band-glass: rgba(255, 255, 255, 0.05);
  --band-glass-stroke: rgba(255, 255, 255, 0.1);
  --band-glass-filter: blur(20px) saturate(140%);
  /* 波の上でも 4.5:1 以上になる、帯の中の補足の文字・リンク・行の面 */
  --band-text-2: #c8ccd4;
  --band-link: #9cc3ff;
  --band-row: rgba(255, 255, 255, 0.04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --dash-bg: #0e0f11;
    --dash-card: #1c1c1e;
    --dash-ink: #f2f2f0;
    --dash-on-ink: #121212;
    --dash-band: #050506;
    --dash-band-card: #161618;
    --dash-glow-green: rgba(90, 160, 90, 0.22);
    --dash-glow-orange: rgba(220, 140, 60, 0.20);
    --dash-glow-blue: rgba(90, 120, 210, 0.22);
    --dash-line: rgba(255, 255, 255, 0.10);
    --dash-btn-line: rgba(255, 255, 255, 0.24);
    --dash-spark-base: rgba(255, 255, 255, 0.40);
    --dash-spark-green: #6cc777;
    --dash-spark-blue: #7fa6ff;
    /* ダークでは推定重さのカードが白いので、淡い色の波（黒い文字と 12:1 以上） */
    --silk-1: #eef3f8;
    --silk-2: #dbe7f2;
    --silk-3: #c4d7e9;
    --silk-sheen: #ffffff;
    --silk-sheen-strength: 0.35;
    /* ダークのグラフのカードは暗い面に、ごく淡い波 */
    --silk-chart-1: #1c1c1e;
    --silk-chart-2: #1f2329;
    --silk-chart-3: #252c36;
    --silk-chart-sheen: #3a4656;
    --silk-chart-sheen-strength: 0.35;
    --silk-chart-glass: rgba(28, 28, 30, 0.6);
  }
}
/* 透明度を下げる設定・ぼかしに対応しないブラウザでは、グラフのカードを不透明に（色の変数を決めた後ろに置く）。
   ダークの定義（:root:not([data-theme='light'])）と同じ詳細度にするため :root:root と書く */
@media (prefers-reduced-transparency: reduce) {
  :root:root { --silk-chart-glass: var(--dash-card); --silk-chart-glass-filter: none; --silk-chart-canvas-opacity: 1; }
  :root:root { --band-glass: var(--dash-band-card); --band-glass-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:root { --silk-chart-glass: var(--dash-card); --silk-chart-glass-filter: none; --silk-chart-canvas-opacity: 1; }
  :root:root { --band-glass: var(--dash-band-card); --band-glass-filter: none; }
}

body {
  background-color: var(--dash-bg);
  background-image:
    radial-gradient(38% 46% at 16% 26%, var(--dash-glow-green), transparent 70%),
    radial-gradient(34% 42% at 40% 36%, var(--dash-glow-orange), transparent 70%),
    radial-gradient(40% 40% at 0% 100%, var(--dash-glow-blue), transparent 70%);
  background-attachment: fixed;
}
/* ヘッダーの上端: スクロールした内容がロゴと重ならないよう、地の色で上端をぼかして隠す */
body .site-header::before {
  background: linear-gradient(180deg, var(--dash-bg) 0%, color-mix(in srgb, var(--dash-bg) 80%, transparent) 55%, transparent 100%);
}
/* ダッシュボードは幅を広く使う（ヘッダー・メニュー・本文の左右の端をそろえる） */
body { --page-max: 1280px; }

/* メニュー: 白いカプセルが並び、選択中だけ黒 */
body .tabs {
  gap: 8px; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: none; box-shadow: none;
}
body .tabs a {
  background: var(--dash-card); color: var(--label);
  box-shadow: inset 0 0 0 1px var(--dash-line);
}
body .tabs a[aria-current='page'] {
  color: var(--dash-on-ink); background: var(--dash-ink); box-shadow: none;
}
body .tabs a:hover:not([aria-current='page']) { background: var(--dash-card); box-shadow: inset 0 0 0 1px var(--dash-spark-base); }
body .account {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--dash-card); box-shadow: inset 0 0 0 1px var(--dash-line);
}
@media (max-width: 1099px) {
  /* スマホ: 画面下のメニューは白い台の上に並べる（下の内容と重なっても読めるように） */
  body .tabs {
    padding: 4px; gap: 4px; background: var(--dash-card); box-shadow: var(--dash-menu-shadow);
  }
  body .tabs a { box-shadow: none; }
}

/* 配置 */
.dash { display: grid; gap: 16px; }
/* 前のデザインの .estimate の 2 列（900px 以上）を打ち消し、1000px までは 1 列 */
body[data-page='estimate'] .estimate.dash { grid-template-columns: minmax(0, 1fr); }
.dash-hero, .dash-side { display: grid; gap: 16px; min-width: 0; align-content: start; }
@media (min-width: 1000px) {
  body[data-page='estimate'] .estimate.dash { grid-template-columns: minmax(360px, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
  .dash-controls, .dash-chart, .dash-band { grid-column: 1 / -1; }
  /* 推定重さのカードは、隣の数値のカード（2 × 2）と同じ高さまで伸ばす */
  .dash-hero { align-self: stretch; grid-template-rows: minmax(0, 1fr); }
}

/* 見出し */

/* 推定重さ: いちばん大事な結果。黒い（ダークでは白い）カードに、細い字のいちばん大きな数字 */
body[data-page='estimate'] .weight-card {
  position: relative; isolation: isolate;
  margin: 0; padding: 28px 32px 32px;
  color: var(--dash-on-ink); border-radius: var(--dash-radius);
  /* WebGL が使えない端末・描く前は、同じ色のグラデーションを見せる */
  background: linear-gradient(135deg, var(--silk-1), var(--silk-2) 60%, var(--silk-3));
}
/* グラフのカードの波: 文字・グラフの後ろに敷く（描く前・WebGL がなければ同じ色のグラデーション） */
body[data-page='estimate'] .silk-panel {
  position: relative; isolation: isolate;
  /* 少し透ける面 + 後ろのぼかし（すりガラス）。その上に、少し透かした波を重ねて透明感を出す */
  color: var(--label); background: var(--silk-chart-glass);
  -webkit-backdrop-filter: var(--silk-chart-glass-filter); backdrop-filter: var(--silk-chart-glass-filter);
}
body[data-page='estimate'] .silk-panel .silk-canvas { opacity: var(--silk-chart-canvas-opacity); }
/* 絹の波の canvas はカードいっぱいに、文字の後ろに敷く */
.silk-canvas { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; border-radius: inherit; }
body[data-page='estimate'] .weight-card .result-label { margin: 0; font-size: 1rem; font-weight: 600; color: inherit; }
body[data-page='estimate'] .weight-card .result-label .icon { color: inherit; }
body[data-page='estimate'] .weight-card .result-weight {
  margin: 12px 0 0; font-size: clamp(3rem, 16vw, 9rem); font-weight: 300; letter-spacing: -0.045em; line-height: 0.95; overflow-wrap: anywhere;
}
body[data-page='estimate'] .weight-card .result-weight .unit { font-size: 2rem; font-weight: 400; letter-spacing: 0; margin-left: 8px; color: inherit; }
body[data-page='estimate'] .weight-card .result-range { margin: 16px 0 0; font-size: 1rem; color: inherit; }
body[data-page='estimate'] .weight-card .result-range .num { color: inherit; font-weight: 700; }
/* 注意文は半透明の面だと下の波に埋もれるので、不透明な面に通常の文字色で出す */
body[data-page='estimate'] .weight-card .notice { margin-top: 16px; padding-left: 16px; color: var(--label); background: var(--dash-card); }
/* 推定重さのカードの中の注意（データの範囲の外など）は、左の縦線を付けない */
body[data-page='estimate'] .weight-card .notice::before { display: none; }
body[data-page='estimate'] .weight-card .muted { color: inherit; }
@media (max-width: 420px) { body[data-page='estimate'] .weight-card { padding: 20px 20px 24px; } }

/* カード（操作・グラフ・数値、推定以外の画面の 1 枚の面） */
body .panel,
body .view:not(.view-bare) {
  color: var(--label); background: var(--dash-card); border-radius: var(--dash-radius); padding: 24px;
  box-shadow: inset 0 0 0 1px var(--dash-line);
}

body .view:not(.view-bare) { padding: 28px; }
@media (max-width: 420px) { body .view:not(.view-bare) { padding: 20px; } }

/* ボタン: ガラスをやめ、白いカプセル（線あり）。主ボタンはメニューの選択中と同じ黒いカプセル */
body .btn {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background-color: var(--dash-card); background-image: none;
  box-shadow: inset 0 0 0 1px var(--dash-btn-line);
}
/* 表の中のボタンも同じ（古いガラスの縁と影を残さない） */
body .ledger .btn { box-shadow: inset 0 0 0 1px var(--dash-btn-line); }
body .ledger .btn-primary { box-shadow: none; }
body .btn:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--dash-spark-base); }
body .btn-primary { color: var(--dash-on-ink); background-color: var(--dash-ink); box-shadow: none; }
body .btn-primary:hover:not(:disabled) { box-shadow: none; }
body .btn-danger { color: var(--bad); }
body .btn-link, body .btn-link:hover:not(:disabled) { background: none; box-shadow: none; }

/* 切り替え（信頼できる / すべて など）と管理メニュー: 選ばれているものは黒いカプセル */
body .segmented button[aria-pressed='true'],
body .subnav a[aria-current='page'] {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--dash-on-ink); background-color: var(--dash-ink); background-image: none; box-shadow: none;
}
body .subnav a[aria-current='page'] .icon { color: inherit; }

/* ダイアログ: 不透明な白いカード */
body dialog {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background-color: var(--dash-card); background-image: none; border-radius: var(--dash-radius);
  box-shadow: inset 0 0 0 1px var(--dash-line), var(--dash-menu-shadow);
}

/* 数値のカード: 2 列。細い字の大きな数字と、点線の小さな図 */
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kpi {
  display: grid; gap: 12px; align-content: space-between; min-width: 0; min-height: 152px;
  padding: 20px 24px; color: var(--label);
  background: var(--dash-card); border-radius: var(--dash-radius); box-shadow: inset 0 0 0 1px var(--dash-line);
}
.kpi-title { margin: 0; font-size: 0.9375rem; font-weight: 500; }
.kpi-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-width: 0; }
.kpi-value { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; }
.kpi-value .unit { font-size: 1rem; font-weight: 400; letter-spacing: 0; margin-left: 4px; color: var(--label-2); }
.kpi-note { margin: 0; font-size: var(--size-small); color: var(--label-2); }
.kpi-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; color: var(--dash-on-ink); background: var(--dash-ink);
}
@media (max-width: 420px) {
  .kpi { min-height: 0; padding: 16px; }
}
.spark { width: 100%; max-width: 120px; height: 28px; flex: 0 1 120px; }
.spark-base { stroke: var(--dash-spark-base); stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; }
.spark-band { stroke-width: 3; stroke-linecap: round; }
.spark-dot { stroke: var(--dash-card); stroke-width: 2; }
.spark-length .spark-band { stroke: var(--dash-spark-green); }
.spark-length .spark-dot { fill: var(--label); }
.spark-range .spark-band { stroke: var(--dash-spark-blue); }
.spark-range .spark-dot { fill: var(--dash-spark-blue); }

/* 下の黒い帯 */
/* 下の帯: 絹の波（黒〜濃い青）を敷き、計算方法・参考記録のカードはすりガラスにして波を透かす。
   描く前・WebGL がなければ同じ色のグラデーション */
.dash-band {
  position: relative; isolation: isolate;
  display: grid; gap: 16px; padding: 24px;
  /* 波の上でも 4.5:1 以上になるよう、補足の文字・リンク・行の面を帯の中だけ差し替える */
  --dash-band-text-2: var(--band-text-2); --dash-band-link: var(--band-link); --dash-band-row: var(--band-row);
  color: var(--dash-band-text); border-radius: 32px;
  background: linear-gradient(135deg, var(--silk-band-1), var(--silk-band-2) 55%, var(--silk-band-3));
}
@media (min-width: 900px) { .dash-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 32px; } }
.band-card {
  min-width: 0; padding: 20px 24px; color: var(--dash-band-text); border-radius: 24px;
  background: var(--band-glass); box-shadow: inset 0 0 0 1px var(--band-glass-stroke);
  -webkit-backdrop-filter: var(--band-glass-filter); backdrop-filter: var(--band-glass-filter);
}
.dash-band a { color: var(--dash-band-link); }
.dash-band .muted, .dash-band .small.muted { color: var(--dash-band-text-2); }
.dash-band .method { margin: 0; }
.dash-band .method summary { color: var(--dash-band-text); }
.dash-band .records { margin: 0; padding: 0; border: 0; }
.dash-band .records-title, .dash-band .record-title { color: var(--dash-band-text); }
.dash-band .record-list li { padding: 12px 16px; border-radius: 16px; background: var(--dash-band-row); }

/* 入力のカード（一番上）: 魚種・長さの種類・長さを小さくまとめる。PC では横 1 段 */
body[data-page='estimate'] .dash-controls { padding: 16px 20px; display: grid; gap: 16px; }
@media (min-width: 1000px) {
  /* カードの並びは自分の幅を持たない（contain: inline-size）ので、列の幅は決めておく。
     横 1 段に並べた幅にし、パネルの 60% を超えるときは 60% で止める（長さの種類が下の段に回り、長さの欄が潰れない） */
  body[data-page='estimate'] .dash-controls {
    grid-template-columns: min(60%, calc(var(--species-w) + var(--pick-gap) + var(--length-w))) minmax(0, 1fr);
    align-items: start; gap: 40px;
  }
}
.dash-length { display: grid; gap: 8px; min-width: 0; }
/* 選択肢のまとまりの見出し（魚種・推定に使うデータ）。「長さの種類」の見出しと同じ形 */
/* 中のカードの並びは自分の幅を持たない（contain: inline-size）ので、入れ物は親の幅いっぱいにする */
.picker-field { display: grid; gap: 8px; width: 100%; min-width: 0; }
.scope-field { display: grid; gap: 8px; min-width: 0; justify-items: start; }
/* 切り替え（信頼できる / すべて）は中身の幅にする（入れ物いっぱいに溝を伸ばさない） */
.picker-field > .segmented { justify-self: start; width: fit-content; max-width: 100%; }
.picker-field .picker-title { display: flex; align-items: center; min-height: 20px; }
/* 魚種と長さの種類は横に並べ、カードは同じ大きさ（画像の枠はどちらも 3:2） */
body[data-page='estimate'] .dash-controls { --pick-card: 72px; --pick-gap: 16px; }
@media (max-width: 420px) { body[data-page='estimate'] .dash-controls { --pick-card: 64px; --pick-gap: 12px; } }
@media (min-width: 600px) { body[data-page='estimate'] .dash-controls { --pick-card: 88px; } }
/* 英語の画面のスマホ幅: 魚種の英語名（Yellowtail など）が単語の途中で切れないよう、カードを少し広げる */
@media (max-width: 599px) { :root[lang='en'] body[data-page='estimate'] .dash-controls { --pick-card: 76px; } }
@media (max-width: 420px) { :root[lang='en'] body[data-page='estimate'] .dash-controls { --pick-card: 72px; } }
/* 幅 = カードの枚数 × 幅 + 間 8px + 並びの左右の余白 8px ずつ。魚種は魚種の数ぶん、長さの種類は 2 枚ぶん。
   横に並びきらないときは長さの種類が下の段に回る（重ならない）。魚種だけでも入らない幅では、魚種の並びが縮んで横スクロール */
body[data-page='estimate'] .dash-controls {
  --species-w: calc(var(--pick-card) * var(--species-count, 2) + (var(--species-count, 2) - 1) * 8px + 16px);
  --length-w: calc(var(--pick-card) * 2 + 24px);
}
body[data-page='estimate'] .dash-controls .controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--pick-gap); }
body[data-page='estimate'] .dash-controls .controls > .picker-field { flex: 0 1 var(--species-w); max-width: 100%; }
body[data-page='estimate'] .dash-controls .controls > .length-field { flex: 0 0 var(--length-w); width: auto; }
body[data-page='estimate'] .dash-controls .controls > .scope-field { flex: 1 0 100%; }
body[data-page='estimate'] .dash-controls .species-card,
body[data-page='estimate'] .dash-controls .length-card { width: var(--pick-card); gap: 4px; padding: 4px; font-size: 0.75rem; }
body[data-page='estimate'] .dash-controls .length-card-media { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 2px; }
body[data-page='estimate'] .dash-controls .length-card-media .length-diagram { width: 100%; height: 100%; }
body[data-page='estimate'] .dash-controls .picker-title { font-size: 0.75rem; }
body[data-page='estimate'] .dash-controls .length-head { margin-top: 0; }
body[data-page='estimate'] .dash-controls .length-head > label { font-size: 0.875rem; }
/* 長さの指定のしかた: 計算方法・参考記録の帯と同じ背景（黒〜濃い青のグラデーション）の小さな吹き出しにして、
   先を 2 つ出す（右上の入力欄と、下のメジャーの針を指す）。幅は文字の長さに合わせて右に寄せる */
/* 下の先の位置を長さの欄の幅から決めるため、長さの欄を幅の基準（コンテナ）にする */
body[data-page='estimate'] .dash-controls .dash-length { container-type: inline-size; }
body[data-page='estimate'] .dash-controls .length-hint {
  --bubble-tip: 10px;
  /* 入力欄の真ん中の、右端からの位置（入力欄の幅 6.5em は文字 1rem 基準、「cm」と間 8px のぶんを足す） */
  --bubble-input-x: calc(1rem * 6.5 / 2 + 8px + 1.4rem);
  position: relative; justify-self: end; width: fit-content; max-width: 100%;
  margin: 7px 0 6px; padding: 6px 11px;
  font-size: 0.75rem; line-height: 1.45; color: var(--dash-band-text);
  background: linear-gradient(135deg, var(--silk-band-1), var(--silk-band-2) 55%, var(--silk-band-3));
  border-radius: 10px;
}
/* 先: 正方形を 45 度回し、外に出る三角だけを残す。色はグラデーションのその位置の色に合わせる */
body[data-page='estimate'] .dash-controls .length-hint::before,
body[data-page='estimate'] .dash-controls .length-hint::after {
  content: ''; position: absolute; width: var(--bubble-tip); height: var(--bubble-tip); rotate: 45deg;
}
/* 上の先: 入力欄を指す（右上なので、紺と濃い青の間の色） */
body[data-page='estimate'] .dash-controls .length-hint::before {
  top: calc(var(--bubble-tip) / -2); right: calc(var(--bubble-input-x) - var(--bubble-tip) / 2);
  background: color-mix(in srgb, var(--silk-band-2) 60%, var(--silk-band-3)); clip-path: polygon(0 0, 100% 0, 0 100%);
}
/* 下の先: メジャーの真ん中（針）を指す（下の真ん中なので紺）。吹き出しは右に寄せているので、右端から長さの欄の半分（50cqw）の位置 */
body[data-page='estimate'] .dash-controls .length-hint::after {
  bottom: calc(var(--bubble-tip) / -2); right: calc(50cqw - var(--bubble-tip) / 2);
  background: var(--silk-band-2); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
@media (forced-colors: active) {
  body[data-page='estimate'] .dash-controls .length-hint { color: CanvasText; background: Canvas; border: 1px solid CanvasText; }
  body[data-page='estimate'] .dash-controls .length-hint::before,
  body[data-page='estimate'] .dash-controls .length-hint::after { display: none; }
}
body[data-page='estimate'] .dash-controls input.length-input { min-height: 36px; padding: 4px 12px; font-size: 1rem; }
body[data-page='estimate'] .dash-controls .ruler { height: 64px; margin-top: 0; }
body[data-page='estimate'] .dash-controls .ruler .tick-label { font-size: 12px; }
body[data-page='estimate'] .dash-controls .ruler-needle { top: 4px; height: 36px; }

/* ハイコントラストモード: 絹の波は文字色の強制と合わないので隠し、標準の色と枠で出す */
@media (forced-colors: active) {
  .silk-canvas { display: none; }
  body[data-page='estimate'] .weight-card,
  body[data-page='estimate'] .silk-panel,
  .dash-band, .band-card { color: CanvasText; background: Canvas; border: 1px solid CanvasText; }
}