/*
  デザインの土台（トークン）。設計書 6 章。
  ・色・文字・余白・角・押す的・動きの値は、ここだけに書く。ほかの css は変数だけを使う（直書きしない。ui-design 16-6.11）。
  ・明るい表示と暗い表示は <html data-theme="light|dark"> で切り替える（js/shell/theme.js が設定と端末の設定から決める）。
  ・コントラストは WCAG 2 の式で測った値を設計書 6.1 に残した。値を変えたら測り直して設計書も直す。
  ・強調の色は <html data-accent="blue|sumi|daidai">（最初は青＝iOS の標準）。フォーカスは紫で、強調とも危険とも違う系統（16-6.4）。
  ・土台は Apple の作法（設計書 15 章）: 文字の段は Dynamic Type の段（本文 17px）、行はグループの面にまとめる、
    地は灰の面に白い行（明るい表示）。ui-design の基準とぶつかる所は基準を優先した（暗い表示の地を真っ黒にしない、
    控えめの字を 4.5:1 以上にする、など）。
  ・値は「Apple の UI/UX のすべて」の報告書（2026-11-02 21:47）の第3部の早見表と 3-15 に合わせた（第2版）。色は
    高齢の家族のため Apple の「コントラストを上げる」の値を既定にした。字に使うと地によって 4.5:1 に届かない色は、
    同じ色相のまま濃くした「字の色」（--accent・--danger）と、塗りの色（--accent-fill・--danger-fill）に分けた。
  ・変数の名前は第1版から変えていない（足しただけ）。次の段の担当の画面はそのまま動く。
*/

