/* ============================================================
   notebook.css — 「ノート」デザイン(紙の道具。v1.43)

   大学ノートの1ページ。白い紙に、うすい藍の罫線。記録の題は、手書きの字(Klee One)。
   あしあと・この日の流れでは、時刻を左の余白(二重線の左)に、種類を題の前に小さく書く。
   操作の文字は、読みやすいゴシック(BIZ UDPゴシック)。色は「藍」ひとつだけ。

   <html data-skin="notebook"> のときだけ効く。部品の形は css/worlds.css(<html data-paper>)を借りて、
   ここでは、色・書体・形の変数と、ノートだけの飾りを書く。
   ★ 約束は変えない: 達成率を出さない / 赤を使わない / 空の枠を出さない
   ★ 色の読みやすさは「4.5 : 1 以上」(自動テストが確かめる)。--rule・--margin-c は線だけ(文字に使わない)
   ★ 文字サイズ(--fs-*)は、ここでは変えない
   ============================================================ */

/* ---- 1. 色・書体・形(明るい紙) ------------------------------ */
html:root[data-skin="notebook"] {
  color-scheme: light;

  --bg:          #FCFCFA;   /* ノートの紙 */
  --bg-card:     #FFFFFF;
  --bg-sunken:   #F1F3F6;   /* 入力欄 */
  --raised:      #F1F3F6;

  --line:        #D6E0EB;   /* 罫線(うすい藍) */
  --line-strong: #7D8796;   /* 入力欄・ボタンの縁 */
  --rule:        #D6E0EB;
  --margin-c:    #A9BCD6;   /* 左の余白の二重線 */

  --text:        #23262B;   /* 鉛筆より濃い、ペンの黒 */
  --text-sub:    #474C55;
  --text-weak:   #5C626C;

  --accent:      #2B4C7E;   /* 藍 */
  --accent-2:    #2B4C7E;
  --accent-weak: #E3EAF4;
  --brown:       #2B4C7E;
  --lamp:        #2B4C7E;   /* 塗り(残す・選んだ日・済んだやること) */
  --on-lamp:     #FFFFFF;

  --warn:        #8F5233;
  --warn-weak:   #F6E7DD;

  --ink:         #23262B;
  --on-ink:      #FCFCFA;

  --head:  "Klee One", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font:  "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  --font-quote: var(--head);

  --radius:      6px;
  --radius-sm:   4px;
  --radius-full: 999px;
  --shadow:      none;
  --lh:          1.8;

  --gutter:      20px;
  --tabbar-h:    60px;
  --header-h:    56px;
  --beat:        700ms;
  --ic-w:        1.5;
  --ic-rx:       2px;
  --nb-margin:   calc(52px * var(--fs-scale));   /* 左の余白の幅(時刻を書くところ) */

  background: var(--bg);
}

/* 夜のノート(端末が暗い設定のとき / 設定で「暗い」を選んだとき) */
@media (prefers-color-scheme: dark) {
  html:root[data-skin="notebook"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:          #15181D;
    --bg-card:     #1C2027;
    --bg-sunken:   #101318;
    --raised:      #222731;
    --line:        #2A3442;
    --line-strong: #6E7887;
    --rule:        #2A3442;
    --margin-c:    #3A4A63;
    --text:        #E6E9EE;
    --text-sub:    #B5BCC7;
    --text-weak:   #9AA2AE;
    --accent:      #9DB7DE;
    --accent-2:    #9DB7DE;
    --accent-weak: #1F2A3B;
    --brown:       #9DB7DE;
    --lamp:        #9DB7DE;
    --on-lamp:     #12151A;
    --warn:        #D9A07A;
    --warn-weak:   #2E2620;
    --ink:         #E6E9EE;
    --on-ink:      #15181D;
  }
}
html:root[data-skin="notebook"][data-theme="dark"] {
  color-scheme: dark;
  --bg:          #15181D;
  --bg-card:     #1C2027;
  --bg-sunken:   #101318;
  --raised:      #222731;
  --line:        #2A3442;
  --line-strong: #6E7887;
  --rule:        #2A3442;
  --margin-c:    #3A4A63;
  --text:        #E6E9EE;
  --text-sub:    #B5BCC7;
  --text-weak:   #9AA2AE;
  --accent:      #9DB7DE;
  --accent-2:    #9DB7DE;
  --accent-weak: #1F2A3B;
  --brown:       #9DB7DE;
  --lamp:        #9DB7DE;
  --on-lamp:     #12151A;
  --warn:        #D9A07A;
  --warn-weak:   #2E2620;
  --ink:         #E6E9EE;
  --on-ink:      #15181D;
}

