@charset "UTF-8";

/* ============================================================
   THE MONOLITH — Design System v0.2 (draft)
   ------------------------------------------------------------
   哲学: 「廃墟と生命」× 応答する光
     - cold surface … モノリスの応答・システム・HUD
                      （冷光 / 等幅ラベル / 直角 / コーナーブラケット）
     - warm surface … 学習・キャラ・物語
                      （アース / 金 / 角丸 / 明朝=物語の声）
     - 光は装飾ではなく「応答」:
         hover = 微光 / action = 点灯 / ritual = 脈動
         ritual（脈動アニメ）は S達成・章クリア・断章解放のみに限定
   ------------------------------------------------------------
   確定事項:
     - 明朝は「物語の声」専用（断章・ナレーション・キャラ台詞・引用）
     - グレード色 S=黄 / A=赤 / B=青 は禁則（要件#75）変更不可
   確定履歴:
     - 2026-07-11 グレードB = #5EEAD4（サー確定・YOICHIさんへ共有推奨）
     - 2026-07-11 章別トーン = 案2改「モノリスの覚醒」（4章のみ赤紫・下記§7）
     - 2026-07-11 不合格帯（C-F・未挑戦）を無彩色化 ※要件#75の赤系/パープル系から変更・YOICHIさんへ共有推奨
   暫定事項（TODO）:
     - 4章 #BE8AD9 は中庸案。青寄り#B584DC / 赤寄り#CE8BCB に微調整可
     - フォント最終選定（英字ディスプレイ体）は Phase 0 ムードボードで確定
   ============================================================ */

