/* tools/techio_public_dashboard/public/style.css
   デザインシステム: DESIGN.md Mode B「The Row」(投資・ブランド系の第一候補)。
   CEO 恒久ルール(DESIGN.md 冒頭)によりダーク背景は使用しない。 */

:root {
  --row-paper: #F5F4F0;
  --row-paper-card: #FFFFFF;
  --row-ink: #1C1C1C;
  --row-tan: #C8B89E;
  --row-stone: #6B6B66;
  --row-coffee: #8B6F47;

  --color-success: #00A886; /* 白背景での可読性を優先しDESIGN.md基準色よりやや濃く調整 */
  --color-error: #E0453A;   /* 同上 */
  --color-warning: #B8760F;

  --font-sans: 'Noto Sans JP', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-h1: 32px;
  --text-h2: 20px;
  --text-body: 16px;
  --text-caption: 14px;
  --text-small: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--row-paper);
  color: var(--row-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}

body {
  padding: 20px 16px 48px;
  max-width: 640px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  padding: 16px 0 24px;
}

.eyebrow {
  font-size: var(--text-small);
  letter-spacing: 0.15em;
  color: var(--row-coffee);
  text-transform: uppercase;
  margin: 0 0 8px;
}

.page-header h1 {
  font-size: var(--text-h1);
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 0 0 12px;
}

.team-note {
  font-size: var(--text-caption);
  color: var(--row-stone);
  max-width: 480px;
  margin: 0 auto;
}

main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  background: var(--row-paper-card);
  border: 1px solid var(--row-tan);
  border-radius: 4px;
  padding: 20px 18px;
}

.card h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}

.section-hint {
  font-size: var(--text-caption);
  color: var(--row-stone);
  margin: -6px 0 14px;
}

/* --- ⓪ 当直の窓(固定カメラ風の実写枠) --- */

.window-card { padding-bottom: 16px; }

.window-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--row-ink);
}

.window-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.window-video.active { opacity: 1; }

.window-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.window-status {
  font-size: var(--text-caption);
  color: var(--row-stone);
  margin: 10px 0 0;
}

/* --- 進捗バー --- */

.goal { margin-bottom: 18px; }
.goal:last-of-type { margin-bottom: 8px; }

.goal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.goal-label {
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--row-coffee);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.goal-deadline {
  font-size: var(--text-small);
  color: var(--row-stone);
}

.goal-text {
  font-size: var(--text-body);
  margin: 0 0 8px;
}

.progress-track {
  background: var(--row-paper);
  border: 1px solid var(--row-tan);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--row-coffee);
  border-radius: 999px;
  width: 0%;
  transition: width 0.4s ease;
}

.goal-numbers {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--row-stone);
  margin: 6px 0 0;
}

.floor-note {
  font-size: var(--text-caption);
  color: var(--row-stone);
  border-top: 1px dashed var(--row-tan);
  padding-top: 12px;
  margin: 4px 0 0;
}

.floor-note.breached {
  color: var(--color-error);
  font-weight: 700;
}

/* --- 総資産 / 損益 --- */

.balance-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 14px;
}

@media (min-width: 480px) {
  .balance-grid { grid-template-columns: 1fr 1fr; }
}

.balance-caption {
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--row-stone);
  margin: 0 0 4px;
}

.balance-usd {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.balance-jpy {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--row-stone);
  margin: 2px 0 0;
}

.balance-jpy::before { content: "\2248 "; } /* ≈ */

.positive { color: var(--color-success); }
.negative { color: var(--color-error); }

.contribution-box {
  background: var(--row-paper);
  border-radius: 4px;
  padding: 12px 14px;
}

.contribution-title {
  font-size: var(--text-caption);
  color: var(--row-stone);
  margin: 0 0 8px;
}

.pnl-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-caption); }
.pnl-table th { text-align: left; font-weight: 400; color: var(--row-stone); padding: 4px 0; }
.pnl-table td { text-align: right; font-weight: 700; padding: 4px 0; }

/* --- 保有一覧 --- */

.positions-list { display: flex; flex-direction: column; gap: 10px; }

.position-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--row-paper);
  border-radius: 4px;
  gap: 12px;
}

.position-main { min-width: 0; }

.position-ticker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
}

.position-name {
  font-size: var(--text-small);
  color: var(--row-stone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.position-side {
  text-align: right;
  flex-shrink: 0;
}

.position-pnl-pct {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
}

.position-split {
  font-size: var(--text-small);
  color: var(--row-stone);
}

/* --- AIチームの判断 --- */

.judgment-quote {
  border-left: 3px solid var(--row-coffee);
  padding: 4px 0 4px 14px;
  margin: 0 0 8px;
  font-size: var(--text-body);
}

.judgment-date {
  font-size: var(--text-small);
  color: var(--row-stone);
}

.judgment-date.stale-tag {
  color: var(--color-warning);
  font-weight: 700;
}

.freshness-note {
  font-size: var(--text-small);
  color: var(--row-stone);
  margin: 12px 0 0;
  border-top: 1px dashed var(--row-tan);
  padding-top: 10px;
}

/* --- 守りの約束 --- */

.guardrail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.guardrail-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--row-paper);
}

.guardrail-item:last-child { border-bottom: none; }

.guardrail-badge {
  flex-shrink: 0;
  font-size: var(--text-small);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  min-width: 44px;
  text-align: center;
}

.guardrail-badge.ok { background: rgba(0,168,134,0.12); color: var(--color-success); }
.guardrail-badge.ng { background: rgba(224,69,58,0.12); color: var(--color-error); }
.guardrail-badge.no_data { background: rgba(107,107,102,0.12); color: var(--row-stone); }

.guardrail-text { font-size: var(--text-caption); }
.guardrail-detail { display: block; color: var(--row-stone); font-size: var(--text-small); margin-top: 2px; }

/* --- 免責 / フッター --- */

.disclaimer-card { background: var(--row-paper); }
.disclaimer-card p { font-size: var(--text-caption); color: var(--row-stone); margin: 0; }

.page-footer {
  text-align: center;
  margin-top: 24px;
  color: var(--row-stone);
  font-size: var(--text-small);
}

.page-footer p { margin: 4px 0; }

.empty-note { color: var(--row-stone); font-size: var(--text-caption); }

/* --- エラー時の全画面フォールバック --- */

.fatal-error-box {
  background: var(--row-paper-card);
  border: 1px solid var(--color-error);
  border-radius: 4px;
  padding: 24px 18px;
  text-align: center;
}

.fatal-error-box h2 { color: var(--color-error); }