/* マテリアルテーマ（lib/themes.php の material）。theme.kind が material のとき（アダプティブデザインなら Android などの端末）だけ公開ページとプレビューで読む。
   .folita-page にはパレット（Android の system_accent1〜3 / system_neutral1〜2 と同じ 5 系統 × 13 段階）が --accent1_600 のような CSS 変数で入る
   （folita_theme_options_style）。ここで Material 3 の色の役割（--md-*）に割り当て、folita の色の変数（--f-*）をそれで決める。
   render.php はこのテーマでは色の --f-* を inline style に出さない（paletteColors）ので、ここの値がそのまま効く。
   ライト / ダークは端末の設定（prefers-color-scheme）で切り替え、data-md-mode="light|dark" で固定できる。
   段階の対応は Android の動的カラーと同じ: primary = accent1_600（ライト）/ accent1_200（ダーク）、面 = neutral1_10 / neutral1_900 … */

.folita-theme-material {
  color-scheme: light;
  --md-primary: var(--accent1_600); --md-on-primary: var(--accent1_0);
  --md-primary-container: var(--accent1_100); --md-on-primary-container: var(--accent1_900);
  --md-secondary: var(--accent2_600); --md-on-secondary: var(--accent2_0);
  --md-secondary-container: var(--accent2_100); --md-on-secondary-container: var(--accent2_900);
  --md-tertiary: var(--accent3_600); --md-tertiary-container: var(--accent3_100); --md-on-tertiary-container: var(--accent3_900);
  --md-surface: var(--neutral1_0); --md-on-surface: var(--neutral1_900);   /* 面は白（Google アプリと同じ。neutral1_0） */
  --md-surface-variant: var(--neutral2_100); --md-on-surface-variant: var(--neutral2_700);
  --md-outline: var(--neutral2_500); --md-outline-variant: var(--neutral2_200);
  --md-surface-container-lowest: var(--neutral1_0);
  --md-surface-container-low: color-mix(in srgb, var(--neutral1_50) 60%, var(--neutral1_0));
  --md-surface-container: var(--neutral1_50);
  --md-surface-container-high: color-mix(in srgb, var(--neutral1_50) 50%, var(--neutral1_100));
  --md-surface-container-highest: var(--neutral1_100);
  --md-inverse-surface: var(--neutral1_800); --md-inverse-on-surface: var(--neutral1_50);
  --md-shadow: rgba(0, 0, 0, .15);
}
/* ダーク（端末の設定。data-md-mode="light" で固定していないとき） */
@media (prefers-color-scheme: dark) {
  .folita-theme-material:not([data-md-mode="light"]) {
    color-scheme: dark;
    --md-primary: var(--accent1_200); --md-on-primary: var(--accent1_800);
    --md-primary-container: var(--accent1_700); --md-on-primary-container: var(--accent1_100);
    --md-secondary: var(--accent2_200); --md-on-secondary: var(--accent2_800);
    --md-secondary-container: var(--accent2_700); --md-on-secondary-container: var(--accent2_100);
    --md-tertiary: var(--accent3_200); --md-tertiary-container: var(--accent3_700); --md-on-tertiary-container: var(--accent3_100);
    --md-surface: var(--neutral1_900); --md-on-surface: var(--neutral1_100);
    --md-surface-variant: var(--neutral2_700); --md-on-surface-variant: var(--neutral2_200);
    --md-outline: var(--neutral2_400); --md-outline-variant: var(--neutral2_700);
    --md-surface-container-lowest: color-mix(in srgb, var(--neutral1_900) 70%, var(--neutral1_1000));
    --md-surface-container-low: color-mix(in srgb, var(--neutral1_900) 85%, var(--neutral1_800));
    --md-surface-container: color-mix(in srgb, var(--neutral1_900) 60%, var(--neutral1_800));
    --md-surface-container-high: color-mix(in srgb, var(--neutral1_900) 30%, var(--neutral1_800));
    --md-surface-container-highest: var(--neutral1_800);
    --md-inverse-surface: var(--neutral1_100); --md-inverse-on-surface: var(--neutral1_800);
    --md-shadow: rgba(0, 0, 0, .4);
  }
}
/* ダーク固定（data-md-mode="dark"）。上と同じ値 */
.folita-theme-material[data-md-mode="dark"] {
  color-scheme: dark;
  --md-primary: var(--accent1_200); --md-on-primary: var(--accent1_800);
  --md-primary-container: var(--accent1_700); --md-on-primary-container: var(--accent1_100);
  --md-secondary: var(--accent2_200); --md-on-secondary: var(--accent2_800);
  --md-secondary-container: var(--accent2_700); --md-on-secondary-container: var(--accent2_100);
  --md-tertiary: var(--accent3_200); --md-tertiary-container: var(--accent3_700); --md-on-tertiary-container: var(--accent3_100);
  --md-surface: var(--neutral1_900); --md-on-surface: var(--neutral1_100);
  --md-surface-variant: var(--neutral2_700); --md-on-surface-variant: var(--neutral2_200);
  --md-outline: var(--neutral2_400); --md-outline-variant: var(--neutral2_700);
  --md-surface-container-lowest: color-mix(in srgb, var(--neutral1_900) 70%, var(--neutral1_1000));
  --md-surface-container-low: color-mix(in srgb, var(--neutral1_900) 85%, var(--neutral1_800));
  --md-surface-container: color-mix(in srgb, var(--neutral1_900) 60%, var(--neutral1_800));
  --md-surface-container-high: color-mix(in srgb, var(--neutral1_900) 30%, var(--neutral1_800));
  --md-surface-container-highest: var(--neutral1_800);
  --md-inverse-surface: var(--neutral1_100); --md-inverse-on-surface: var(--neutral1_800);
  --md-shadow: rgba(0, 0, 0, .4);
}