:root {
  /* ===== 1. Base ===== */
  --color-void:        #050708;   /* 最深背景（Entrance・儀式画面） */
  --color-surface-0:   #0A0D0F;   /* 標準画面背景 */
  --color-surface-1:   #10151A;   /* カード基底 */
  --color-surface-2:   #161C22;   /* 浮上要素（モーダル等） */
  --color-line:        rgba(255,255,255,.08);
  --color-line-strong: rgba(255,255,255,.16);

  /* 背景写真の上に必ず敷くオーバーレイ（輝度統制） */
  --overlay-scene: linear-gradient(180deg, rgba(5,7,8,.86) 0%, rgba(5,7,8,.72) 40%, rgba(5,7,8,.88) 100%);

  /* ===== 2. Cold layer — モノリスの応答 ===== */
  --color-monolith-blue: #4A90E2;
  --color-monolith-mint: #5EEAD4;  /* ⚠️ --color-grade-b と同値だが意味は別。片方を変える時は両方を確認（2026-07-28 案C確定） */
  --cold-border:       rgba(74,144,226,.30);
  --cold-bg:           linear-gradient(180deg, rgba(74,144,226,.06), rgba(0,0,0,.20));
  --cold-bracket:      rgba(94,234,212,.90);
  --cold-label:        rgba(94,234,212,.65);

  /* ===== 3. Warm layer — 集落・学習・物語 ===== */
  --color-architect-gold: #D4A574;  /* ⚠️ --warm-label と同値だが意味は別。片方を変える時は両方を確認（2026-07-28 案C確定） */
  --warm-border:       rgba(212,165,116,.28);
  --warm-bg:           linear-gradient(180deg, rgba(58,44,28,.50), rgba(24,18,12,.65));
  --warm-text:         #F2E8D5;
  --warm-text-sub:     #A78F6E;
  --warm-label:        #D4A574;

  /* ===== 4. Text ===== */
  --color-text-hi:     #EAF2EF;
  --color-text:        #C6CFCB;
  --color-text-low:    #6B7570;

  /* ===== 5. Grade（禁則・要件#75 準拠。系統変更不可） ===== */
  --color-grade-s:     #F5B301;   /* 黄 / アンバー */
  --color-grade-a:     #E53935;   /* 赤 */
  --color-grade-b:     #5EEAD4;   /* シアンミント — サー確定 2026-07-11（旧 #1E88E5。要件#75の「青」からシアン系へ変更のためYOICHIさんへ共有推奨） */
  --color-grade-cd:    #A8B2AD;   /* 再挑戦（明るいスチールグレー）— サー確定 2026-07-11 無彩色化 */
  --color-grade-ef:    #7E8884;   /* 兆し / 不可（沈んだグレー）— 同上 */
  --color-grade-na:    #5F6763;   /* 未挑戦（最も暗い）— 同上 */
  /* 原則: 「色が灯る＝合格」。不合格帯は無彩色とし、応答（合格）だけが彩色される */

  /* ===== 6. Semantic（体系内に収める。ピンク・青紫は廃止） ===== */
  --color-unread:      var(--color-architect-gold); /* 未読 = 金の点 */
  --color-success:     #4DBFA8;
  --color-warning:     #E4A853;
  --color-error:       #E05252;
  --color-info:        var(--color-monolith-blue);

  /* ===== 7. Chapter tones（サー確定 2026-07-11 / 案2改「モノリスの覚醒」） =====
     章＝モノリスの覚醒度。1章以降は色相が一方向に回転（165°→285°）。
     金は章色から除外し「達成・儀式・The Architect」専用色に純化。 */
  --color-ch0: #96A7C4;  /* 沈黙のスチール */
  --color-ch1: #7BD8C4;  /* 微光のミント */
  --color-ch2: #5FA8E8;  /* 共鳴のブルー */
  --color-ch3: #9384E0;  /* 深化の紫 */
  --color-ch4: #BE8AD9;  /* 選択のアメジスト（赤紫） */

  /* ===== 9. 実装採取トークン（2026-07-28 追加・タクくん確定） =====
     モック正本で反復使用されながら未登録だった色を登録（区分A解消）。
     値はモック実測そのまま。近傍色(ΔE<6)は代表値へ集約した。 */
  --color-mint-text:  #CFEDE5;  /* ミント枠ボタン等の淡ミント文字 */
  --color-mint-deep:  #06211C;  /* ミント系の深部背景・SVG stroke */
  --color-mint-shade: #1A2320;  /* ミント帯パネルの暗背景 */
  --color-text-faint: #3D4744;  /* text-low より沈む補助テキスト */
  --warm-text-soft:   #D9C9AC;  /* warm-text と warm-text-sub の中間調 */


  /* ===== 8. Typography ===== */
  --font-jp:      'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif;
  --font-en:      'Jost', 'Futura', 'Avenir Next', var(--font-jp);   /* 字間広めのディスプレイ用 */
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;      /* cold層ラベル専用 */
  --font-story:   'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif; /* 物語の声専用 */

  --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px;
  --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px;
  --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-hero: 56px;

  --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 700;
  --line-height-tight: 1.25; --line-height-normal: 1.6; --line-height-story: 2.1;

  --tracking-normal: .02em;
  --tracking-wide:   .12em;   /* 見出し・和文ラベル */
  --tracking-hud:    .28em;   /* cold層 等幅ラベル */
  --tracking-logo:   .42em;   /* ロゴ・儀式見出し */

  --font-size-hud: 10.5px;    /* cold層HUD等幅ラベルの下限。9px運用は廃止（2026-07-11 視認性指摘反映）。
                                 情報を運ぶラベル（NEXT MISSION等）は 11px 以上とする */

  /* ===== 9. Spacing ===== */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* ===== 10. Radius（層で使い分け） ===== */
  --radius-cold: 2px;    /* cold層: ほぼ直角 */
  --radius-warm: 10px;   /* warm層: 柔らかく */
  --radius-pill: 9999px;

  /* ===== 11. Elevation / Glow（応答の3段階） ===== */
  --shadow-card:   0 4px 16px rgba(0,0,0,.45);
  --glow-hover:    0 0 12px rgba(94,234,212,.18);                            /* 微光 */
  --glow-action:   0 0 20px rgba(94,234,212,.40);                            /* 点灯 */
  --glow-ritual:   0 0 34px rgba(245,179,1,.45), 0 0 70px rgba(245,179,1,.18); /* 儀式=金 */
  --glow-blue:     0 0 24px rgba(74,144,226,.40);

  /* ===== 12. Motion ===== */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-ritual: 2600ms;
  --easing-standard:   cubic-bezier(.4, 0, .2, 1);
  --easing-decelerate: cubic-bezier(0, 0, .2, 1);
  --easing-accelerate: cubic-bezier(.4, 0, 1, 1);

  /* ===== 13. Z-index layers ===== */
  /* 100: header / 200: floating / 500: modal / 900: tooltip / 999: emergency */
  --z-header: 100; --z-float: 200; --z-modal: 500; --z-tooltip: 900; --z-emergency: 999;
}

