/* assets/css/academy-ui.css — 手触りの層（規則）
 *
 * [reno 2026-09-04g] トークン（値）とは分けて、**どの画面にも効かせたい振る舞い**だけを置く。
 *
 * なぜ要るか（実測）:
 *   ・会員側の box-shadow は **全部で4つ**しか無かった。面が全部同じ高さに見えるのが
 *     「のっぺりして安っぽい」の直接の原因。
 *   ・`:hover` の規則 22 に対して `:focus-visible` は 8。しかも4画面には**1つも無い**。
 *     キーボードで触ると、どこにいるか分からない画面になる。
 *   ・数字（Newsreader）に桁揃えが入っていない。得点・進捗・KPIが並ぶ画面で桁がずれる。
 *   ・読み込み中が「読み込んでいます…」の文字だけ。骨組みが無いので、遅い回線では壊れて見える。
 *
 * 方針: **レイアウトを動かす指定は書かない**。影・フォーカス・桁揃え・押した手応えだけ。
 *   各画面のインラインstyleと喧嘩しない範囲に留める（この repo は inline style が333箇所ある）。
 */

/* --- キーボードで触れること -------------------------------------------- */
/* マウス操作では出さない（:focus ではなく :focus-visible）。 */
:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius:var(--r-s);
}
/* 濃い面の上では深緑の枠が沈むので、明るい側で示す。 */
.dark :focus-visible, .coach :focus-visible, .cta :focus-visible,
.band-dark :focus-visible, .side :focus-visible, .top :focus-visible {
  outline-color: var(--mint-l);
}

/* --- 押した手応え ------------------------------------------------------- */
button:not([disabled]):active, a[class*="btn"]:active, .chip:active, .opt:active {
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  button:active, a[class*="btn"]:active, .chip:active, .opt:active { transform: none; }
}

/* --- 数字の桁を揃える ---------------------------------------------------- */
/* 得点・進捗・KPI が縦に並ぶ画面で、桁がずれるとそれだけで作りが粗く見える。 */
[style*="Newsreader"], .num, .kpi-v, .score, .day-n, .note-n {
  font-variant-numeric: tabular-nums;
}

/* --- 面の高さ ------------------------------------------------------------ */
/* 長く弱い影。浮かせるのではなく、紙から1枚持ち上がっている程度に留める。 */
.card, .kpi, .note, .qcard, .toc, .cmp, .screen, .nt-bar,
.ask-card, .box, .faq details {
  box-shadow: var(--sh-1);
}
.dark, .coach, .cta, .price-hero, .formula, .numbox {
  box-shadow: var(--sh-2);
}

/* --- 行の手触り ---------------------------------------------------------- */
a.day, a.mock-row, .toc-l a, .ac-nav a {
  transition: background-color .15s ease, border-color .15s ease;
}

/* --- 読み込み中の骨組み --------------------------------------------------- */
/* 文字だけだと「止まっている」ようにしか見えない。形が先に出ていると待てる。 */
.loading {
  color: var(--muted);
  font-size:14px;
  padding: 26px 22px;
}
.loading::after {
  content: '';
  display: block;
  margin-top: 16px;
  height: 220px;
  border-radius: var(--r-l);
  background: linear-gradient(100deg, var(--card) 30%, var(--paper-2) 50%, var(--card) 70%);
  background-size: 300% 100%;
  animation: ac-skeleton 1.4s ease-in-out infinite;
}
@keyframes ac-skeleton { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .loading::after { animation: none; background: var(--paper-2); }
}