/* folita の色の変数を Material の役割で決める（surface tint: カードに primary をわずかに混ぜる。folita-md-flat ならそのまま） */
.folita-theme-material {
  --md-card: color-mix(in srgb, var(--md-surface-container) 94%, var(--md-primary));
  --md-nav: var(--md-surface);   /* 下バーは面と同じ白（ダークでは面の色）で、画面の底に張り付く */
  --f-bg: var(--md-surface); --f-text: var(--md-on-surface); --f-muted: var(--md-on-surface-variant);
  --f-accent: var(--md-primary); --f-btn: var(--md-primary); --f-btn-text: var(--md-on-primary);
  --f-card: var(--md-card); --f-surface: var(--md-surface-container-high); --f-border: var(--md-outline-variant);
  --f-nav-accent: var(--md-primary); --f-link: var(--md-primary);
  --f-selection: var(--accent1_100); --f-selection-text: var(--accent1_900);   /* 選択はダークでも primary の淡い段（パステル）に暗い文字 */
  transition: background .2s, color .2s;
}
.folita-theme-material.folita-md-flat { --md-card: var(--md-surface-container); }

/* 文字（Material 3 の type scale: title-large 22/500、body-medium 14/400、label-medium 12/500） */
.folita-theme-material .folita-name { font-size: 22px; font-weight: 500; letter-spacing: 0; }
.folita-theme-material .folita-bio { color: var(--md-on-surface-variant); }
.folita-theme-material .folita-avatar { box-shadow: none; }