/* ===== Global（要件#64 必須） ===== */
[hidden] { display: none !important; }

body {
  font-family: var(--font-jp);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text);
  background: var(--color-surface-0);
}

/* ============================================================
   Reference components（基準実装）
   ============================================================ */

/* --- Surface: cold（モノリス応答・HUD） --- */
.surface-cold {
  position: relative;
  border: 1px solid var(--cold-border);
  border-radius: var(--radius-cold);
  background: var(--cold-bg);
  padding: var(--space-5);
}
.surface-cold::before, .surface-cold::after {
  content: ""; position: absolute; width: 14px; height: 14px;
}
.surface-cold::before { top: -1px; left: -1px;  border-top: 1px solid var(--cold-bracket); border-left: 1px solid var(--cold-bracket); }
.surface-cold::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--cold-bracket); border-right: 1px solid var(--cold-bracket); }

/* --- Surface: warm（学習・キャラ・物語） --- */
.surface-warm {
  border: 1px solid var(--warm-border);
  border-radius: var(--radius-warm);
  background: var(--warm-bg);
  padding: var(--space-5);
  color: var(--warm-text);
}

/* --- Labels --- */
.label-sys {   /* cold層専用 */
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-hud);
  color: var(--cold-label);
  text-transform: uppercase;
}
.label-warm {  /* warm層専用 */
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  color: var(--warm-label);
}

/* --- 物語の声（明朝の唯一の使用箇所） --- */
.text-story {
  font-family: var(--font-story);
  line-height: var(--line-height-story);
  color: #D9C9AC;
}
.quote-story {
  border-left: 2px solid rgba(212,165,116,.65);
  padding-left: var(--space-4);
}

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: all var(--duration-normal) var(--easing-standard);
}
.btn-primary {  /* 主要CTA: 静かな構え → hoverで応答 */
  background: rgba(94,234,212,.08);
  border: 1px solid rgba(94,234,212,.50);
  border-radius: var(--radius-cold);
  color: #CFEDE5;
}
.btn-primary:hover  { box-shadow: var(--glow-hover); border-color: rgba(94,234,212,.85); }
.btn-primary:active { box-shadow: var(--glow-action); }
.btn-primary:focus-visible { outline: 2px solid var(--color-monolith-blue); outline-offset: 2px; }
.btn-quiet {
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-cold);
  color: var(--color-text);
}
.btn-quiet:hover { border-color: rgba(94,234,212,.5); color: var(--color-text-hi); }

/* --- 応答の光: action / ritual --- */
.is-responding { box-shadow: var(--glow-action); }   /* 提出・確定などの瞬間にJSで付与 */
.is-ritual     { animation: ritual-pulse var(--duration-ritual) var(--easing-standard) infinite; }
@keyframes ritual-pulse {          /* S達成・章クリア・断章解放 限定 */
  0%, 100% { box-shadow: 0 0 24px rgba(245,179,1,.30); }
  50%      { box-shadow: var(--glow-ritual); }
}

