/* ============================================================
   yoru.css — 「しずかな夜」デザイン(藍の夜に、小さな灯り)

   ゆっくり、息をととのえる。真っ黒・真っ白を使わず、藍と生成りの白で。灯りの琥珀は点と線だけ。
   曲「しずかな夜」(イ短調の5音・60 bpm)から決めた。設計は docs/11-四つの世界のデザイン.md。

   <html data-skin="yoru"> のときだけ効く。四つの世界に共通の部品の形は css/worlds.css。
   ここは、夜の色・書体・形(変数)と、夜だけの飾りだけ。基本は暗い(夜)。明るい(灯りのともる昼)もある。

   ★ 約束は変えない: 達成率を出さない / 赤を使わない / 空の枠を出さない
   ★ 明るい・暗いは、基本は暗い。端末の設定に従う(設定 → 表示設定 で固定もできる)
   ★ 文字サイズ(--fs-*)は、ここでは変えない(設定の「文字の大きさ」を効かせるため)
   ★ 色の読みやすさは「4.5 : 1 以上」(自動テストが、この色の組み合わせを計算して確かめる)。色を変えたら、テストを通すこと
   ★ 書体は、同梱のもの(vendor/fonts/)と、端末に入っているものだけ。外のフォントは読み込まない
   ============================================================ */

/* ---- 1. 色・書体・形の入れ替え(基本は夜) ------------------ */
html:root[data-skin="yoru"] {
  color-scheme: dark;

  --bg:          #11151D;
  --bg-card:     #1A202B;
  --bg-sunken:   #0D1016;
  --raised:      #292E37;
  --line:        #2B3445;
  --line-strong: #6B6B6C;   /* 縁(入力欄・ボタン)。地との差 3 : 1 以上 */
  --text:        #ECE7DD;
  --text-sub:    #D1D0CF;
  --text-weak:   #A9ADBA;
  --accent:      #F2B462;   /* 色のついた文字・線 */
  --accent-2:    #F2B462;
  --accent-weak: #2C2825;   /* 選んでいるところの面 */
  --brown:       #F2B462;
  --lamp:        #F2B462;   /* 塗り・点・下線の色 */
  --on-lamp:     #1B1408;   /* 塗りの上の文字 */
  --warn:        #E2A47C;   /* 赤は使わず、焦げ茶の橙 */
  --warn-weak:   #2E2620;
  --ink:         #ECE7DD;
  --on-ink:      #11151D;
  --card-border: none;
  --tab-bg:      var(--bg-card);
  --tab-border:  none;
  --glow:        rgba(242, 180, 98, 0.18);
  --fab-shadow:  0 0 22px rgba(242, 180, 98, 0.25);

  --head:  "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
           "Noto Serif JP", "Noto Serif CJK JP", "Source Han Serif JP", serif;
  --font:  "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Noto Sans JP",
           "Noto Sans CJK JP", sans-serif;
  --font-quote: var(--head);
  --radius:      18px;
  --radius-sm:   12px;
  --radius-full: 999px;
  --shadow:      none;
  --lh:          1.85;

  --gutter:      26px;
  --tabbar-h:    62px;
  --header-h:    58px;
  --beat:        1000ms;     /* 曲の1拍(60 bpm)。動きの速さの元 */
  --ic-w:        1.6;
  --ic-rx:       4px;
  background: var(--bg);
}

/* 明るい版(端末が明るい設定のとき / 設定で「明るい」を選んだとき) */
@media (prefers-color-scheme: light) {
  html:root[data-skin="yoru"]:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:          #F1EEE8;
    --bg-card:     #FBF9F5;
    --bg-sunken:   #E6E4DF;
    --raised:      #E6E4DF;
    --line:        #D9D4C9;
    --line-strong: #838488;   /* 縁(入力欄・ボタン)。地との差 3 : 1 以上 */
    --text:        #1D2230;
    --text-sub:    #353B4A;
    --text-weak:   #5A6072;
    --accent:      #7A4E00;   /* 色のついた文字・線 */
    --accent-2:    #7A4E00;
    --accent-weak: #E5DED1;   /* 選んでいるところの面 */
    --brown:       #7A4E00;
    --lamp:        #C98A2B;   /* 塗り・点・下線の色 */
    --on-lamp:     #1B1408;   /* 塗りの上の文字 */
    --warn:        #8F5233;   /* 赤は使わず、焦げ茶の橙 */
    --warn-weak:   #F6E7DD;
    --ink:         #1D2230;
    --on-ink:      #F1EEE8;
    --card-border: 1px solid var(--line);
    --tab-bg:      var(--bg-card);
    --tab-border:  1px solid var(--line);
    --glow:        rgba(201, 138, 43, 0);
    --fab-shadow:  0 0 0 1px rgba(29, 34, 48, 0.16);
  }
}
html:root[data-skin="yoru"][data-theme="light"] {
  color-scheme: light;
  --bg:          #F1EEE8;
  --bg-card:     #FBF9F5;
  --bg-sunken:   #E6E4DF;
  --raised:      #E6E4DF;
  --line:        #D9D4C9;
  --line-strong: #838488;   /* 縁(入力欄・ボタン)。地との差 3 : 1 以上 */
  --text:        #1D2230;
  --text-sub:    #353B4A;
  --text-weak:   #5A6072;
  --accent:      #7A4E00;   /* 色のついた文字・線 */
  --accent-2:    #7A4E00;
  --accent-weak: #E5DED1;   /* 選んでいるところの面 */
  --brown:       #7A4E00;
  --lamp:        #C98A2B;   /* 塗り・点・下線の色 */
  --on-lamp:     #1B1408;   /* 塗りの上の文字 */
  --warn:        #8F5233;   /* 赤は使わず、焦げ茶の橙 */
  --warn-weak:   #F6E7DD;
  --ink:         #1D2230;
  --on-ink:      #F1EEE8;
  --card-border: 1px solid var(--line);
  --tab-bg:      var(--bg-card);
  --tab-border:  1px solid var(--line);
  --glow:        rgba(201, 138, 43, 0);
  --fab-shadow:  0 0 0 1px rgba(29, 34, 48, 0.16);
}