/* ボタン: 塗り = filled、枠線 = outlined、ソフト / ガラス = tonal、シャドウ = elevated。押した面に state layer（8% / 12%）を重ねる */
.folita-theme-material .folita-btn { border-width: 1px; font-weight: 500; letter-spacing: .1px; padding: 12px 24px; }
.folita-theme-material .folita-btn--solid { background: var(--md-primary); color: var(--md-on-primary); }
.folita-theme-material .folita-btn--solid:hover { opacity: 1; background: color-mix(in srgb, var(--md-on-primary) 8%, var(--md-primary)); }
.folita-theme-material .folita-btn--outline { border-color: var(--md-outline); color: var(--md-primary); background: transparent; }
.folita-theme-material .folita-btn--outline:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); color: var(--md-primary); }
.folita-theme-material .folita-btn--soft, .folita-theme-material .folita-btn--glass { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.folita-theme-material .folita-btn--soft:hover, .folita-theme-material .folita-btn--glass:hover { background: color-mix(in srgb, var(--md-on-secondary-container) 8%, var(--md-secondary-container)); }
.folita-theme-material .folita-btn--shadow { background: var(--md-surface-container-low); color: var(--md-primary); box-shadow: 0 1px 3px 1px color-mix(in srgb, var(--md-shadow) 60%, transparent), 0 1px 2px var(--md-shadow); }
.folita-theme-material .folita-btn--shadow:hover { transform: none; box-shadow: 0 2px 6px 2px color-mix(in srgb, var(--md-shadow) 60%, transparent), 0 1px 2px var(--md-shadow); }
.folita-theme-material .folita-btn:active { transform: none; }

/* カード（medium 12px … large 16px）。角丸はボタンの角丸と切り離す */
.folita-theme-material .folita-richlink, .folita-theme-material .folita-feed, .folita-theme-material .folita-table, .folita-theme-material .folita-video, .folita-theme-material .folita-image { border-radius: 16px; }
.folita-theme-material .folita-richlink__img { border-radius: 10px; }
.folita-theme-material .folita-social-icon { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); }
.folita-theme-material .folita-feed__tag { color: var(--md-primary); }

/* 下バー: Google アプリの navigation bar（白地・画面の幅いっぱい・底に密着・角丸なし・影なし。選択中はアイコンの後ろに primary container のピル、名前は primary） */
.folita-theme-material .folita-nav--bottom {
  width: 100%; bottom: 0; height: auto; padding: 12px 8px calc(16px + env(safe-area-inset-bottom)); border-radius: 0;
  background: var(--md-nav); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.folita-theme-material.folita-page--editable .folita-nav--bottom { bottom: 0; width: 100%; padding-bottom: 16px; }
.folita-theme-material .folita-nav--bottom .folita-nav__item { position: relative; gap: 4px; padding: 0; border-radius: 0; background: none; color: var(--md-on-surface-variant); font-size: 12px; font-weight: 500; letter-spacing: .5px; overflow: visible; }
.folita-theme-material .folita-nav--bottom .folita-nav__item::before { content: ""; position: absolute; top: 0; left: 50%; width: 64px; height: 32px; border-radius: 16px; transform: translateX(-50%); background: transparent; transition: background .2s; }
.folita-theme-material .folita-nav--bottom .folita-nav__item svg { position: relative; z-index: 1; margin: 4px 0; }
.folita-theme-material .folita-nav--bottom .folita-nav__item:hover { color: var(--md-on-surface); }
.folita-theme-material .folita-nav--bottom .folita-nav__item:hover::before { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.folita-theme-material .folita-nav--bottom .folita-nav__item.is-active { color: var(--md-primary); background: none; }
.folita-theme-material .folita-nav--bottom .folita-nav__item.is-active::before { background: var(--md-primary-container); }
.folita-theme-material .folita-nav--bottom .folita-nav__item.is-active svg { color: var(--md-on-primary-container); }
.folita-theme-material.folita-has-nav.folita-nav-bottom .folita-container { padding-bottom: calc(80px + 32px + env(safe-area-inset-bottom)); }
/* 上のタブ: Material 3 の tabs（下線のインジケーター） */
.folita-theme-material .folita-nav--top { padding: 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--md-outline-variant); }
.folita-theme-material .folita-nav--top .folita-nav__item { padding: 12px 12px 10px; border-radius: 0; color: var(--md-on-surface-variant); }
.folita-theme-material .folita-nav--top .folita-nav__item:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); color: var(--md-on-surface); }
.folita-theme-material .folita-nav--top .folita-nav__item.is-active { color: var(--md-primary); background: none; box-shadow: inset 0 -3px 0 var(--md-primary); }

