/* このサイトだけのもの。配らない。
   Suisou の部品は ui/ にあり、そちらは data-suisou-* 属性で当たる。
   こちらは class だけを使う ＝ 属性か class かがそのまま
   「配る / 配らない」の境界になっていて、取り合いも起きない。 */

:root { --menu-w: 296px; }

/* ページ全体のリセット。配り物ではないのでここが持つ。
   ui/ 側は要素セレクタを使わない（適用先に漏れるため）。 */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; }   /* ページ全体はスクロールしない */

/* ══ 骨格 ══════════════════════════════════════════
   トップバーは Suisou の「地べたのヘッダ」そのもの。
   面も罫も持たず bg に直置きする ―― モノは panel に入るので、
   ヘッダだけが地べたに残る。区切りは線ではなく空きが担う。
   プレビューとサイドバーは別々にスクロールする。
   flex の子に min-height/min-width: 0 を入れないと、
   中身がはみ出して親ごと伸びてしまう。 */

.app { display: flex; height: 100dvh; }

.preview { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--suisou-space-2);
  padding: var(--suisou-space-3);
}

.brand { font-size: var(--suisou-size-16); font-weight: 700; }

.preview-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--suisou-space-3);
}
/* 作例は余白もスクロールも外して、そのものを全面に敷く */
.preview-body.is-bleed { padding: 0; overflow: hidden; }

/* ══ コンテンツメニュー ════════════════════════════
   テーマスイッチとページ一覧を持つ、このサイトの操作盤。
   作例の中に出てくるサイドバーと紛らわしいので「コンテンツメニュー」と呼ぶ。

   ★ここは Suisou のデザインをあえて崩している（意図的。揃えないこと）。
     Suisou 本来なら「モノは panel に入れる」だが、ここは panel を使わず
     bg に直置きし、区切りを線で引いている。揃えてしまうと作例と溶け合って、
     どこからが作例か分からなくなる。この崩しは作例を「そのもの」として
     見せるための縁取りでもある。 */

.menu {
  flex: none;
  width: var(--menu-w);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--suisou-line-weak);
}

.menu-head {
  flex: none;
  display: grid;
  gap: var(--suisou-space-2);
  padding: var(--suisou-space-3);
}

.menu-close { justify-self: end; }   /* 右寄せ。ボタンではなくレイアウトの仕事 */

.menu-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--suisou-space-2);
  display: grid;
  gap: 2px;
  align-content: start;
}

.app:not(.is-menu-closed) .menu-open { display: none; }
.app.is-menu-closed .menu { display: none; }

/* ══ サイドバーの操作子 ════════════════════════════ */

.theme-switch {
  font: inherit;
  text-align: left;
  padding: var(--suisou-space-2);
  border: 1px solid var(--suisou-accent);
  border-radius: var(--suisou-radius);
  background: transparent;
  color: var(--suisou-accent);
  cursor: pointer;
  display: grid;
  gap: 2px;
}
.theme-switch:hover { background: var(--suisou-hover-surface); }
.theme-switch .sub {
  font-size: var(--suisou-size-12);
  line-height: var(--suisou-lh-12);
  color: var(--suisou-text-sub);
}

.nav-group {
  font-size: var(--suisou-size-12);
  line-height: var(--suisou-lh-12);
  color: var(--suisou-text-disabled);
  padding: var(--suisou-space-2) var(--suisou-space-2) var(--suisou-space-1);
}
.nav-group:not(:first-child) { margin-top: var(--suisou-space-2); }

.nav-item {
  font: inherit;
  text-align: left;
  padding: var(--suisou-space-2);
  border: 1px solid transparent;
  border-radius: var(--suisou-radius);
  background: transparent;
  color: var(--suisou-text-sub);
  cursor: pointer;
}
.nav-item:hover { background: var(--suisou-hover-surface); color: var(--suisou-text-main); }
.nav-item[aria-current="page"] {
  background: var(--suisou-selected-surface);
  color: var(--suisou-text-main);
}

/* ══ ページ ════════════════════════════════════════ */

.page { display: grid; gap: var(--suisou-space-4); align-content: start; }
.page h1 { margin: 0; font-size: var(--suisou-size-20); line-height: var(--suisou-lh-20); font-weight: 700; }
.page h2 { margin: 0; font-size: var(--suisou-size-16); line-height: var(--suisou-lh-16); font-weight: 600; }
.page h3 { margin: 0; font-size: var(--suisou-size-14); line-height: var(--suisou-lh-14); font-weight: 600; }
.page p  { margin: 0; }