/* ---- しずかな夜だけの飾り ------------------------------------- */
/* 灯りの点(選んでいるタブ)・面の明るさで高さを出す(影なし) */
html[data-skin="yoru"] .tabbar__item.is-active::before {
  content: ""; position: absolute; top: 2px; left: 50%; width: 6px; height: 6px;
  margin-left: -3px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 10px var(--glow);
}
html[data-skin="yoru"] .lp__date { font-size: 38px; }
html[data-skin="yoru"] .listen { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 24px var(--glow); }
html[data-skin="yoru"] .quote { border-top-color: var(--line); border-bottom-color: var(--line); }
html[data-skin="yoru"] .tabbar__item.is-active svg { filter: drop-shadow(0 0 3px var(--glow)); }

/* ---- 夜の、今日の画面 ------------------------------------------ */
/* 予定は「時間の流れ」(縦の細い線と、灯りの点)/ 目次は、入口のタイル(2列) */
html[data-skin="yoru"] .tl { position: relative; }
html[data-skin="yoru"] .tl::before { content: ""; position: absolute; left: 6px; top: 22px; bottom: 30px; width: 2px; background: var(--line); }
html[data-skin="yoru"] .tl .timerow {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "time cat" "body cat";
  column-gap: 10px; align-items: center; min-height: 0;
  margin: 0 0 10px 30px; padding: 11px 16px; border: none; border-radius: var(--radius); background: var(--bg-card);
}
html[data-skin="yoru"] .tl .timerow:active { background: var(--accent-weak); }
html[data-skin="yoru"] .tl .timerow__time { grid-area: time; width: auto; font-size: calc(13px * var(--fs-scale)); }
html[data-skin="yoru"] .tl .timerow__body { grid-area: body; }
html[data-skin="yoru"] .tl .timerow .row__title { white-space: normal; font-size: calc(16px * var(--fs-scale)); font-weight: 500; }
html[data-skin="yoru"] .tl .timerow__cat { grid-area: cat; align-self: center; }
html[data-skin="yoru"] .tl .timerow::before {               /* 点: まだ先の予定は、空の輪 */
  content: ""; position: absolute; left: -30px; top: 50%; width: 14px; height: 14px; box-sizing: border-box; margin-top: -7px;
  border-radius: 50%; border: 2px solid var(--text-weak); background: var(--bg);
}
html[data-skin="yoru"] .tl .timerow:has(~ .timerow__now)::before { background: var(--line-strong); border-color: var(--bg); }   /* 過ぎた予定は、塗りの点 */
html[data-skin="yoru"] .tl .timerow--bday::before { border-style: dashed; }
html[data-skin="yoru"] .tl .timerow[class*="k-"] { border-left: none; }
html[data-skin="yoru"] .timerow__cat {                      /* 種類の名前(まるい札) */
  display: inline-flex; flex: 0 0 auto; align-items: center; font-size: calc(13px * var(--fs-scale)); padding: 3px 10px; border-radius: 999px;
  color: var(--text); background: color-mix(in srgb, var(--k, var(--accent)) 24%, var(--bg-card));
}
html[data-skin="yoru"] .timerow__now {                      /* 「いま」の印(灯り) */
  position: relative; display: flex; align-items: center; height: 28px; margin: 0 0 10px 30px; padding: 0;
  font-size: calc(13px * var(--fs-scale)); font-weight: 700; color: var(--accent);
}
html[data-skin="yoru"] .timerow__now::before {
  content: ""; position: absolute; left: -31px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: var(--lamp); box-shadow: 0 0 0 5px color-mix(in srgb, var(--lamp) 22%, transparent);
}
html[data-skin="yoru"] .lp__group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html[data-skin="yoru"] .lp__grouptitle { grid-column: 1 / -1; margin: 22px 0 0; font-size: calc(13px * var(--fs-scale)); color: var(--text-weak); }
html[data-skin="yoru"] .lp__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no ic" "label label";
  align-content: space-between; gap: 6px 8px; min-height: 108px; padding: 14px;
  background: var(--bg-card); border: none; border-radius: var(--radius);
}
html[data-skin="yoru"] .lp__no { grid-area: no; width: auto; font-size: calc(13px * var(--fs-scale)); color: var(--text-weak); }
html[data-skin="yoru"] .lp__no::after { content: " ・ " attr(data-g); }
html[data-skin="yoru"] .lp__ic { grid-area: ic; display: flex; }
html[data-skin="yoru"] .lp__ic .ic { width: 24px; height: 24px; stroke: var(--accent); }
html[data-skin="yoru"] .lp__label { grid-area: label; font-size: calc(16px * var(--fs-scale)); font-weight: 500; line-height: 1.4; }
html[data-skin="yoru"] .lp__label small { font-size: calc(13px * var(--fs-scale)); font-weight: 400; line-height: 1.5; color: var(--text-weak); margin-top: 2px; }
html[data-skin="yoru"] .lp__arrow { display: none; }
html[data-skin="yoru"] .lp__item:active { background: var(--accent-weak); }