:root {
  /* ---- 文字の段（設計書 6.3。Dynamic Type の段に合わせた）。
     rem は <html> の文字の大きさ（17px。iPhone は端末の文字の大きさの設定〔-apple-system-body〕に追う。kit.css）。
     --fs はアプリの中の文字の大きさの設定（js/shell/theme.js）: 小 0.941（Medium）／標準 1（Large）／大 1.118（xLarge）／
     特大 1.353（xxxLarge）／最大 1.941（AX2）。Apple の段の Body の比（報告書 3-2）。 ---- */
  --fs: 1;
  /* iOS の Dynamic Type の既定（Large）の段: Large Title 34／Title 1 28／Title 2 22／Title 3 20／Headline 17（600）／
     Body 17／Callout 16／Subheadline 15／Footnote 13／Caption 1 12。Caption 2（11）と下の帯の 10 は 12px 未満なので使わない（ui-design 16-5.5） */
  --fs-largetitle: calc(2rem * var(--fs)); /* 根の画面の大きな見出し（Large Title。太さ 700） */
  --fs-display: calc(1.647rem * var(--fs));    /* 読む画面のメモの題（Title 1） */
  --fs-title: calc(1.294rem * var(--fs));      /* 本文の中の見出し（Title 2） */
  --fs-headline: calc(1rem * var(--fs));   /* 帯の題・窓の題・行の題（Headline。太さ 600） */
  --fs-body: calc(1rem * var(--fs));       /* 本文・入力欄・ボタン（Body） */
  --fs-small: calc(0.882rem * var(--fs));      /* 冒頭の文・日時・札（Subheadline） */
  --fs-footnote: calc(0.765rem * var(--fs));   /* 小見出し（Footnote） */
  --fs-caption: calc(0.706rem * var(--fs));    /* 下の帯の言葉（Caption 1） */
  /* 行の高さ: 一行の部品は iOS の値（Body 22/17）。日本語の何行も続く文章は Apple の 17/25（1.47）に最も近い
     ui-design 16-5.6 の下限 1.5（17px で 25.5px）を最初の値にした */
  --lh-body: 1.5;      /* 文章。行の間隔の設定で 1.5（ふつう）／1.7（広め）／1.9（もっと広め） */
  --lh-small: 1.5;     /* 冒頭の文などの短い文章（Subhead 20/15 は日本語の何行もの文章には狭いので 1.5） */
  --lh-ui: 1.294;      /* 一行の部品（Body・Headline 22/17） */
  --lh-title: 1.206;   /* 大きな見出し（Large Title 41/34） */
  /* 字間（報告書 3-2 の Large の段。単位は px、本文は 3-15 の -0.022em） */
  --ls-largetitle: 0.40px;
  --ls-display: 0.38px;    /* Title 1 */
  --ls-title: -0.26px;     /* Title 2 */
  --ls-headline: -0.43px;  /* Headline・Body の一行の部品 */
  --ls-note-body: -0.022em; /* 何行も続く本文 */
  --ls-small: -0.23px;     /* Subhead */
  --ls-footnote: -0.08px;
  --ls-caption: 0px;
  --fw-normal: 400;    /* 字の太さの設定「はっきり」で 500／700 */
  --fw-bold: 600;
  --fw-heavy: 700;
  --font: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", Roboto, sans-serif; /* 報告書 2-11 */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;

  /* ---- 余白の段（4／8／12／16／24／32／48 だけ。16-5.2） ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --gutter: var(--sp-4);   /* 画面の左右（グループの面の外側） */
  --cell-x: var(--sp-4);   /* グループの面の中の行の左右 */
  --row-pad: var(--sp-3);  /* 行の上下の余白。一覧の詰まり具合の設定で 16／12／8 */
  --group-gap: var(--sp-6); /* グループの面と面の間（iOS 13〜18 の 35 を余白の段の 32 に） */

  /* ---- 角 ---- */
  --r-s: 6px;      /* 札の中の小物 */
  --r-m: 10px;     /* 入力欄・探す欄（報告書 3-5） */
  --r-group: 26px; /* inset grouped の面の角（iOS 26 の実測。1行だけの面はほぼ丸になる） */
  --r-btn: 999px;  /* ボタンは丸い端（capsule。報告書 3-6） */
  --r-alert: 14px; /* 中央の窓・お知らせ */
  --r-l: 12px;     /* 全体の高さの窓の上の角（報告書 3-7 の勧め） */
  --r-sheet-float: 32px; /* 中くらいの窓（浮かせて置く）の角 */
  --sheet-gap: 8px;      /* 中くらいの窓の左右と下の隙間 */
  --r-pill: 999px;

  /* ---- 押す的（16-4.6） ---- */
  --hit: 48px;        /* よく押す物（ui-design 16-4.6） */
  --hit-min: 44px;    /* iOS の 44pt */
  --btn-h: 50px;      /* 大きいボタン（iOS の large） */
  --cell-h: 52px;     /* 一行の行の最小の高さ（iOS 26 の実測。文字の大きさで伸びる） */
  --hit-gap: 8px;

  /* ---- 帯の高さ ---- */
  --bar-h: 44px;      /* 上の帯（iOS のナビゲーションバー） */
  --tab-h: 50px;      /* 下の帯（iOS のタブバー 49 に言葉 12px の分 1 を足した） */
  --large-h: 52px;    /* 大きな見出しの区域（帯と合わせて 96） */
  --grabber-w: 36px;  /* 窓のつまみ（36×5、角 2.5、上から 5） */
  --grabber-h: 5px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* ---- 動き（報告書 3-11。ばねを linear() に写した曲線。長さはばねが 0.2% 以内に収まるまで） ---- */
  /* 作者の決定（11/02 夜）「にゅって出てくるのがちょっとだけとろい。もうちょいスッと」: ばねの曲線の形（弾まない）はそのままに、
     長さを 0.3 秒前後に縮めた（前は 674ms・539ms・642ms） */
  --dur-1: 120ms;     /* 押した返事: 押した瞬間に変え（0ms）、離したらこの長さで戻す */
  --dur-2: 350ms;     /* 小さな部品: 中央の窓・お知らせ・スイッチ・背景の膜 */
  --dur-3: 450ms;     /* 画面の移動と窓（弾まない） */
  --ease: linear(0, 0.099, 0.286, 0.471, 0.625, 0.742, 0.826, 0.884, 0.924, 0.951, 0.968, 0.98, 0.987, 0.992, 0.995, 0.997, 1);
  --ease-snappy: linear(0, 0.099, 0.286, 0.471, 0.625, 0.742, 0.826, 0.884, 0.924, 0.951, 0.968, 0.98, 0.987, 0.992, 0.995, 0.997, 1); /* 弾まない（前は少し行き過ぎる snappy） */
  --dur-snappy: 400ms; /* 指で払って閉じる・行を滑らせて戻すとき */
  --dur-sheet: 350ms; /* 下から出る窓（作者の決定 11/03「下からのにゅがもっさり」: 動く距離が長く 450ms では遅く見えるため窓だけ縮めた） */

  /* ---- 本文の幅（広い画面。約40字） ---- */
  --measure: calc(40em + 2 * var(--gutter));
}