/* タイムライン・音楽の枠は --f-card / --tl-accent を使うのでそのまま。カードの枠線だけ outline variant に */
.folita-theme-material .tl-entry, .folita-theme-material .tl-tab, .folita-theme-material .tl-chip { border-color: transparent; }

/* ===== 骨組み (profile.css の .folita-chrome: 下バーのナビがあるとき) の Google アプリの見た目。amanetoki.com の material の上下バー・左バー・アカウントメニューを移植 =====
   上のバー: top app bar。丸めず画面 (広いときは左バーの右) の幅いっぱい・上端に密着、高さ 64px、surface container high で塗る (縁と影は無し)。
   狭いときは名前が左、アバター (設定を開くボタン。40px) が右端から 12px。広いときは名前の代わりにページの見出し (16px / 600)。押せるのはアバターだけ (名前を押しても開かない)。
   左バー: 浮いた板 (240px、上下左 12px、角 24px。地は塗らない) に名前 (17px / 700) とページの一覧 (ピル。選択中は primary container)、下に ©。
   持ち主でログインしているときはアバターにリング (4px、4px の隙間。右上の小さめの範囲だけ薄い紫、35% で青になる ↙ のグラデーション。設定の面のアカウントのカードと共通) */
/* 持ち主以外の folita.me アカウントでログインしているときは、Google アプリのアカウントのアイコンと同じ 4 色のリング (上から時計回りに赤・青・緑・黄の conic-gradient。赤は 301°〜45°、青は 45°〜131°、緑は 131°〜239°、黄は 239°〜301° (左の中心のまま 62° に短く)。太さと隙間は Admin のリングと同じ)。
   Contributor (is-contributor) は左上が青 #006af9 (H214 S100 L49)、右下に向かって緑 #00d65b (H146 S100 L42) になる斜めのグラデーション (22% まで青、70% から緑。色は指定値) */