/* --- Progress --- */
.progress {
  height: 3px;
  background: var(--color-line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--color-monolith-mint), var(--color-monolith-blue));
  transition: width var(--duration-slow) var(--easing-decelerate);
}

/* --- Grade badge --- */
.grade-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 58px;
  font-family: var(--font-en); font-size: 24px;
  border: 1px solid;
}
.grade-badge--s { color: var(--color-grade-s); border-color: rgba(245,179,1,.60);
                  background: linear-gradient(180deg, rgba(245,179,1,.08), transparent); }
.grade-badge--a { color: var(--color-grade-a); border-color: rgba(229,57,53,.60); }
.grade-badge--b { color: var(--color-grade-b); border-color: rgba(94,234,212,.60); }

/* --- Scene background（章別背景写真の統制） --- */
.scene {
  position: relative;
  background-size: cover; background-position: center;
}
.scene::before {
  content: ""; position: absolute; inset: 0;
  background: var(--overlay-scene);
}
.scene > * { position: relative; }

/* --- Focus / a11y 基本 --- */
:focus-visible { outline: 2px solid var(--color-monolith-blue); outline-offset: 2px; }
a { color: var(--color-monolith-mint); }
a:visited { color: var(--color-monolith-mint); }  /* デフォルト紫の根絶 */

/* --- Breakpoints（メモ: @mediaで直接使用） ---
   mobile: <768px / tablet: 768-1023px / desktop: 1024-1439px / desktop-lg: 1440px+
   モバイルは縦積み: cold→warmの順。横スクロール禁止。タッチターゲット44px以上 */

/* ============================================================
   モバイル省電力（PR-N-1 §3-1-2 追記・トークン値は不変・追記のみ）
   ≤900px: 胞子粒子数はデスクトップ比で半減 / 鼓動周期は 2 倍（4.6s → 9.2s）
   ds-motion.js がこの CSS 変数を参照して粒子数・鼓動間隔を制御する
   ============================================================ */
:root {
  --motion-beat-cycle: 4.6s;   /* 鼓動周期（デスクトップ） */
  --motion-spore-factor: 1;    /* 胞子粒子数の倍率（デスクトップ=等倍） */
}
@media (max-width: 900px) {
  :root {
    --motion-beat-cycle: 9.2s;   /* モバイル: 鼓動周期を 2 倍に */
    --motion-spore-factor: 0.5;  /* モバイル: 胞子粒子数を半減 */
  }
}

/* ============================================================
   Schema v2 submission fields（要件 #158）
   選択グリッド専用。既存コンポーネントへ波及させない .ds-* 名前空間。
   ============================================================ */
