/* ============================================================
   hogan.css — 「方眼とシール」デザイン(紙の道具。v1.43)

   方眼ノートに、種類ごとの色のシールを貼る。あしあと・この日の流れの行は、題の前にシール
   (日々=黄・思いつき=桃・学び=水色・言葉=藤・人=若葉・出かけた=橙)。しぼりこみの切りかえにも同じ色。
   色だけに頼らず、シールには必ず種類の名前を書く。書体は、まるいゴシック(Zen Maru Gothic)。
   見出しには、蛍光ペンの線。

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

/* ---- 1. 色・書体・形(方眼の紙) -------------------------------- */
html:root[data-skin="hogan"] {
  color-scheme: light;

  --bg:          #FAFBF8;   /* 方眼の紙 */
  --bg-card:     #FFFFFF;
  --bg-sunken:   #EFF2EE;
  --raised:      #EFF2EE;

  --line:        #DCE3DC;
  --line-strong: #7A857D;
  --grid:        #E3E9E3;   /* 方眼の線(飾り) */
  --mark:        #F7E39A;   /* 見出しの蛍光ペン */

  --text:        #2A2F2B;
  --text-sub:    #4A524C;
  --text-weak:   #5B645E;

  --accent:      #2E5E4E;   /* 深い緑(色のついた文字・線) */
  --accent-2:    #2E5E4E;
  --accent-weak: #E1EDE6;
  --brown:       #2E5E4E;
  --lamp:        #F2D16B;   /* 黄色のシール(残す・選んだ日) */
  --on-lamp:     #2A2F2B;

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

  --ink:         #2A2F2B;
  --on-ink:      #FAFBF8;

  /* シールの6色(明るい・暗い とも同じ。上の文字は --on-seal) */
  --k-diary:     #F2D16B;
  --k-idea:      #F2B3B0;
  --k-input:     #A9CBEA;
  --k-quote:     #CDBFE6;
  --k-person:    #B5DAB0;
  --k-event:     #F2C08F;
  --on-seal:     #23282A;

  --head:  "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", sans-serif;
  --font:  "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Noto Sans JP", sans-serif;
  --font-quote: var(--head);

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

  --gutter:      20px;
  --tabbar-h:    60px;
  --header-h:    56px;
  --beat:        600ms;
  --ic-w:        1.75;
  --ic-rx:       3px;

  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  html:root[data-skin="hogan"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:          #161A17;
    --bg-card:     #1E231F;
    --bg-sunken:   #111412;
    --raised:      #262C27;
    --line:        #2C332E;
    --line-strong: #6C7870;
    --grid:        #202622;
    --mark:        #5A4E1E;
    --text:        #E7ECE8;
    --text-sub:    #B7C0B9;
    --text-weak:   #9CA69F;
    --accent:      #9CCFB5;
    --accent-2:    #9CCFB5;
    --accent-weak: #20302A;
    --brown:       #9CCFB5;
    --lamp:        #E8C95E;
    --on-lamp:     #1A1D1A;
    --warn:        #D9A07A;
    --warn-weak:   #2E2620;
    --ink:         #E7ECE8;
    --on-ink:      #161A17;
  }
}
html:root[data-skin="hogan"][data-theme="dark"] {
  color-scheme: dark;
  --bg:          #161A17;
  --bg-card:     #1E231F;
  --bg-sunken:   #111412;
  --raised:      #262C27;
  --line:        #2C332E;
  --line-strong: #6C7870;
  --grid:        #202622;
  --mark:        #5A4E1E;
  --text:        #E7ECE8;
  --text-sub:    #B7C0B9;
  --text-weak:   #9CA69F;
  --accent:      #9CCFB5;
  --accent-2:    #9CCFB5;
  --accent-weak: #20302A;
  --brown:       #9CCFB5;
  --lamp:        #E8C95E;
  --on-lamp:     #1A1D1A;
  --warn:        #D9A07A;
  --warn-weak:   #2E2620;
  --ink:         #E7ECE8;
  --on-ink:      #161A17;
}

/* ---- 2. 方眼の紙 ---------------------------------------------- */
html[data-skin="hogan"] body {
  background-color: var(--bg);
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* ---- 3. 見出し(蛍光ペン) -------------------------------------- */
html[data-skin="hogan"] .section__title,
html[data-skin="hogan"] .lp__h2 {
  color: var(--text); font-weight: 700; display: inline-block;
  background: linear-gradient(transparent 58%, var(--mark) 58%); padding: 0 0.2em;
}
html[data-skin="hogan"] .lp__date { font-weight: 700; font-size: 36px; }
html[data-skin="hogan"] .quote { border-color: var(--ink); border-width: 1.5px; }
html[data-skin="hogan"] .quote__text { font-weight: 500; }

/* ---- 4. シール ------------------------------------------------- */
html[data-skin="hogan"] [data-kind="diary"]  { --k: var(--k-diary); }
html[data-skin="hogan"] [data-kind="idea"]   { --k: var(--k-idea); }
html[data-skin="hogan"] [data-kind="input"]  { --k: var(--k-input); }
html[data-skin="hogan"] [data-kind="quote"]  { --k: var(--k-quote); }
html[data-skin="hogan"] [data-kind="person"] { --k: var(--k-person); }
html[data-skin="hogan"] [data-kind="event"]  { --k: var(--k-event); }

/* あしあと・この日の流れの行: 絵の代わりに、題の前にシール。下の行は時刻と関わった人 */
html[data-skin="hogan"] .row--stream { border-bottom: 1.5px dotted var(--line-strong); }
html[data-skin="hogan"] .row--stream .row__icon { display: none; }
html[data-skin="hogan"] .row--stream .row__body { display: flex; flex-flow: row wrap; align-items: baseline; column-gap: var(--sp-2); }
html[data-skin="hogan"] .row--stream .row__kind {
  display: inline-block; flex: 0 0 auto; padding: 1px 8px; border-radius: 3px;
  background: var(--k, var(--bg-sunken)); color: var(--on-seal); font-size: var(--fs-2xs); font-weight: 700; line-height: 1.6;
}
html[data-skin="hogan"] .row--stream .row__title { flex: 1 1 0; min-width: 0; }
html[data-skin="hogan"] .row--stream .row__sub { flex: 0 0 100%; }
html[data-skin="hogan"] .row--stream .row__mkind { display: none; }
html[data-skin="hogan"] .row--stream .row__mtime::before { content: none; }

/* しぼりこみの切りかえ: 色の小さな四角。選ぶと、シールの色で塗る */
html[data-skin="hogan"] .hubchips .chip[data-kind]:not([data-kind="all"])::before {
  content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-right: 0.4em;
  border-radius: 2px; background: var(--k); vertical-align: -0.05em;
}
html[data-skin="hogan"] .hubchips .chip[data-kind].is-active:not([data-kind="all"]) {
  background: var(--k); border-color: var(--k); color: var(--on-seal);
}
html[data-skin="hogan"] .hubchips .chip[data-kind].is-active::before { background: var(--on-seal); }

/* ---- 5. 下のタブ・ボタン -------------------------------------- */
html[data-skin="hogan"] .tabbar { border-top: 1.5px solid var(--ink); }
html[data-skin="hogan"] .tabbar__item.is-active svg { stroke: var(--text); }
html[data-skin="hogan"] .tabbar__item.is-active { text-decoration: underline 3px var(--lamp); text-underline-offset: 5px; }
html[data-skin="hogan"] .tabbar__add svg { border-radius: var(--radius-sm); width: 40px; }
html[data-skin="hogan"] .chip { border-radius: var(--radius-sm); }