.folita-theme-material { --md-admin-ring: linear-gradient(to bottom left, #b3a6ff 0, #9d8bff 12%, #2f8cff 35%, #2f8cff 100%); --md-account-ring: conic-gradient(from -59deg, #ea4335 0 104deg, #4285f4 0 190deg, #34a853 0 298deg, #fbbc04 0 360deg); --md-contributor-ring: linear-gradient(to bottom right, #006af9 0, #006af9 22%, #00d65b 70%, #00d65b 100%); }
.folita-theme-material .folita-topbar { height: 64px; padding: 0 12px 0 16px; background: var(--md-surface-container-high); }
.folita-theme-material .folita-topbar .folita-brand { flex: 1; min-width: 0; pointer-events: none; }
.folita-theme-material .folita-topbar .folita-brand__avatar { order: 1; margin-left: auto; width: 40px; height: 40px; pointer-events: auto; }
.folita-theme-material .folita-topbar .folita-brand__avatar--initial { font-size: 18px; }
.folita-theme-material .folita-topbar .folita-brand__name { font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
.folita-theme-material .folita-topbar__title { flex: 1; }
.folita-theme-material .folita-brand__avatar.is-owner { box-sizing: content-box; padding: 4px; border: 4px solid transparent; background: linear-gradient(var(--md-surface-container-high), var(--md-surface-container-high)) padding-box, var(--md-admin-ring) border-box; }
.folita-theme-material .folita-brand__avatar.is-user { box-sizing: content-box; padding: 4px; border: 4px solid transparent; background: linear-gradient(var(--md-surface-container-high), var(--md-surface-container-high)) padding-box, var(--md-account-ring) border-box; }
.folita-theme-material .folita-brand__avatar.is-contributor { box-sizing: content-box; padding: 4px; border: 4px solid transparent; background: linear-gradient(var(--md-surface-container-high), var(--md-surface-container-high)) padding-box, var(--md-contributor-ring) border-box; }
.folita-theme-material .folita-sidebar { top: 12px; height: calc(100cqh - 24px); margin: 12px 0 12px 12px; padding: 12px 0 16px; border-radius: 24px; }
.folita-theme-material .folita-sidebar .folita-brand { padding: 14px 20px 20px; gap: 12px; }
.folita-theme-material .folita-sidebar .folita-brand__avatar { display: none; }
.folita-theme-material .folita-sidebar .folita-brand__name { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.folita-theme-material .folita-nav--side .folita-nav__item { margin: 2px 12px; padding: 11px 16px; gap: 14px; border-radius: 999px; background: none; color: var(--md-on-surface-variant); font-size: 14px; font-weight: 400; letter-spacing: 0; transition: background .15s, color .15s; }
.folita-theme-material .folita-nav--side .folita-nav__item svg { width: 21px; height: 21px; }
.folita-theme-material .folita-nav--side .folita-nav__item:hover { background: var(--md-surface-container-high); color: var(--md-on-surface); }
.folita-theme-material .folita-nav--side .folita-nav__item.is-active { background: var(--md-primary-container); color: var(--md-primary); font-weight: 600; }
.folita-theme-material .folita-sidebar__foot { padding: 18px 24px 8px; color: var(--md-on-surface-variant); }
@container (min-width: 769px) {
  .folita-theme-material .folita-topbar .folita-brand { flex: 0 0 auto; order: 1; margin-left: auto; }
}

/* 設定の面 (.folita-menu。render.php の folita_render_menu): Google アプリのアカウントメニュー。アバターを押すと右からスライドインする全画面の面 (広いときは右に寄せた 420px、後ろは暗く)。
   上の行は右端に × だけ、次にアカウントのカード (72px のアバター・名前 22px・@handle 15px。持ち主には「Admin」のピル)、項目は角丸 28px の面のグループ (項目の間は 2px の隙間で地の色が見える) */
.folita-theme-material .folita-menu__sheet { background: var(--md-surface-container-high); color: var(--md-on-surface); animation: folita-md-sheet-in .4s cubic-bezier(.05, .7, .1, 1) both; }
.folita-theme-material .folita-menu.is-closing .folita-menu__sheet { animation: folita-md-sheet-out .25s cubic-bezier(.3, 0, .8, .15) both; }
@keyframes folita-md-sheet-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes folita-md-sheet-out { from { transform: none; } to { transform: translateX(100%); } }
@container (min-width: 769px) {
  .folita-theme-material .folita-menu { background: rgba(0, 0, 0, .32); }
  .folita-theme-material .folita-menu__sheet { width: 420px; box-shadow: -2px 0 16px rgba(0, 0, 0, .18); }
}
@media (prefers-reduced-motion: reduce) { .folita-theme-material .folita-menu__sheet { animation: none; } }
.folita-theme-material .folita-menu__hdr { min-height: 56px; padding: 8px 8px 4px; gap: 4px; }
.folita-theme-material .folita-menu__back, .folita-theme-material .folita-menu__title { display: none; }
.folita-theme-material .folita-menu__close { margin-left: auto; padding: 10px; color: var(--md-on-surface); }
.folita-theme-material .folita-menu__close svg { width: 26px; height: 26px; }
.folita-theme-material .folita-menu__close:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.folita-theme-material .folita-menu__body { padding: 0 16px 24px; }
.folita-theme-material .folita-menu__account { margin: 0 0 12px; padding: 24px 20px; gap: 20px; border-radius: 28px; background: var(--md-surface); }
.folita-theme-material .folita-menu__avatar { width: 72px; height: 72px; }
.folita-theme-material .folita-menu__avatar.is-owner { box-sizing: content-box; padding: 4px; border: 4px solid transparent; background: linear-gradient(var(--md-surface), var(--md-surface)) padding-box, var(--md-admin-ring) border-box; }
.folita-theme-material .folita-menu__avatar.is-user { box-sizing: content-box; padding: 4px; border: 4px solid transparent; background: linear-gradient(var(--md-surface), var(--md-surface)) padding-box, var(--md-account-ring) border-box; }
.folita-theme-material .folita-menu__avatar.is-contributor { box-sizing: content-box; padding: 4px; border: 4px solid transparent; background: linear-gradient(var(--md-surface), var(--md-surface)) padding-box, var(--md-contributor-ring) border-box; }
.folita-theme-material .folita-menu__avatar--guest { background: var(--md-primary); color: var(--md-on-primary); }
.folita-theme-material .folita-menu__avatar--guest svg { width: 32px; height: 32px; }
.folita-theme-material .folita-menu__name { font-size: 22px; font-weight: 500; letter-spacing: 0; }
.folita-theme-material .folita-menu__sub { margin-top: 2px; font-size: 15px; color: var(--md-on-surface-variant); }
/* 「Admin」のピル: Google アプリのアカウントメニューの「Pro」(amanetoki.com で 2.625x のスクリーンショットから計測: 下 6px、高さ 22px、左右 7px、12px/700。
   白い地で青いのは下の辺だけ (底 #7fa1ff から上へ 7px かけて白に溶ける帯)、上と左右の縁は青い光。ダークは暗い地・明るい文字・青い縁) */
.folita-theme-material .folita-menu__badge { display: inline-flex; align-items: center; height: 22px; margin-top: 6px; padding: 0 7px; border-radius: 11px; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0; color: #1f1f1f; background: linear-gradient(to top, #7fa1ff 0, #9dbbff 2px, #cfdfff 5px, #fff 7px); box-shadow: inset 0 0 6px 1px #a8ccff, inset 0 3px 6px -2px #c0daff; }
@supports (color: light-dark(#000, #fff)) {
  .folita-theme-material .folita-menu__badge { color: light-dark(#1f1f1f, #e3e3e3); background: linear-gradient(to top, light-dark(#7fa1ff, #5570d8) 0, light-dark(#9dbbff, #46589c) 2px, light-dark(#cfdfff, #383f5c) 5px, light-dark(#fff, #2d2f31) 7px); box-shadow: inset 0 0 6px 1px light-dark(#a8ccff, #3f63a8), inset 0 3px 6px -2px light-dark(#c0daff, #3a70c0); }
}
/* Standard のバッジ (folita-menu__badge--standard) はグラデーションも光も無い、Material の平らな灰色 (surface variant の面と文字) */
.folita-theme-material .folita-menu__badge--standard { background: var(--md-surface-variant); color: var(--md-on-surface-variant); box-shadow: none; }
/* Contributor のバッジ (folita-menu__badge--contributor) は同じ作り (下の辺の帯と縁の光) で緑系: 範囲は Admin と同じ: 底は薄い緑 #7fdea6 から 7px で白へ、縁の光は黄緑 #b4ecb4 を 6px (上は濃いめの黄色 #e6ea6e)。ダークは #2a7a4c → #2d2f31、光 #3a8f52 / 上 #9aa83a */
.folita-theme-material .folita-menu__badge--contributor { background: linear-gradient(to top, #7fdea6 0, #a9e9c4 2px, #dcf5e6 5px, #fff 7px); box-shadow: inset 0 0 6px 1px #b4ecb4, inset 0 3px 6px -2px #e6ea6e; }
@supports (color: light-dark(#000, #fff)) {
  .folita-theme-material .folita-menu__badge--contributor { background: linear-gradient(to top, light-dark(#7fdea6, #2a7a4c) 0, light-dark(#a9e9c4, #2b5a40) 2px, light-dark(#dcf5e6, #313f37) 5px, light-dark(#fff, #2d2f31) 7px); box-shadow: inset 0 0 6px 1px light-dark(#b4ecb4, #3a8f52), inset 0 3px 6px -2px light-dark(#e6ea6e, #9aa83a); }
}
.folita-theme-material .folita-menu__group { gap: 2px; margin: 0 0 12px; border-radius: 28px; overflow: hidden; }
.folita-theme-material .folita-menu__item { margin: 0; padding: 0 20px; min-height: 64px; gap: 20px; border-radius: 0; background: var(--md-surface); color: var(--md-on-surface); font-size: 17px; }
.folita-theme-material .folita-menu__item > svg:first-child { width: 24px; height: 24px; }
.folita-theme-material .folita-menu__item:hover { background: color-mix(in srgb, var(--md-surface) 92%, var(--md-on-surface)); }
.folita-theme-material .folita-menu__chev { display: none; }
.folita-theme-material .folita-menu__note { margin: 0; padding: 16px 20px; font-size: 14px; color: var(--md-on-surface-variant); background: var(--md-surface); }

/* ===== ホーム: マテリアルの面のパネル 2 枚 + 全幅の表 (amanetoki.com と同じ)。骨組み (.folita-chrome) のグリッド配置は profile.css (全テーマ共通) にあり、ここは見た目だけ:
   左 (プロフィールの見出し) は角丸 28px の --md-page-hero (accent1 の 100 と neutral1 の 100。下の「画面全体の背景」)、右 (表以外のブロック) は --md-page-card のパネル (枠線・影なし) ===== */
.folita-theme-material.folita-chrome { --fc-radius: 28px; --fc-bg: var(--md-page-card); --fc-bw: 0; --fc-border: transparent; }
.folita-theme-material.folita-chrome .folita-header { padding: 24px 12px; border-radius: 28px; background: var(--md-page-hero); }
@container (min-width: 769px) {
  .folita-theme-material.folita-chrome .folita-header { padding: 32px 24px; }
}

/* ===== 表 (type=table): Android の設定アプリの「デバイス情報」の一覧 (行ごとのカード。上に項目名を太く、下に内容を二次色で)。
   表の枠は塗らず、行を --md-page-card (パネルと同じ) のカードにして 2px の隙間で縦に並べる (一番上と下の角は 24px、間は 4px)。
   表の見出し (title) は一覧の上のセクション名 (最初の表は本文の色で 26px / 500、表に続く表は primary の 16px)。別の表を続けて置けば、画像のようにセクションが分かれる ===== */
.folita-theme-material .folita-table { padding: 0; border-radius: 0; background: none; }
.folita-theme-material .folita-table__title { margin: 8px 0 8px; padding: 0 16px; font-size: 26px; font-weight: 500; letter-spacing: 0; color: var(--md-on-surface); }   /* 最初の表の見出しは本文の色で、名前 (.folita-name の 22px) よりやや大きい 26px / 500 */
.folita-theme-material .folita-block-table + .folita-block-table .folita-table__title { font-size: 16px; letter-spacing: .1px; color: var(--md-primary); }   /* 表に続く表の見出し (セクション名) は小さくアクセント色 */
.folita-theme-material .folita-table__rows { display: flex; flex-direction: column; gap: 2px; }
.folita-theme-material .folita-table__row { display: block; padding: 18px 24px; border-radius: 4px; background: var(--md-page-card); }
.folita-theme-material .folita-table__row + .folita-table__row { border-top: 0; }
.folita-theme-material .folita-table__row:first-child { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.folita-theme-material .folita-table__row:last-child { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.folita-theme-material .folita-table dt { font-size: 17px; font-weight: 500; color: var(--md-on-surface); }
.folita-theme-material .folita-table dd { margin-top: 2px; font-size: 15px; line-height: 1.6; color: var(--md-on-surface-variant); }
.folita-theme-material .folita-table dd a { color: var(--md-primary); }

/* ===== 画面全体の背景 (ライトだけ): 面 (surface = 白) ではなく、パレットの neutral1 の 50 (トーン 95) と 100 (トーン 90) を 85 : 15 で混ぜた、
   アリスブルー (#e9eff3、L* 94 前後) と同じ明るさの薄い色 (色味はパレットに従う。固定値は使わない)。ダークも下でパレットから作る ===== */
.folita-theme-material { --md-page: color-mix(in srgb, var(--neutral1_50) 85%, var(--neutral1_100)); --f-bg: var(--md-page); }
/* その上に置くパネルと表の行の色: 白 (neutral1_0) と 50 を 65 : 35 で混ぜた、アリスブルーの薄い方 (#f7fafc、L* 98 前後) と同じ明るさ (色味はパレットに従う) */
.folita-theme-material { --md-page-card: color-mix(in srgb, var(--neutral1_0) 65%, var(--neutral1_50)); }
/* 左のパネル (プロフィール) の色: パレットの accent1 の 100 (トーン 90 = primary container) に neutral1 の 100 を 40% 混ぜて彩度を落としたもの。アリスブルーの濃い方 (#d0e6f2、L* 90・彩度 57%) と同じ明るさ・鮮やかさで、色味はパレットに従う */
.folita-theme-material { --md-page-hero: color-mix(in srgb, var(--accent1_100) 60%, var(--neutral1_100)); }
/* ダーク: accent1 の 700 (トーン 30 = ダークの primary container) に neutral1 の 700 を 40% (ライトの裏返し) */
@media (prefers-color-scheme: dark) { .folita-theme-material:not([data-md-mode="light"]) { --md-page-hero: color-mix(in srgb, var(--accent1_700) 60%, var(--neutral1_700)); } }
.folita-theme-material[data-md-mode="dark"] { --md-page-hero: color-mix(in srgb, var(--accent1_700) 60%, var(--neutral1_700)); }
/* ダーク: 面より少し明るい、900 と 800 の 65 : 35 (ライトの白と 50 の 65 : 35 の裏返し) */
@media (prefers-color-scheme: dark) { .folita-theme-material:not([data-md-mode="light"]) { --md-page-card: color-mix(in srgb, var(--neutral1_900) 65%, var(--neutral1_800)); } }
.folita-theme-material[data-md-mode="dark"] { --md-page-card: color-mix(in srgb, var(--neutral1_900) 65%, var(--neutral1_800)); }
/* ダークも同じ考え方でパレットから: 面 (neutral1_900、トーン 10) より少し暗い、900 と 1000 (黒) の 85 : 15 */
@media (prefers-color-scheme: dark) { .folita-theme-material:not([data-md-mode="light"]) { --md-page: color-mix(in srgb, var(--neutral1_900) 85%, var(--neutral1_1000)); } }
.folita-theme-material[data-md-mode="dark"] { --md-page: color-mix(in srgb, var(--neutral1_900) 85%, var(--neutral1_1000)); }
/* 見出しに入る SNS (render.php の .folita-header__social): 狭い画面の左のパネルでは 36px にして 1 段に収める (amanetoki.com と同じ)。広いときは 44px */
.folita-theme-material.folita-chrome .folita-header__social .folita-social { gap: 8px; }
.folita-theme-material.folita-chrome .folita-header__social .folita-social-icon { width: 36px; height: 36px; }
.folita-theme-material.folita-chrome .folita-header__social .folita-social-icon svg { width: 18px; height: 18px; }
@container (min-width: 769px) {
  .folita-theme-material.folita-chrome .folita-header__social .folita-social { gap: 12px; }
  .folita-theme-material.folita-chrome .folita-header__social .folita-social-icon { width: 44px; height: 44px; }
  .folita-theme-material.folita-chrome .folita-header__social .folita-social-icon svg { width: 20px; height: 20px; }
}