.note {
  margin: 0;
  font-size: var(--suisou-size-12);
  line-height: var(--suisou-lh-12);
  color: var(--suisou-text-sub);
}

.group { display: grid; gap: var(--suisou-space-2); }

/* ══ Palette ページ ════════════════════════════════ */

.accent-row { display: flex; flex-wrap: wrap; gap: var(--suisou-space-2); }

.accent-chip {
  font: inherit;
  font-size: var(--suisou-size-12);
  line-height: var(--suisou-lh-12);
  padding: 2px 12px;
  border-radius: var(--suisou-radius-pill);
  background: transparent;
  color: var(--c);
  border: 1px solid var(--c);
  cursor: pointer;
}
.accent-chip:hover { background: var(--suisou-hover-surface); }
.accent-chip[aria-pressed="true"] { background: var(--suisou-selected-surface); }
/* 基準を満たさない組。押せるが、破線で「保証していない」ことを示す */
.accent-chip.is-warned { border-style: dashed; }
/* 意味色と色相が近い色。使えるが、意味を色だけに載せてはいけない */
.accent-chip:disabled {
  color: var(--suisou-text-disabled);
  border-color: var(--suisou-line-weak);
  cursor: default;
}

.tokens { display: grid; gap: 2px; }

.token {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: var(--suisou-space-2);
  padding: var(--suisou-space-1) var(--suisou-space-2);
  border-radius: var(--suisou-radius);
}
.token:hover { background: var(--suisou-hover-surface); }

.token-chip {
  height: 24px;
  background: var(--c);
  border: 1px solid var(--suisou-line-weak);
  border-radius: var(--suisou-radius-small);
}
.token-name { font-family: var(--suisou-mono); font-size: var(--suisou-size-12); }
.token-hex  { font-family: var(--suisou-mono); font-size: var(--suisou-size-12); color: var(--suisou-text-sub); }
.token.is-missing .token-name { color: var(--suisou-text-disabled); }

/* ══ Typography ページ ═════════════════════════════ */

.t-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: baseline;
  gap: var(--suisou-space-2);
  padding: var(--suisou-space-1) var(--suisou-space-2);
  border-radius: var(--suisou-radius);
}
.t-row:hover { background: var(--suisou-hover-surface); }
.t-key  { font-family: var(--suisou-mono); font-size: var(--suisou-size-12); color: var(--suisou-text-sub); }
.t-meta { font-family: var(--suisou-mono); font-size: var(--suisou-size-12); color: var(--suisou-text-sub); white-space: nowrap; }

/* ══ 部品のページ ══════════════════════════════════ */

/* 行内コードは Suisou の部品（ui/code.css）が持つ。
   プレビューは markdown ではないので属性を書けるはずだが、<code> が242個あって
   全部に書くのは現実的でない。prose と同じ形でここだけ要素に当てる。 */
.page :where(code) {
  font-family: var(--suisou-mono);
  font-size: 0.9em;
  background: var(--suisou-item);
  border-radius: var(--suisou-radius-small);
  padding: 0 var(--suisou-space-1);
}


.demo {
  display: grid;
  gap: var(--suisou-space-2);
  padding: var(--suisou-space-3);
  border: 1px solid var(--suisou-line-weak);
  border-radius: var(--suisou-radius);
}
.demo-label {
  font-family: var(--suisou-mono);
  font-size: var(--suisou-size-12);
  line-height: var(--suisou-lh-12);
  color: var(--suisou-text-sub);
}

/* Layout ページの見本。並びを見せるための足場であって、部品の予定ではない。
   surface を使うと余白 16px で demo が巨大になるので、小さい箱を用意している。 */
.demo-box {
  padding: var(--suisou-space-1) var(--suisou-space-2);
  border: 1px solid var(--suisou-line-weak);
  border-radius: var(--suisou-radius);
  background: var(--suisou-item);
}
.demo-frame { height: 160px; }

@media (width <= 720px) {
  :root { --menu-w: 240px; }
  .t-row { grid-template-columns: 64px 1fr; }
  .t-meta { grid-column: 2; }
}


