/* レイアウト本体。色・フォント・余白は theme.css の変数を使う */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-family); font-size: var(--font-size-base); line-height: var(--line-height); }
a { color: var(--color-link); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.wrap { max-width: var(--content-width); margin: 0 auto; padding: calc(var(--space) * 3) calc(var(--space) * 3) calc(var(--space) * 6); }
.wrap.narrow { max-width: var(--article-width); }

/* ヘッダー */
.site-header { display: flex; justify-content: space-between; align-items: var(--header-align); gap: var(--space); flex-wrap: wrap;
  background: var(--header-bg); color: var(--header-text); border-top: var(--header-top-rule); border-bottom: var(--header-rule);
  padding: var(--header-pad); border-radius: var(--header-radius); }
.site-header h1 { margin: 0; font-size: var(--font-size-h1); font-weight: var(--font-weight-title); color: var(--header-text); letter-spacing: var(--h1-tracking); }
.brand { margin: 0 0 2px; font-size: calc(var(--font-size-h1) - 4px); font-weight: var(--font-weight-title); letter-spacing: var(--h1-tracking); }
.brand a { color: var(--header-text); text-decoration: none; }
.tagline { display: var(--tagline-display); margin: 2px 0 0; font-size: var(--font-size-small); color: var(--header-sub); }
.site-header .crumb, .site-header .crumb a, .site-header .hdr-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mode-toggle { display: var(--show-mode-toggle); align-items: center; gap: 6px; font: inherit; font-size: var(--font-size-small); cursor: pointer;
  padding: 4px 12px; border-radius: var(--radius-chip); border: var(--border-width) solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
.mode-toggle:hover { border-color: var(--color-accent); }
.mode-icon { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.updated { color: var(--header-sub); }
.site-header h1 a { color: inherit; text-decoration: none; }
.hdr-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mode-toggle { display: var(--show-mode-toggle); align-items: center; gap: 6px; font: inherit; font-size: var(--font-size-small); cursor: pointer;
  padding: 4px 12px; border-radius: var(--radius-chip); border: var(--border-width) solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
.mode-toggle:hover { border-color: var(--color-accent); }
.mode-icon { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.updated { font-size: var(--font-size-small); color: var(--color-text-sub); }
.crumb { font-size: var(--font-size-small); color: var(--color-text-sub); }
.crumb a { color: var(--color-text-sub); }
.lead { margin: calc(var(--space) * 2) 0 0; font-size: var(--font-size-lead); }
.lead small { font-size: var(--font-size-small); color: var(--color-text-sub); margin-left: 6px; }

.panel { border: var(--border-width) solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow); }

/* カテゴリ（主な導線） */
.cats { margin-top: calc(var(--space) * 2.5); display: grid; grid-template-columns: auto 1fr; overflow: hidden; }
.cats .group { display: contents; }
.cats .glabel { padding: calc(var(--space) * 1.25) calc(var(--space) * 2); font-size: var(--font-size-small); color: var(--color-text-sub);
  background: var(--color-surface-alt); border-right: var(--border-width) solid var(--color-border); display: flex; align-items: center; }
.cats .glist { display: flex; flex-wrap: wrap; }
.cats .group + .group .glabel, .cats .group + .group .glist { border-top: var(--border-width) solid var(--color-border); }
.cat { padding: calc(var(--space) * 1.25) calc(var(--space) * 2); color: var(--color-text); text-decoration: none;
  border-right: var(--border-width) solid var(--color-border); display: flex; align-items: baseline; gap: 6px; }
.cat .n { font-size: var(--font-size-small); color: var(--color-text-sub); }
.cat:hover { background: var(--color-accent-soft); }
.cat[aria-current="page"] { background: var(--accent-gradient), var(--color-accent); color: var(--on-accent); }
.cat[aria-current="page"] .n { color: var(--on-accent); opacity: .85; }

/* 絞り込み */
.filters { margin-top: calc(var(--space) * 1.5); display: flex; flex-wrap: wrap; gap: var(--space); align-items: center; }
.search { flex: 1 1 100%; font: inherit; padding: 6px 12px; border: var(--border-width) solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); }
.search::placeholder { color: var(--color-text-sub); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: var(--font-size-small); padding: 3px 12px; border-radius: var(--radius-chip); cursor: pointer;
  border: var(--border-width) solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
.chip[aria-pressed="true"] { background: var(--accent-gradient), var(--color-accent); border-color: var(--color-accent); color: var(--on-accent); }
.count { font-size: var(--font-size-small); color: var(--color-text-sub); }

/* 日付ごとの一覧 */
.day { margin-top: calc(var(--space) * 3); }
.day h2 { font-size: var(--font-size-base); font-weight: var(--font-weight-title); margin: 0 0 var(--space); color: var(--day-color); border-bottom: var(--day-rule); padding-bottom: 2px; }
.day h2 span { font-weight: normal; font-size: var(--font-size-small); color: var(--color-text-sub); margin-left: 6px; }
.list { list-style: none; margin: 0; padding: 0; overflow: hidden; display: grid; grid-template-columns: repeat(var(--list-columns), minmax(0, 1fr)); gap: var(--item-gap); align-items: stretch; }
.list.panel { border: var(--list-frame); background: var(--list-bg); }
.item { padding: var(--item-pad); border: var(--item-border); border-bottom: var(--item-sep); border-radius: var(--item-radius);
  background: var(--item-topbar), var(--item-bg); box-shadow: var(--item-shadow); transition: background-color .15s; }
.item:hover { background-color: var(--item-hover); }
.item:last-child { border-bottom: var(--item-last-sep, none); }
.meta { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; font-size: var(--font-size-small); color: var(--color-text-sub); }
.meta .catname { color: var(--catc, var(--cat-color)); background: var(--catname-bg); padding: var(--catname-pad); border-radius: var(--catname-radius); }
.kind { font-size: 11px; padding: 0 6px; border: 1px solid var(--color-border); border-radius: 4px; line-height: 1.6; color: var(--color-text-sub); }
.title { margin: 4px 0 0; font-size: var(--font-size-title); font-weight: var(--font-weight-title); line-height: 1.5; overflow-wrap: anywhere; }
.title a { color: var(--color-text); text-decoration: none; }
.title a:hover { color: var(--color-link); text-decoration: underline; }
.orig { display: var(--show-original-title); margin: 2px 0 0; font-size: 12px; color: var(--color-text-sub); overflow-wrap: anywhere; }
.sum { display: var(--show-summary); margin: 6px 0 0; color: var(--color-text); font-size: var(--font-size-small); overflow-wrap: anywhere; }
.sum .clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--summary-lines); line-clamp: var(--summary-lines); overflow: hidden; white-space: pre-line; }
.meta.src { margin-top: 6px; }
.article .meta.src { margin-top: calc(var(--space) * 1.5); }
.metrics { font-size: 12px; color: var(--color-text-sub); }
.prov { font-size: 12px; }
.prov[data-p="google"] { color: var(--tag-google); } .prov[data-p="openai"] { color: var(--tag-openai); }
.prov[data-p="anthropic"] { color: var(--tag-anthropic); } .prov[data-p="xai"] { color: var(--tag-xai); } .prov[data-p="other"] { color: var(--tag-other); }
.empty { margin-top: calc(var(--space) * 3); padding: calc(var(--space) * 3); text-align: center; color: var(--color-text-sub); }
.more { display: block; margin: calc(var(--space) * 3) auto 0; }
.btn { display: inline-block; padding: calc(var(--space) * .75) calc(var(--space) * 2); border-radius: var(--radius); background: var(--accent-gradient), var(--color-accent);
  color: var(--on-accent); text-decoration: none; white-space: nowrap; }

/* 記事ページ */
.article { margin-top: calc(var(--space) * 3); }
.article-title { font-size: var(--font-size-article-title); font-weight: var(--font-weight-title); line-height: 1.5; margin: var(--space) 0 0; overflow-wrap: anywhere; }
.article .orig { display: block; font-size: var(--font-size-small); margin-top: 4px; }
.abstract { margin-top: calc(var(--space) * 2.5); padding: calc(var(--space) * 2) calc(var(--space) * 2.5); background: var(--abstract-bg); border-left: var(--abstract-accent); }
.abstract-label { font-size: var(--font-size-small); color: var(--color-text-sub); margin-bottom: 4px; }
.abstract p { margin: 0; overflow-wrap: anywhere; }
.sumbody p + p, .sumbody ul + p, .sumbody p + ul { margin-top: calc(var(--space) * 1); }
.sumbody ul { margin: 0; padding-left: 1.4em; }
.sumbody li { margin: 2px 0; overflow-wrap: anywhere; }
.actions { margin: calc(var(--space) * 2.5) 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.host { font-size: var(--font-size-small); color: var(--color-text-sub); }
.related { margin-top: calc(var(--space) * 5); }
.related h2 { font-size: var(--font-size-base); font-weight: var(--font-weight-title); color: var(--day-color); margin: 0 0 var(--space); border-bottom: var(--day-rule); padding-bottom: 2px; }

footer { margin-top: calc(var(--space) * 6); font-size: var(--font-size-small); color: var(--color-text-sub); }
footer details { padding: calc(var(--space) * 1.5) calc(var(--space) * 2); }
footer summary { cursor: pointer; color: var(--color-text); }
.sources { columns: 2; padding-left: 1.2em; }
.sources li { break-inside: avoid; }
.off { color: var(--color-text-sub); }
.pagelinks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0; }

@media (max-width: 1100px) { .list { grid-template-columns: repeat(var(--list-columns-mid), minmax(0, 1fr)); } }
@media (max-width: 720px) { .list { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .wrap { padding: calc(var(--space) * 2) calc(var(--space) * 1.75) calc(var(--space) * 5); }
  .cats { grid-template-columns: 1fr; }
  .cats .glabel { border-right: none; border-bottom: var(--border-width) solid var(--color-border); padding: 6px calc(var(--space) * 2); }
  .cats .glist { display: grid; grid-template-columns: 1fr 1fr; }
  .cat { border-bottom: var(--border-width) solid var(--color-border); }
  .cat:nth-child(2n) { border-right: none; }
  .sources { columns: 1; }
  .article-title { font-size: calc(var(--font-size-article-title) - 3px); }
}

/* カテゴリごとの色（テーマが --cat-<id> を決めたときだけ効く） */
.catname[data-c="new-product"] { --catc: var(--cat-new-product, var(--cat-color)); }
.catname[data-c="spec-change"] { --catc: var(--cat-spec-change, var(--cat-color)); }
.catname[data-c="world"] { --catc: var(--cat-world, var(--cat-color)); }
.catname[data-c="security"] { --catc: var(--cat-security, var(--cat-color)); }
.catname[data-c="x-tips"] { --catc: var(--cat-x-tips, var(--cat-color)); }
.catname[data-c="x-usecase"] { --catc: var(--cat-x-usecase, var(--cat-color)); }
.catname[data-c="x-review"] { --catc: var(--cat-x-review, var(--cat-color)); }
.catname[data-c="x-trending"] { --catc: var(--cat-x-trending, var(--cat-color)); }

/* プロバイダーの丸文字アイコンと見出し上の小ラベル（テーマが表示するときだけ） */
.avatar { display: var(--show-avatar, none); }
.kicker { display: var(--kicker-display, none); margin: 0 0 6px; }
.provs { display: contents; }

/* プルダウン版の絞り込み（--show-selects: flex のテーマ／上部案だけ表示） */
.selbar { display: var(--show-selects, none); gap: 10px; flex-wrap: wrap; align-items: center; }
.sel { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-small); color: var(--color-text-sub); }
.sel select { font: inherit; font-size: var(--font-size-base); color: var(--color-text); background: var(--color-surface);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius); padding: 5px 30px 5px 10px; }
/* ページ最下部のライト／ダーク切り替え */
.mode-bar { display: var(--show-mode-toggle); width: 100%; justify-content: center; align-items: center; gap: 10px; margin-top: calc(var(--space) * 3);
  padding-top: calc(var(--space) * 2); border-top: var(--border-width) solid var(--color-border); font-size: var(--font-size-small); color: var(--color-text-sub); }

/* パネル型の絞り込み（--show-fpanel: block の上部案だけ表示） */
.fpanel { display: var(--show-fpanel, none); }

/* ロゴ（site.yaml の logo_path ＝ マスコット、wordmark_path ＝ 文字ロゴ）。まとめて1つのトップへのリンク */
.brandbox { display: flex; align-items: center; gap: var(--logo-gap, 12px); }
.brandtext { min-width: 0; }
.logo { flex: none; display: inline-flex; align-items: center; gap: var(--wordmark-gap, 12px); line-height: 0; text-decoration: none; max-width: 100%; }
.logo .mascot { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--logo-box, auto); height: var(--logo-box, auto); border-radius: 50%; background: var(--logo-badge-bg, transparent);
  border: var(--logo-badge-border, none); }
.logo .mascot img { height: var(--logo-height, 56px); width: auto; display: block; }
.logo.logo-small .mascot img { height: var(--logo-height-small, 40px); }
.logo:hover .mascot img { transform: rotate(-4deg); transition: transform .15s; }
.logo .wordmark { min-width: 0; display: block; }
.logo .wordmark img { display: block; height: var(--wordmark-height, 46px); width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.logo.logo-small .wordmark img { height: var(--wordmark-height-small, 30px); }
.wm-dark { display: none; }
:root[data-mode="dark"] .wm-dark { display: block; }
:root[data-mode="dark"] .wm-light { display: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }