/* ============================================================
   煌堂 COMPASS — 共通デザイントークン & シリーズスイッチャー
   正本: toogood-works/projects/compass-shared/compass-tokens.css
   このファイルは各リポへコピー配布される生成物。**各リポ側で編集しないこと。**
   直すときは正本 → scripts/sync-compass-shared.sh

   採用パレットは DC/LC 系（煌堂ネイビー #1a2851）。
   BC は従来 #0F2A4A / gold #C19A6B だったため、統一に伴い色味が僅かに変わる。
   ============================================================ */

:root {
  /* --- ブランド --- */
  --compass-navy:        #1a2851;
  --compass-navy-dark:   #0f1a3a;
  --compass-navy-light:  #3a4a7c;
  --compass-gold:        #c89f4d;
  --compass-gold-dark:   #a87f2d;
  --compass-gold-light:  #e0c47e;
  --compass-off-white:   #f8f6f1;
  --compass-sand:        #E8D9C0;

  /* --- テキスト / 罫 --- */
  --compass-ink:         #0f172a;
  --compass-muted:       #64748b;
  --compass-border:      #E5E0D5;

  /* --- グレースケール --- */
  --compass-gray-50:  #f8fafc;
  --compass-gray-100: #f1f5f9;
  --compass-gray-200: #e2e8f0;
  --compass-gray-300: #cbd5e1;
  --compass-gray-400: #94a3b8;
  --compass-gray-500: #64748b;
  --compass-gray-700: #334155;
  --compass-gray-900: #0f172a;

  /* --- セマンティック --- */
  --compass-success: #16a34a;
  --compass-warning: #f59e0b;
  --compass-danger:  #c5483d;
  --compass-info:    #2C5282;

  /* --- シリーズ別アクセント（スイッチャーの識別色）--- */
  --compass-accent-brand:      #C19A6B;
  --compass-accent-goal:       #2C5282;
  --compass-accent-daily:      #3D6B4A;
  --compass-accent-leadership: #C76B47;

  /* --- 余白 / 角丸 / 影 --- */
  --compass-space-xs: 4px;
  --compass-space-sm: 8px;
  --compass-space-md: 16px;
  --compass-space-lg: 24px;
  --compass-space-xl: 40px;
  --compass-radius-sm: 4px;
  --compass-radius-md: 8px;
  --compass-radius-lg: 12px;
  --compass-shadow-card: 0 2px 8px rgba(27, 42, 78, 0.06);
  --compass-shadow-lg:   0 8px 24px rgba(27, 42, 78, 0.12);

  /* --- タイポ --- */
  --compass-font-sans: "Plus Jakarta Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
                       "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --compass-font-serif: "Shippori Mincho", serif;
}

/* ============================================================
   シリーズスイッチャー
   全シリーズ共通。Tailwind CDN のページでも素のCSSのページでも
   同じ見た目になるよう、必要な指定はすべてここで完結させる。
   ============================================================ */

.compass-switcher {
  position: relative;
  display: inline-flex;
  font-family: var(--compass-font-sans);
  /* ヘッダーが濃色/淡色どちらでも読めるよう、呼び出し側が上書きする2変数 */
  --cs-fg: #ffffff;
  --cs-fg-dim: rgba(255, 255, 255, 0.62);
  --cs-hairline: rgba(255, 255, 255, 0.28);
  --cs-hover: rgba(255, 255, 255, 0.12);
}

/* 淡色ヘッダー（LC のようなオフホワイト背景）で使う修飾子 */
.compass-switcher--on-light {
  --cs-fg: var(--compass-navy);
  --cs-fg-dim: var(--compass-muted);
  --cs-hairline: var(--compass-border);
  --cs-hover: rgba(26, 40, 81, 0.07);
}

.compass-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 12px;
  background: transparent;
  border: 1px solid var(--cs-hairline);
  border-radius: 999px;
  color: var(--cs-fg);
  font: inherit;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.compass-switcher__trigger:hover { background: var(--cs-hover); }
.compass-switcher__trigger:focus-visible {
  outline: 2px solid var(--compass-gold);
  outline-offset: 2px;
}

.compass-switcher__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--compass-gold);
}

.compass-switcher__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-align: left;
}
.compass-switcher__label b {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cs-fg);
}
.compass-switcher__label span {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--cs-fg-dim);
}

.compass-switcher__caret {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: var(--cs-fg-dim);
  transition: transform 0.15s ease;
}
.compass-switcher[data-open="true"] .compass-switcher__caret { transform: rotate(180deg); }

/* --- ドロップダウン --- */
.compass-switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1000;
  min-width: 288px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid var(--compass-border);
  border-radius: var(--compass-radius-lg);
  box-shadow: var(--compass-shadow-lg);
  display: none;
}
.compass-switcher[data-open="true"] .compass-switcher__menu { display: block; }

/* 画面下端に固定して置く場合（GC のようなオーバーレイ配置）は上に開く */
.compass-switcher--drop-up .compass-switcher__menu {
  top: auto;
  bottom: calc(100% + 8px);
}

.compass-switcher__menu-head {
  padding: 8px 12px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--compass-muted);
}

.compass-switcher__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--compass-radius-md);
  color: var(--compass-ink);
  text-decoration: none;
  transition: background-color 0.12s ease;
}
.compass-switcher__item:hover { background: var(--compass-gray-100); }
.compass-switcher__item[aria-current="page"] { background: var(--compass-gray-100); cursor: default; }

.compass-switcher__item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.compass-switcher__item-name {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--compass-navy);
}
.compass-switcher__item-tagline {
  font-size: 11.5px;
  color: var(--compass-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compass-switcher__check {
  margin-left: auto;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--compass-gold-dark);
}

.compass-switcher__note {
  margin: 4px 6px 2px;
  padding: 8px 10px;
  border-top: 1px solid var(--compass-border);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--compass-muted);
}

@media (max-width: 640px) {
  .compass-switcher__menu { min-width: min(288px, calc(100vw - 32px)); }
  .compass-switcher__label span { display: none; }
}