/* ══ 作例 ══════════════════════════════════════════
   Suisou の部品だけで組めなかった部分をここに置く。
   溜まったものがそのまま「まだ無い部品」の一覧になる。

   ★構成そのものは Suisou の思想に従う:
     地べた（bg）に直接置くのはヘッダの要素だけ。
     モノは panel に入れる。まとめず、領域ごとに1枚ずつ。 */

/* 作例のサイドバーの実寸。★Suisou は幅を持たないので、幅とその切替は現場の仕事。
   並びの切替（stack md:frame）は Suisou、何 px かはこちら、という分担になる。 */
.demo-aside { width: 100%; }
@media (width >= 768px) { .demo-aside { width: 200px; } }

.demo-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--suisou-space-2);
  padding: 0 var(--suisou-space-3) var(--suisou-space-3);   /* 上はトップバーの余白が続く */
  background: var(--suisou-bg);
}

/* ★まだ部品が無いもの */


.demo-meta { font-size: var(--suisou-size-12); line-height: var(--suisou-lh-12); color: var(--suisou-text-sub); }

/* 一覧のヘッダ行 */
.demo-list-head {
  padding: var(--suisou-space-2);
  border-bottom: 1px solid var(--suisou-line-weak);
  font-size: var(--suisou-size-12); line-height: var(--suisou-lh-12);
  color: var(--suisou-text-sub);
}

/* 色は base.css の accent-color が継承で届く。寸法だけこちらで詰める */
.demo-check { flex: none; width: 14px; height: 14px; margin: 0; }

/* 定義の並び → Description list の扱いが未定 */
.demo-defs { display: grid; grid-template-columns: auto 1fr; gap: var(--suisou-space-1) var(--suisou-space-3); }
.demo-defs dt { color: var(--suisou-text-sub); font-size: var(--suisou-size-12); line-height: var(--suisou-lh-20); }
.demo-defs dd { margin: 0; font-size: var(--suisou-size-14); line-height: var(--suisou-lh-20); }

.muted { color: var(--suisou-text-sub); }

/* ══ Tokens ページ ═════════════════════════════ */

.tk-row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) 5rem 9rem minmax(0, 1fr);
  align-items: center;
  gap: var(--suisou-space-2);
  padding: var(--suisou-space-1) var(--suisou-space-2);
  border-radius: var(--suisou-radius);
}
.tk-row:hover { background: var(--suisou-hover-surface); }

.tk-name { font-family: var(--suisou-mono); font-size: var(--suisou-size-12); }
.tk-val  { font-family: var(--suisou-mono); font-size: var(--suisou-size-12); color: var(--suisou-accent); }
.tk-px   { font-family: var(--suisou-mono); font-size: var(--suisou-size-12); color: var(--suisou-text-sub); }
.tk-sample { min-width: 0; }

/* 余白は幅そのものを棒で見せる */
.tk-bar { height: 1rem; background: var(--suisou-accent); border-radius: var(--suisou-radius-small); }

.tk-round {
  display: inline-flex; align-items: center;
  height: 2rem; padding: 0 var(--suisou-space-3);
  border: 1px solid var(--suisou-line-strong);
  font-size: var(--suisou-size-12);
  color: var(--suisou-text-sub);
}

.tk-motion {
  display: inline-flex; align-items: center;
  height: 2rem; padding: 0 var(--suisou-space-3);
  border: 1px solid var(--suisou-line-weak);
  border-radius: var(--suisou-radius);
  font-size: var(--suisou-size-12);
  color: var(--suisou-text-sub);
  transition-property: background-color, color, border-color;
  transition-timing-function: var(--suisou-ease);
}
.tk-motion:hover {
  background: var(--suisou-selected-surface);
  border-color: var(--suisou-accent);
  color: var(--suisou-text-main);
}

.tk-focus {
  font: inherit; font-size: var(--suisou-size-12);
  padding: var(--suisou-space-1) var(--suisou-space-2);
  border: 1px solid var(--suisou-line-strong);
  border-radius: var(--suisou-radius);
  background: transparent; color: var(--suisou-text-sub);
  cursor: pointer;
}
.tk-focus:focus-visible { outline: var(--suisou-focus); outline-offset: 2px; }

@media (width <= 720px) {
  .tk-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tk-px { grid-column: 2; text-align: right; }
  .tk-sample { grid-column: 1 / -1; }
}