/* ---------- 暗い表示（端末が暗いとき、又は設定で「暗い」） ----------
   報告書 3-1 の値。地は iOS の grouped の真っ黒（#000000）でなく、一段上の画面（elevated）の #1C1C1E にした（ui-design 16-6.13）。
   強調・危険・フォーカス・区別の色は「コントラストを上げる」の暗い表示の値。危険の字だけ、押した面の上で 4.5:1 に届くよう
   同じ色相のまま明るくした（#FF6165 → #FF8184）。 */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c1c1e;           /* 地（secondarySystemBackground・elevated） */
  --surface: #2c2c2e;      /* グループの面・入力欄（tertiarySystemBackground） */
  --sheet: #1c1c1e;        /* 窓の地 */
  --press: #3a3a3c;        /* 面の上で押した行（systemGray4。報告書 3-4） 面に 1.23 */
  --press-bg: #2c2c2e;     /* 地の上で押した物（帯のボタン） 地に 1.22 */
  --fill-1: rgba(120, 120, 128, 0.36); /* systemFill（押した灰のボタン） */
  --fill-3: rgba(118, 118, 128, 0.24); /* tertiarySystemFill（灰のボタンの面） */
  --line: #38383a;         /* 区切りの細い線（opaqueSeparator） */
  --line-strong: #8e8e93;  /* 入力欄とチェックの枠（systemGray） 面に 4.27、押した面に 3.48 */
  --bar: rgba(30, 30, 30, 0.72); /* 帯の半透明の地（報告書 2-11） */
  --text: #ffffff;         /* 主の字（label） */
  --text-2: #c7c7cc;       /* 副の字 */
  --text-3: #aeaeb2;       /* 控えめの字（systemGray の高コントラスト） 面に 6.30 */
  --accent: #5cb8ff;       /* 強調の字（Blue の高コントラスト） 地に 7.90、面に 6.47、押した面に 5.27 */
  --accent-fill: #5cb8ff;  /* 強調の塗り（強いボタン・選んだ状態） */
  --on-accent: #000000;    /* 9.76（白は 2.3:1 で届かないので黒） */
  --focus: #ea8dff;        /* フォーカスの枠（Purple の高コントラスト）。強調・危険と違う系統 */
  --danger: #ff8184;       /* 壊す操作の字 押した面に 4.72 */
  --danger-fill: #e9152d;  /* 白い字 4.56 */
  --on-danger-fill: #ffffff;
  --switch-on: #30d158;    /* スイッチのオン（報告書 3-1 の勧め） */
  --scrim: rgba(0, 0, 0, 0.4);
  --toast-bg: #e5e5ea;
  --toast-text: #000000;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

  /* 区別の色（タグのグループ。設計書 6.2）。「コントラストを上げる」の色を点と線に、淡い地は面に 24% 混ぜた物 */
  --g-sora: #6dd9ff;   --g-sora-soft: #3c5660;   /* Cyan */
  --g-dai: #ffa056;    --g-dai-soft: #5f4838;    /* Orange */
  --g-midori: #4ad968; --g-midori-soft: #33563c; /* Green */
  --g-fuji: #ea8dff;   --g-fuji-soft: #5a4360;   /* Purple */
  --g-ki: #fedf43;     --g-ki-soft: #5e5733;     /* Yellow */
  --g-aomidori: #54dfcb; --g-aomidori-soft: #365754; /* Mint */
  --g-momo: #ff8ac4;   --g-momo-soft: #5f4352;   /* Pink */
  --g-cha: #dba679;    --g-cha-soft: #564940;    /* Brown */
  --g-none: #aeaeb2;   --g-none-soft: #4b4b4e;   /* Gray */
}

