/* デザインパターン多言語比較サイト 共通CSS
   yt-playlist-tools/gen_channel_hub.py の配色・ダークモード対応方針を踏襲しつつ、
   「とほほ」寄りの素朴なレイアウト(縦積み・タブで隠さない)にする。 */

:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "Hiragino Sans", sans-serif;
  background: #f5f5f7; color: #1d1d1f; line-height: 1.6;
}
@media (prefers-color-scheme: dark) {
  body { background: #1c1c1e; color: #f2f2f7; }
}
a { color: #0a84ff; }

header.site-header {
  padding: 16px 20px; position: sticky; top: 0; z-index: 10;
  background: inherit; border-bottom: 1px solid rgba(128,128,128,.25);
}
header.site-header h1 { font-size: 18px; margin: 0 0 4px; }
header.site-header h1 a { color: inherit; text-decoration: none; }
header.site-header .tagline { font-size: 12.5px; opacity: .6; }

main { max-width: 980px; margin: 0 auto; padding: 20px 20px 60px; }
footer.site-footer {
  max-width: 980px; margin: 40px auto 0; padding: 16px 20px 40px;
  font-size: 12px; opacity: .55; border-top: 1px solid rgba(128,128,128,.2);
}
footer.site-footer a { color: inherit; }

/* ---- hubページ(一覧) ---- */
#search {
  width: 100%; max-width: 420px; padding: 8px 12px; font-size: 14px;
  border-radius: 8px; border: 1px solid rgba(128,128,128,.4);
  background: rgba(128,128,128,.08); color: inherit; margin-top: 8px;
}
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.tab {
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; cursor: pointer;
  background: rgba(128,128,128,.12); border: 1px solid transparent; white-space: nowrap;
}
.tab.active { background: #0a84ff; color: #fff; }
.tab .n { opacity: .65; margin-left: 3px; }

.grid {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px;
}
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: block; border: 1px solid rgba(128,128,128,.2); border-radius: 12px;
  padding: 14px; background: rgba(128,128,128,.05); text-decoration: none; color: inherit;
}
.card:hover { background: rgba(10,132,255,.1); border-color: #0a84ff; }
.card .name { font-size: 15px; font-weight: 600; }
.card .cat { font-size: 11.5px; opacity: .55; margin-top: 2px; }
.card .langs { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px; }

.lang-badge {
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: rgba(128,128,128,.15); opacity: .35;
}
.lang-badge.done { opacity: 1; color: #fff; }
.lang-badge.lang-java.done { background: #e76f00; }
.lang-badge.lang-go.done { background: #00add8; }
.lang-badge.lang-php.done { background: #777bb3; }
.lang-badge.lang-typescript.done { background: #3178c6; }
.lang-badge.lang-python.done { background: #ffb100; color: #1d1d1f; }

.progress { font-size: 12px; opacity: .6; margin-top: 16px; }

/* ---- 詳細ページ ---- */
.back-link { font-size: 13px; }
.pattern-header { margin: 20px 0; }
.pattern-header h2 { font-size: 26px; margin: 4px 0 0; }
.pattern-header .cat-badge {
  font-size: 12px; padding: 2px 9px; border-radius: 999px;
  background: rgba(128,128,128,.15);
}

.overview blockquote {
  margin: 10px 0; padding: 8px 14px; border-left: 3px solid #0a84ff;
  background: rgba(10,132,255,.07); font-weight: 600;
}
.overview h2 { font-size: 15px; margin: 22px 0 6px; opacity: .75; }
.overview ul, .overview ol { padding-left: 20px; }
.overview pre { margin: 10px 0; }
.overview.trailing { margin-top: 34px; padding-top: 20px; border-top: 2px solid rgba(128,128,128,.2); }
/* UML図(Wikipedia原寸SVG等)はMermaid図と同等の幅まで拡大して表示する。
   透過背景に黒線で描かれた図が多く、ダークテーマでは沈んで読めないため白地に敷く。 */
.overview img {
  display: block; width: 100%; max-width: 780px;
  padding: 14px; border-radius: 8px; background: #fff;
}

/* 詳細ページ全体のレイアウト: サイドバー(アウトライン) + メイン */
.page-layout { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.page-layout main { max-width: none; margin: 0; padding: 20px 0 60px; }
@media (min-width: 900px) {
  .page-layout { display: flex; align-items: flex-start; gap: 32px; }
  .page-layout main { flex: 1 1 auto; min-width: 0; max-width: 820px; }
}

/* アウトライン: スマホは横並びpillのstickyバー、デスクトップは左サイドバーに切り替え */
.outline {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0;
  padding: 10px 14px; border-radius: 10px; background: rgba(128,128,128,.07);
  font-size: 13px; position: sticky; top: 62px; z-index: 5;
}
.outline a { text-decoration: none; padding: 3px 9px; border-radius: 999px; background: rgba(128,128,128,.12); }
.outline a.active { background: #0a84ff; color: #fff; }
@media (min-width: 900px) {
  .outline {
    flex-direction: column; flex-wrap: nowrap; width: 150px; flex: 0 0 150px;
    position: sticky; top: 80px; align-self: flex-start;
    background: none; padding: 0; margin-top: 24px;
  }
  .outline a { padding: 5px 10px; border-radius: 6px; background: none; }
  .outline a.active { background: rgba(10,132,255,.12); color: #0a84ff; }
}

/* 言語セクション(<details>): デフォルトJavaだけ開き、他は畳んでおく */
.lang-section { margin: 16px 0; scroll-margin-top: 110px; }
.lang-section summary {
  font-size: 18px; cursor: pointer; list-style: none;
  padding: 8px 2px; border-bottom: 2px solid rgba(128,128,128,.2);
  display: flex; align-items: center; gap: 8px;
}
.lang-section summary::-webkit-details-marker { display: none; }
.lang-section summary::before {
  content: "▸"; display: inline-block; font-size: 12px; opacity: .5;
  transition: transform .15s;
}
.lang-section[open] summary::before { transform: rotate(90deg); }
.lang-section .lang-body { padding-top: 12px; }
.lang-note { font-size: 13px; opacity: .75; margin: 8px 0 14px; }
.variant-label { font-size: 12.5px; font-weight: 600; opacity: .7; margin: 14px 0 4px; }
.run-cmd {
  font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(128,128,128,.1); padding: 6px 10px; border-radius: 6px; margin: 8px 0;
}
.code-file { margin: 12px 0; }
.code-file .filename {
  font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  opacity: .6; margin-bottom: 4px;
}
pre {
  margin: 0; padding: 12px 14px; border-radius: 8px; overflow-x: auto;
  background: #1e1e20; color: #e6e6e6; font-size: 12.5px; line-height: 1.55;
}
@media (prefers-color-scheme: light) {
  pre { background: #24272b; color: #e6e6e6; }
}
pre code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* hljsは自前でpadding/backgroundを持つので、既存preの見た目と二重にならないよう無効化する
   (色付けの.hljs-*クラスだけを活かす)。 */
pre code.hljs { padding: 0; background: transparent; }

.mermaid {
  display: flex; justify-content: center; overflow-x: auto;
  margin: 14px 0; padding: 16px; border-radius: 8px; background: #282c34;
}

.unimplemented {
  font-size: 13px; opacity: .5; padding: 10px 14px;
  border: 1px dashed rgba(128,128,128,.3); border-radius: 8px;
}