/* 共通の部品：資産ヒーロー（.ahero）と副指標の帯（.ivm） */

/* ============================================================
   資産ヒーロー（.ahero）＋ 副指標の帯（.ivm）— 投資信託 照会 / 純資産 で共有
   **濃紺のヒーロー1枚が主役の数字を持ち、周りは静か**という NISA枠タブの組み立てを
   部品にしたもの。ヒーローが載せるのは3つだけ:
     ・主役の金額（前日比/前月比と「いつ時点か」を添える）
     ・内訳バー（投信=元本と運用益 / 純資産=銀行・投信・FX）
     ・スパークライン（推移が1本で分かる）
   二次的な指標（IRR・最大DD など）は下の帯（.ivm）へ落として主役と競わせない。
   ============================================================ */
.ahero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 300px);
  grid-template-areas: "left right" "split split";
  gap: var(--sp-4) var(--sp-6);
  background: linear-gradient(135deg, #182338 0%, #1f3355 55%, #24406b 100%);
  border-radius: var(--radius-xl);
  padding: 22px 24px 18px;
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.ahero::after {   /* 右上の淡い光。単色の板に見せないためだけの装飾 */
  content: "";
  position: absolute; right: -90px; top: -130px;
  width: 340px; height: 340px; border-radius: var(--radius-circle);
  background: radial-gradient(circle, rgba(75,124,243,0.32) 0%, rgba(75,124,243,0) 70%);
  pointer-events: none;
}
.ahero-left { grid-area: left; position: relative; z-index: 1; min-width: 0; }
.ahero-right { grid-area: right; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.ahero-split { grid-area: split; position: relative; z-index: 1; }

.ahero-label {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-2xs); letter-spacing: 0.08em;
  color: rgba(255,255,255,0.62); margin-bottom: 6px;
}
.ahero-scope {
  font-size: var(--text-3xs); letter-spacing: 0;
  background: rgba(255,255,255,0.12); border-radius: var(--radius-pill);
  padding: 2px 9px; color: rgba(255,255,255,0.9);
  max-width: 26em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ahero-val {
  font-size: var(--text-3xl); font-weight: var(--fw-bold); line-height: 1.02;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.ahero-delta {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  margin-top: 8px; font-size: var(--text-base); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.ahero-delta .up { color: var(--color-success-on-dark); }
.ahero-delta .down { color: var(--color-danger-on-dark); }
.ahero-arrow { font-size: var(--text-3xs); }
.ahero-sub { font-size: var(--text-2xs); font-weight: var(--fw-normal); color: rgba(255,255,255,0.55); }

.ahero-spark { width: 100%; height: 46px; display: block; }
.ahero-spark-cap {
  font-size: var(--text-3xs); color: rgba(255,255,255,0.42); text-align: right; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* 元本と運用益の内訳。**2色の実体で並べる**＝下地に色を敷いて片方を白で覆う作りだと、
   どこが境目か読み取りづらい。左＝元本(青)、右＝運用益(緑)で凡例の点と同じ色にする。 */
.ahero-bar {
  display: flex; height: 9px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.12); overflow: hidden;
}
.ahero-bar .seg { display: block; height: 100%; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.ahero-bar .seg.cost { background: #7fa9ff; }
.ahero-bar .seg.gain { background: var(--color-success-on-dark); }
.ahero-legend {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px;
  font-size: var(--text-xs); color: rgba(255,255,255,0.72);
  font-variant-numeric: tabular-nums;
}
.ahero-legend b { color: var(--color-text-on-accent); font-weight: var(--fw-bold); margin-left: 2px; }
.ahero-legend b.up { color: var(--color-success-on-dark); }
.ahero-legend b.down { color: var(--color-danger-on-dark); }
.ahero-legend em { font-style: normal; color: rgba(255,255,255,0.5); margin-left: 6px; font-size: var(--text-2xs); }
.ahero-legend .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-xs);
  margin-right: 6px; vertical-align: middle;
}
.ahero-legend .dot.cost { background: #7fa9ff; }
.ahero-legend .dot.gain { background: var(--color-success-on-dark); }

/* 副指標の帯。カードに分けず1枚に区切り線＝主役と競わせない */
/* 副指標の帯（.astrip）— ヒーローの下に置く「同じ対象の指標」の並び。
   **カードに分けない**のが要点。影と枠線を持つカードを並べると主役（ヒーロー）と
   視覚的に競い、どれを先に読むのかが決まらない。1枚の面を区切り線で割る。
   カードのままにするのは「もの（口座・銘柄）の一覧」＝純資産のサマリーのように
   1件ずつが独立した対象を指すもの。指標か、ものか、で使い分ける。 */
.astrip {
  display: grid;
  grid-template-columns: repeat(var(--astrip-cols, 4), 1fr);
  /* **区切り線はグリッドの隙間で作る**（1pxの gap ＋ 下地が線の色）。項目に
     border を引くと「1段目には上の線を引かない」を列数ごとに書き分ける必要があり、
     nth-child は列数の変数を受け取れない。この作りなら列数が変わっても崩れない。 */
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  margin: 10px 0 18px;
  overflow: hidden;
}
.astrip-item {
  padding: 11px 16px 12px;
  background: var(--color-surface);
  min-width: 0;
}
.astrip-label {
  font-size: var(--text-2xs); color: var(--color-text-muted);
  margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.astrip-val {
  font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--color-text);
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.astrip-val.up { color: var(--color-success-text); }
.astrip-val.down { color: var(--color-danger-text); }
.astrip-val.bud-unc-val { color: var(--color-primary); }
.astrip-val em { font-style: normal; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-subtle); margin-left: 2px; }
.astrip-sub {
  font-size: var(--text-2xs); color: var(--color-text-subtle); margin-top: 3px;
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 帯の但し書き。**帯の項目は1行で切る作り**（`.astrip-sub` は nowrap ＋ ellipsis）なので、
   複数の指標に同時にかかる断りはカードの中に押し込めず、帯の外に1行だけ置く。 */
.astrip-note {
  font-size: var(--text-2xs); color: var(--color-text-muted);
  margin: -12px 0 18px; padding: 0 2px;
}

/* 列数はクラスで指定する。**インラインの custom property は下のメディアクエリに勝ってしまう**
   （同じ変数を要素に直接置くと、狭い画面でも列が畳まれない） */
.astrip--2 { --astrip-cols: 2; }
.astrip--3 { --astrip-cols: 3; }
@media (max-width: 1100px) { .astrip { --astrip-cols: 3; } }
@media (max-width: 820px)  { .astrip { --astrip-cols: 2; } }
@media (max-width: 520px)  { .astrip { --astrip-cols: 1; } }
@media (max-width: 900px) {
  .ahero { grid-template-columns: 1fr; grid-template-areas: "left" "right" "split"; }
  .ahero-val { font-size: var(--text-2xl); }
}
@media (prefers-reduced-motion: reduce) { .ahero-bar .seg { transition: none; } }