/**
 * styles.css — 八個專案共用的視覺風格
 *
 * 用法：<link rel="stylesheet" href="../shared/styles.css">
 * 專案自己的樣式寫在 src/style.css，只放「這個專案獨有」的東西。
 *
 * 版面約定：
 *   <div class="app">
 *     <aside class="panel"> 控制項 </aside>
 *     <main class="stage">  <canvas> </main>
 *   </div>
 */

/* ── 色 ─────────────────────────────────────────────
 *
 * 規則：**顏色只在畫布上有意義，排版裡一律不用顏色。**
 *
 * --eigen1/--eigen2/--ok/--error 是語意色：黃色「就是」λ₁，
 * 綠色「就是」λ₂。它們同時寫死在各專案的 canvas 繪圖碼裡，
 * 所以這裡的數值不能亂動，否則面板上的圖例會跟畫布對不起來。
 *
 * 反過來說，這些顏色**不該**出現在純排版的地方（行內 code、
 * 表格裡的粗體、徽章）。那種用法只是裝飾，會讓畫面變花，
 * 也會稀釋「看到黃色 = 這是第一個特徵方向」的訊號。
 * 排版的層次交給字級、字重、留白處理。
 *
 * --primary 只用在「可以點的東西」與 focus 上。
 */
:root {
  --bg: #12141a;
  --bg-panel: #191c24;
  --bg-input: #21252f;
  --grid: #252a35;
  --border: #2a2f3a;
  --border-soft: #21252e;   /* 表格列之間這種需要更輕的線 */
  --text: #d3dae6;
  --text-dim: #7d879c;
  --text-faint: #5d6675;    /* 註腳、單位、次要計數 */

  --primary: #4c9aff;
  --accent: #ff6b9d;
  --eigen1: #ffd166;
  --eigen2: #06d6a0;
  --error: #ef476f;
  --ok: #06d6a0;

  --radius: 8px;
  --gap: 12px;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --sans: system-ui, -apple-system, "Noto Sans TC", "PingFang TC", sans-serif;
}

/* 數字要能上下對齊才讀得出差異，這個作品集到處都是數字 */
.mono,
code,
.stat,
input[type="number"] {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
}

/* ── 版面 ───────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: 100vh;
}

.panel {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  padding: 20px;
  overflow-y: auto;
}

.stage {
  position: relative;
  overflow: hidden;
}

.stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 800px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    height: auto;
    min-height: 100vh;
  }
  .panel {
    border-right: none;
    border-top: 1px solid var(--border);
    order: 2;
  }
  .stage {
    order: 1;
    height: 60vh;
  }
}

/* ── 文字 ───────────────────────────────────────── */

h1 {
  font-size: 17px;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* ⚠️ 不要在這裡放 text-transform: uppercase。
   對中文沒有任何效果，卻會把混在標題裡的數學符號改掉——
   「t 時刻的 A」會變成「T 時刻的 A」，λ 的下標也會被吃掉。
   標籤感用字級 + 字距 + 灰階做，不要用 uppercase。 */
h2 {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 24px 0 8px;
  font-weight: 600;
}

.subtitle {
  color: var(--text-dim);
  font-size: 12px;
  margin: 0 0 20px;
}

.hint {
  color: var(--text-dim);
  font-size: 12px;
}

code,
.mono {
  font-family: var(--mono);
}

/* ── 控制項 ─────────────────────────────────────── */

.field {
  margin-bottom: var(--gap);
}

label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

input[type="number"],
input[type="text"],
select {
  width: 100%;
  padding: 6px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}

button {
  padding: 6px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

button:hover {
  background: #272c37;
  border-color: #3a4150;
}

button.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #0b1220;
  font-weight: 600;
}

/* 鍵盤操作要看得見焦點在哪 */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 只給螢幕閱讀器的補充說明（例如連結實際會跳到哪個示範） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── 矩陣輸入格 ─────────────────────────────────── */

.matrix-input {
  display: inline-grid;
  gap: 6px;
  padding: 8px 12px;
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
  border-radius: 3px;
}

.matrix-input input {
  width: 64px;
  text-align: center;
}

/* ── 數據顯示 ───────────────────────────────────── */

.stat {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
}

.stat span:first-child {
  color: var(--text-dim);
}

.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--mono);
}

.badge.ok {
  background: rgba(6, 214, 160, 0.15);
  color: var(--ok);
}

.badge.error {
  background: rgba(239, 71, 111, 0.15);
  color: var(--error);
}

/* ── 覆蓋在畫布上的浮動資訊 ─────────────────────── */

.overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 8px 12px;
  background: rgba(25, 28, 36, 0.85);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12px;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

/* ── 佔位頁（尚未開發的專案） ───────────────────── */

.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100vh;
  text-align: center;
  padding: 24px;
}

.placeholder h1 {
  font-size: 24px;
}

.placeholder a {
  color: var(--primary);
}