/* Shinohno-ET — デザインシステム
 * 既存 PySide6 アプリ shinohno_et/ui/theme.py のパレット・フォント・部品を CSS で再現。
 * ライトテーマ / 白カード / 濃色トップバー / アクセント=オレンジ #E1750C。
 */
:root {
  /* パレット (theme.py:28-57) */
  --bg: #EDEFF2;
  --content-bg: #EDEFF2;
  --card: #FFFFFF;
  --surface-2: #F4F6F8;
  --card-border: #DBDEE3;
  --topbar-hi: #23262B;
  --topbar: #2C3037;
  --topbar-text: #C1C6CD;
  --topbar-text-dim: #868D96;
  --accent: #E1750C;
  --accent-hover: #CC6A0B;
  --accent-pressed: #B65F0A;
  --accent-soft: #FBEBD9;
  --accent-line: #E6C79E;
  --text: #1E2228;
  --text-muted: #565F6B;
  --text-faint: #838B95;
  --border: #DBDEE3;
  --field-border: #C5CAD1;
  --ok: #2E8B57;   --ok-soft: #E5F2EA;
  --warn: #A9760B; --warn-soft: #F7EFD9;
  --bad: #C0392B;  --bad-soft: #FBE7E4;
  --target-outer: #46A0FF;
  /* フォント (theme.py:66,299-319) */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Yu Gothic UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* ---- レイアウト幅(ネイティブ版に合わせ、全ページ全幅) ---- */
:root { --page-pad: 36px; }
.topbar-hi, .topbar { padding-left: 24px; padding-right: 24px; }

/* ---- トップクローム (theme.py:96-106) ---- */
.topbar-hi {
  background: var(--topbar-hi);
  color: #FFF;
  padding-top: 10px; padding-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: .2px;
}
.topbar-hi .brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.topbar-hi .sub { color: var(--topbar-text-dim); font-weight: 500; font-size: 12px; margin-left: 6px; }
.topbar {
  background: var(--topbar);
  color: var(--topbar-text);
  padding-top: 0; padding-bottom: 0;
  display: flex; gap: 4px;
  font-size: 13px;
}
.topbar .tab { padding: 10px 14px; border-bottom: 3px solid transparent; color: var(--topbar-text); text-decoration: none; }
.topbar .tab:hover { color: #FFF; }
.topbar .tab.active { color: #FFF; border-bottom-color: var(--accent); font-weight: 600; }
/* 共通ヘッダー要素 */
.brand-name { font-weight: 700; letter-spacing: .2px; }
.brand-ctx { color: var(--topbar-text-dim); }
.hi-spacer, .tb-spacer { flex: 1; }
.hi-user { display: inline-flex; align-items: center; gap: 6px; color: var(--topbar-text); font-size: 12px; }
.hi-logout { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid #3A3F46; color: var(--topbar-text); border-radius: 6px; padding: 4px 10px; font-size: 12px; margin-left: 12px; cursor: pointer; }
.hi-logout:hover { background: #3A3F46; color: #fff; }
.topbar-right { display: flex; align-items: center; gap: 12px; }

/* アイコン / ボタン(絵文字廃止・2行折り返し防止) */
.ico { display: inline-block; vertical-align: -2px; }
button, .btn { white-space: nowrap; }
button:has(.ico), .btn:has(.ico), a.btn:has(.ico) { display: inline-flex; align-items: center; gap: 6px; }

/* ---- レイアウト ---- */
.wrap { max-width: none; margin: 0; padding: 28px var(--page-pad) 72px; }

/* アプリシェル: 共通ヘッダーを持つページは全体スクロールなし、コンテンツ(.wrap)が内部スクロール。
   (login / results は #app-header を持たないため対象外。analyze は独自レイアウトだが互換) */
body:has(> #app-header) { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
body:has(> #app-header) > #app-header { flex: none; }
body:has(> #app-header) > .wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.col { flex: 1 1 240px; }

/* ---- 見出し (theme.py:127-133) ---- */
h1, .h1 { font-size: 22px; font-weight: 600; margin: 4px 0 2px; }
h2, .h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.section-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: none; margin: 22px 0 8px; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.stat-value { font-size: 24px; font-weight: 600; }

/* ---- カード (theme.py:118, 359-364) ---- */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 9px;
  padding: 18px;
  box-shadow: 0 1px 16px rgba(30,34,40,.06);
  margin-bottom: 16px;
}
.card h2 { margin-top: 0; }

/* ---- ボタン (theme.py:135-176) ---- */
button, .btn {
  font-family: var(--font); font-size: 13px; font-weight: 500;
  background: var(--card); color: var(--text);
  border: 1px solid var(--field-border); border-radius: 6px;
  padding: 6px 13px; cursor: pointer;
}
button:hover, .btn:hover { background: var(--surface-2); }
button:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary {
  background: var(--accent); color: #FFF; border: none;
  padding: 8px 16px; font-weight: 600;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-pressed); }
.btn-primary:disabled { background: #E9C6A2; color: #FFF; opacity: 1; }
.btn-ghost { background: transparent; color: var(--text-muted); border: none; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { color: var(--bad); border: 1px solid #E1B0AB; background: var(--card); }
.btn-danger:hover { background: var(--bad-soft); }

/* ---- 入力欄 (theme.py:179) ---- */
label.field { display: block; margin: 12px 0; }
label.field .lbl { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
input[type=text], input[type=number], select {
  font-family: var(--font); font-size: 13px; width: 100%;
  border: 1px solid var(--field-border); border-radius: 6px;
  padding: 6px 9px; background: #FFF; color: var(--text);
}
input:focus, select:focus { outline: none; border-color: var(--accent); }

/* ---- ピル / ステータス (theme.py:411-425) ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 600;
}
.pill.ok { color: var(--ok); background: var(--ok-soft); }
.pill.warn { color: var(--warn); background: var(--warn-soft); }
.pill.bad { color: var(--bad); background: var(--bad-soft); }
.pill.muted { color: var(--text-muted); background: var(--surface-2); }
.pill.accent { color: var(--accent); background: var(--accent-soft); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---- ステップバー (theme.py:487-520) ---- */
.stepbar { display: flex; gap: 8px; align-items: center; margin: 8px 0 20px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 7px; color: var(--text-faint); font-size: 12px; }
.step .num {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border); font-size: 12px; font-weight: 600;
}
.step.done { color: var(--ok); }
.step.done .num { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.step.current { color: var(--accent); }
.step.current .num { background: var(--accent); border-color: var(--accent); color: #FFF; }
.step .sep { width: 18px; height: 1px; background: var(--border); }

/* ---- 判定チェック行 (顔位置調整) ---- */
.check { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--surface-2); }
.check:last-child { border-bottom: none; }

/* ---- スクリーン切替 ---- */
.screen { display: none; }
.screen.active { display: block; }

/* ---- 顔プレビュー ---- */
.preview-wrap { position: relative; width: min(480px, 88vw); aspect-ratio: 4/3; background: #000; border-radius: 8px; overflow: hidden; flex: none; }
.preview-wrap video, .preview-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preview-wrap video { transform: scaleX(-1); } /* 鏡像プレビュー */

/* ---- 全画面ステージ (刺激・ターゲット提示 / stimulus_window.py 準拠) ---- */
#stage {
  position: fixed; inset: 0; background: #000; z-index: 1000;
  display: none; cursor: none;
}
#stage.active { display: block; }
#stageCanvas { width: 100%; height: 100%; display: block; }
#stageHint {
  position: fixed; right: 18px; bottom: 14px; color: #C0392B;
  font-size: 14px; font-weight: 600; display: none; z-index: 1001;
  font-family: var(--font);
}

/* ---- ログ ---- */
.logbox { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 10px; max-height: 160px; overflow: auto; white-space: pre-wrap; }