.ds-submission-overview,
.ds-submission-materials,
.ds-submission-choice-guide {
  white-space: normal;
}
.ds-submission-overview__goal,
.ds-submission-materials__intro,
.ds-submission-overview__note {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border-left: 2px solid rgba(94, 234, 212, .65);
  background: rgba(94, 234, 212, .055);
  color: var(--color-text-hi);
  line-height: var(--line-height-story);
}
.ds-submission-overview__steps {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.ds-submission-overview__step {
  display: grid;
  grid-template-columns: minmax(7.5rem, .35fr) 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid rgba(94, 234, 212, .18);
  border-radius: var(--radius-cold);
  background: rgba(11, 20, 26, .42);
}
.ds-submission-overview__step strong,
.ds-submission-material__heading,
.ds-submission-choice-guide__group h3 {
  color: #CFEDE5;
}
.ds-submission-overview__note:last-child { margin-bottom: 0; }
.ds-submission-materials {
  display: grid;
  gap: var(--space-3);
}
.ds-submission-material {
  padding: var(--space-3);
  border: 1px solid rgba(94, 234, 212, .18);
  border-radius: var(--radius-cold);
  background: rgba(11, 20, 26, .56);
}
.ds-submission-material__heading {
  margin-bottom: var(--space-2);
  font-weight: 700;
}
.ds-submission-material__context {
  margin: 0 0 var(--space-2);
  color: var(--color-text-low);
}
.ds-submission-material__content {
  padding: var(--space-3);
  border-left: 2px solid rgba(94, 234, 212, .45);
  background: rgba(94, 234, 212, .035);
  color: var(--color-text);
  line-height: var(--line-height-story);
  white-space: normal;
}
.ds-submission-material__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.ds-submission-material__copy .ds-ico {
  width: 12px;
  height: 12px;
}
.ds-submission-choice-guide {
  display: grid;
  gap: var(--space-3);
}
.ds-submission-choice-guide__group {
  padding: var(--space-3);
  border: 1px solid rgba(94, 234, 212, .18);
  border-radius: var(--radius-cold);
  background: rgba(11, 20, 26, .42);
}
.ds-submission-choice-guide__group h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
}
.ds-submission-choice-guide__group ul {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds-submission-choice-guide__group li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--space-2);
}
.ds-submission-choice-guide__group strong { color: var(--cold-label); }
.ds-submission-grid {
  overflow-x: auto;
  border: 1px solid rgba(94, 234, 212, .22);
  border-radius: var(--radius-cold);
  background: rgba(94, 234, 212, .025);
}
.ds-submission-grid__table {
  display: grid;
  min-width: max-content;
}
.ds-submission-grid__row {
  display: grid;
  grid-template-columns: minmax(8rem, .8fr) repeat(var(--ds-submission-columns), minmax(12rem, 1fr));
  border-top: 1px solid rgba(94, 234, 212, .12);
}
.ds-submission-grid__row:first-child { border-top: 0; }
.ds-submission-grid__head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(11, 20, 26, .98);
}
.ds-submission-grid__row-label,
.ds-submission-grid__column-label,
.ds-submission-grid__cell {
  padding: var(--space-3);
  border-left: 1px solid rgba(94, 234, 212, .12);
}
.ds-submission-grid__row-label {
  position: sticky;
  left: 0;
  z-index: 1;
  border-left: 0;
  background: rgba(11, 20, 26, .98);
  color: var(--color-text-hi);
  font-weight: 600;
}
.ds-submission-grid__column-label {
  color: var(--cold-label);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-wide);
}
.ds-submission-grid__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ds-submission-choice {
  display: block;
  min-height: 44px;
  cursor: pointer;
}
.ds-submission-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ds-submission-choice span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-cold);
  background: transparent;
  color: var(--color-text);
  line-height: 1.55;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: normal;
  transition: border-color var(--duration-normal) var(--easing-standard),
              background var(--duration-normal) var(--easing-standard),
              box-shadow var(--duration-normal) var(--easing-standard);
}
.ds-submission-choice:hover span {
  border-color: rgba(94, 234, 212, .55);
  color: var(--color-text-hi);
}
.ds-submission-choice input:checked + span {
  border-color: rgba(94, 234, 212, .9);
  background: rgba(94, 234, 212, .12);
  box-shadow: var(--glow-hover);
  color: #CFEDE5;
}
.ds-submission-choice input:focus-visible + span {
  outline: 2px solid var(--color-monolith-blue);
  outline-offset: 2px;
}
.ds-submission-grid__cell.error,
.ds-submission-grid.error {
  border-color: var(--color-grade-a);
  box-shadow: 0 0 0 1px rgba(229, 57, 53, .45);
}
@media (max-width: 767px) {
  .ds-submission-overview__step { grid-template-columns: 1fr; }
  .ds-submission-grid__row {
    grid-template-columns: minmax(7rem, .7fr) repeat(var(--ds-submission-columns), minmax(10rem, 1fr));
  }
  .ds-submission-grid__row-label,
  .ds-submission-grid__column-label,
  .ds-submission-grid__cell { padding: var(--space-2); }
}