/* ---- 2. 見出し(下線を引いた、手書きの見出し) ------------------ */
html[data-skin="notebook"] .section__title,
html[data-skin="notebook"] .lp__h2 {
  color: var(--text); font-weight: 600;
  text-decoration: underline 2px var(--accent); text-underline-offset: 0.35em;
}
html[data-skin="notebook"] .lp__date { font-weight: 600; font-size: 36px; }
html[data-skin="notebook"] .quote__text { font-weight: 600; }
html[data-skin="notebook"] :is(.row__title, .check__title, .lp__label, .timerow .row__title) { font-family: var(--head); font-weight: 600; }
html[data-skin="notebook"] .lp__label small { font-family: var(--font); font-weight: 400; }

/* ---- 3. 罫線と、左の余白 -------------------------------------- */
/* 行の下の線を、ノートの罫線に。あしあと・この日の流れの行は、左の余白に時刻、二重線、題の前に種類 */
html[data-skin="notebook"] :is(.row, .timerow, .check, .lp__item, .quoterow) { border-bottom: 1px solid var(--rule); }
html[data-skin="notebook"] .row--stream {
  display: grid; grid-template-columns: var(--nb-margin) minmax(0, 1fr); gap: 0;
  padding: var(--sp-2) 0;
  background: linear-gradient(to right,
    transparent calc(var(--nb-margin) - 5px), var(--margin-c) calc(var(--nb-margin) - 5px),
    var(--margin-c) calc(var(--nb-margin) - 4px), transparent calc(var(--nb-margin) - 4px),
    transparent calc(var(--nb-margin) - 1px), var(--margin-c) calc(var(--nb-margin) - 1px),
    var(--margin-c) var(--nb-margin), transparent var(--nb-margin));
}
html[data-skin="notebook"] .row--stream:last-child { border-bottom: 1px solid var(--rule); }
html[data-skin="notebook"] .row--stream .row__icon { display: none; }
html[data-skin="notebook"] .row--stream .row__time {
  display: block; align-self: start; padding: 0.3em 12px 0 0; text-align: right;
  color: var(--text-weak); font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
}
html[data-skin="notebook"] .row--stream .row__body {
  display: flex; flex-flow: row wrap; align-items: baseline; column-gap: var(--sp-2); padding-left: var(--sp-3);
}
html[data-skin="notebook"] .row--stream .row__kind { display: inline; flex: 0 0 auto; color: var(--accent); font-size: var(--fs-2xs); }
html[data-skin="notebook"] .row--stream .row__title { flex: 1 1 0; min-width: 0; }
html[data-skin="notebook"] .row--stream .row__sub { flex: 0 0 100%; }
html[data-skin="notebook"] .row--stream .row__meta { display: none; }
html[data-skin="notebook"] .row--stream .row__who::before { content: none; }

/* きょうの予定も、時刻を左の余白に */
html[data-skin="notebook"] .timerow__time { font-family: var(--font); color: var(--text-weak); font-size: var(--fs-xs); }

/* ---- 4. 下のタブ・ボタン -------------------------------------- */
html[data-skin="notebook"] .tabbar { border-top: 1px solid var(--rule); }
html[data-skin="notebook"] .tabbar__item.is-active { text-decoration: underline 2px var(--accent); text-underline-offset: 5px; }
html[data-skin="notebook"] .tabbar__add svg { border-radius: var(--radius-sm); width: 40px; }
html[data-skin="notebook"] .chip { border-radius: var(--radius-sm); }
html[data-skin="notebook"] .card { border-color: var(--rule); }