/* ---------- 明るい表示 ----------
   報告書 3-1 の値。強調・危険・フォーカス・スイッチ・区別の色は「コントラストを上げる」の明るい表示の値（高齢の家族の既定）。
   基準に合わせて変えた所:
   ・強調の字 #1E6EF4 は灰の地で 4.10:1 なので、字には同じ色相を濃くした #1858C3（地 5.84、押した地 4.77）。塗りは #1E6EF4（白い字 4.57）。
   ・危険の字 #E9152D は灰の地で 4.08:1 なので、字には #BF1125（押した面 5.04）。塗りは #E9152D（白い字 4.56）。
   ・控えめの字 #6C6C70 は押した面で 4.16:1 なので #636366（押した面 4.77）。枠の色は #6C6C70 のまま（3:1 以上）。
   ・押した面は Gray4 #D1D1D6 だと控えめの字が 4.5:1 に届かないので Gray5 #E5E5EA。
   ・桃は Pink の高コントラスト #E7124D が危険の赤と同じ系統なので、桃色寄りの #C43F8A（16-6.6）。 */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f7;           /* 地（systemGroupedBackground） */
  --surface: #ffffff;      /* グループの面（secondarySystemGroupedBackground） */
  --sheet: #f2f2f7;        /* tertiarySystemGroupedBackground */
  --press: #e5e5ea;        /* 面に 1.26（systemGray5） */
  --press-bg: #dcdce1;     /* 地に 1.22 */
  --fill-1: rgba(120, 120, 128, 0.20);
  --fill-3: rgba(118, 118, 128, 0.12);
  --line: #c6c6c8;         /* opaqueSeparator */
  --line-strong: #6c6c70;  /* systemGray の高コントラスト 面に 5.23、押した面に 4.16 */
  --bar: rgba(255, 255, 255, 0.72);
  --text: #000000;
  --text-2: #3c3c43;
  --text-3: #636366;       /* 地に 5.37、押した面に 4.77 */
  --accent: #1858c3;       /* 強調の字（Blue の高コントラスト #1E6EF4 を濃く） 面 6.52・地 5.84・押した面 5.19・押した地 4.77 */
  --accent-fill: #1e6ef4;  /* 強調の塗り（Blue の高コントラスト） */
  --on-accent: #ffffff;    /* 4.57 */
  --focus: #b02fc2;        /* Purple の高コントラスト 地 4.67 */
  --danger: #bf1125;
  --danger-fill: #e9152d;  /* Red の高コントラスト */
  --on-danger-fill: #ffffff;
  --switch-on: #008932;    /* Green の高コントラスト 面に 4.54 */
  --scrim: rgba(0, 0, 0, 0.4);
  --toast-bg: #3a3a3c;
  --toast-text: #ffffff;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.14);

  --g-sora: #007eae;   --g-sora-soft: #dbedf4;
  --g-dai: #c55300;    --g-dai-soft: #f7e7db;
  --g-midori: #008932; --g-midori-soft: #dbeee2;
  --g-fuji: #b02fc2;   --g-fuji-soft: #f4e2f6;
  --g-ki: #a16a00;     --g-ki-soft: #f2eadb;
  --g-aomidori: #008575; --g-aomidori-soft: #dbeeec;
  --g-momo: #c43f8a;   --g-momo-soft: #f7e4ef;
  --g-cha: #956d51;    --g-cha-soft: #f0ebe7;
  --g-none: #6c6c70;   --g-none-soft: #eaeaeb;
}

/* ---------- 強調の色（設定。最初は青＝Apple の標準の Blue の高コントラスト） ---------- */
:root[data-accent="sumi"] { --accent: #ffffff; --accent-fill: #ffffff; --on-accent: #000000; }
:root[data-theme="light"][data-accent="sumi"] { --accent: #000000; --accent-fill: #000000; --on-accent: #ffffff; }
:root[data-accent="daidai"] { --accent: #ffa056; --accent-fill: #ffa056; --on-accent: #000000; }
:root[data-theme="light"][data-accent="daidai"] { --accent: #9e4200; --accent-fill: #c55300; --on-accent: #ffffff; }

/* ---------- 好みの切り替え（js/shell/theme.js が data-* を当てる） ---------- */
:root[data-line="loose"] { --lh-body: 1.7; }
:root[data-line="xloose"] { --lh-body: 1.9; }
:root[data-weight="strong"] { --fw-normal: 500; --fw-bold: 700; --fw-heavy: 800; }
:root[data-density="roomy"] { --row-pad: var(--sp-4); }
:root[data-density="compact"] { --row-pad: var(--sp-2); }
/* 動きを減らす: 移動をやめ、200ms 前後のフェードにする（報告書 3-11。移動を消すのは kit.css の [data-motion] の所） */
:root[data-motion="reduce"] { --dur-1: 0ms; --dur-2: 200ms; --dur-3: 450ms; --dur-snappy: 200ms; --ease: ease; --ease-snappy: ease; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="normal"]) { --dur-1: 0ms; --dur-2: 200ms; --dur-3: 450ms; --dur-snappy: 200ms; --ease: ease; --ease-snappy: ease; }
}