/* 部品の見た目（クラス名は st- で始める）。画面の CSS は部品を組み合わせ、色や秒数は theme.css の変数を使う。
   常に動く飾りは「動きを減らす設定でない・録音中でない」時だけ動かす（最後の章にまとめてある）。 */

/* ═════════════ 0. 色の割り当て（data-tone で各部品の色が変わる） ═════════════ */
[data-tone="ok"] {
  --tone: var(--ok);
  --tone-strong: var(--ok-strong);
  --tone-soft: var(--ok-soft);
  --tone-line: var(--ok-line);
}
[data-tone="warn"] {
  --tone: var(--warn);
  --tone-strong: var(--warn-strong);
  --tone-soft: var(--warn-soft);
  --tone-line: var(--warn-line);
}
[data-tone="danger"] {
  --tone: var(--danger);
  --tone-strong: var(--danger-strong);
  --tone-soft: var(--danger-soft);
  --tone-line: var(--danger-line);
}
[data-tone="info"] {
  --tone: var(--info);
  --tone-strong: var(--info-strong);
  --tone-soft: var(--info-soft);
  --tone-line: var(--info-line);
}
[data-tone="idle"] {
  --tone: var(--idle);
  --tone-strong: var(--idle);
  --tone-soft: var(--idle-soft);
  --tone-line: var(--idle-line);
}
[data-tone="gold"],
[data-tone="live"] {
  --tone: var(--gold-2);
  --tone-strong: var(--gold);
  --tone-soft: var(--gold-soft);
  --tone-line: var(--line-gold);
}
[data-tone="rec"] {
  --tone: var(--danger);
  --tone-strong: var(--rec);
  --tone-soft: var(--rec-soft);
  --tone-line: var(--danger-line);
}

/* 光の帯の細い縁（選択中・いちばん大事な面だけ）。::before に帯を敷いて縁だけ残す */
.st-edge {
  position: relative;
}
.st-edge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--band-hairline);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 絵文字の代わりの線画アイコン（dom.js の icon()） */
.st-icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  display: inline-block;
  vertical-align: -0.16em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═════════════ 1. 上部の帯（ロゴ・回番号・日付・マイク・空き・準備・ON AIR・メニュー） ═════════════ */
.st-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  background: linear-gradient(180deg, rgba(6, 10, 22, 0.92), rgba(6, 10, 22, 0.72));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.st-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(216, 180, 92, 0), rgba(216, 180, 92, 0.42) 22%, rgba(243, 223, 166, 0.55) 50%, rgba(216, 180, 92, 0.42) 78%, rgba(216, 180, 92, 0));
}
.st-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--topbar-h);
  max-width: calc(var(--page-max) + 2 * var(--page-pad));
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.st-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  color: var(--text);
  text-decoration: none;
}
.st-brand:hover {
  color: var(--text);
}
.st-brand__mark {
  width: 34px;
  height: 34px;
  flex: none;
}
.st-brand__words {
  display: grid;
  gap: 3px;
}
.st-brand__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  font-feature-settings: "palt" 1;
}
.st-brand__name b {
  font-weight: inherit;
  color: var(--silver);
}
.st-brand__name span {
  background: var(--band-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.st-brand__sub {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.34em;
  color: var(--gold-deep);
}

/* 状態の並び（放送卓の表示窓のような帯） */
.st-console {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 var(--s-2) 0 var(--s-1);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(3, 6, 13, 0.55), rgba(14, 22, 42, 0.5));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 244, 214, 0.04);
}
.st-chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
  height: 36px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-label);
  line-height: 1;
  color: var(--text-2);
  white-space: nowrap;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.st-chip + .st-chip {
  position: relative;
}
.st-chip + .st-chip::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--line-2);
}
.st-chip strong {
  color: var(--text);
  font-weight: var(--fw-head);
}
.st-chip .st-icon {
  color: var(--text-3);
}
.st-chip[data-tone] {
  color: var(--tone);
}
.st-chip[data-tone] .st-icon {
  color: var(--tone);
}
.st-chip[data-tone] strong {
  color: var(--tone);
}
.st-chip--episode strong {
  font-size: 18px;
  color: var(--gold-3);
}
/* 回の番号が食い違う時の「第5回か第6回」（黄。選ぶとカンペ画面が確定した数字に替える） */
.st-chip--episode[data-tone="warn"] strong {
  color: var(--warn);
}
.st-chip__or {
  margin: 0 0.15em;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-label);
}
/* 曜日（狭い窓では小さくする。曜日そのものは必ず出す） */
.st-chip__wd {
  margin-left: 1px;
}
/* 準備の札：広い窓は「準備 要確認 4件」、狭い窓は印と数だけ（短い方は .st-chip__short） */
.st-chip__short {
  display: none;
}
/* マイク名は切らないのが基本。とても長い名前だけ、札の幅を中身に合わせたまま省略する */
.st-chip--mic {
  flex: 0 1 auto;
  min-width: 0;
}
.st-chip__label {
  display: block;
  min-width: 0;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.st-chip {
  transition: background-color var(--d2) var(--ease-out), color var(--d2) var(--ease-out);
}
/* 準備の札は準備チェックへの入口。開いている間は金の輪 */
a.st-chip[aria-current="page"] {
  background: var(--gold-softer);
  box-shadow: inset 0 0 0 1px var(--line-gold);
}
a.st-chip:hover {
  background: rgba(230, 214, 170, 0.06);
  color: var(--text);
}
.st-console .st-onair {
  margin-right: var(--s-1);
}
.st-console__spacer {
  flex: 1;
}

/* メニュー：選ばれた所の下を、光る板がすべる（motion.js が .st-nav__glider を動かす） */
.st-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  margin-left: auto;
  padding: 4px;
  border-radius: var(--r-pill);
  background: rgba(14, 22, 42, 0.55);
  border: 1px solid var(--line);
}
.st-nav__item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 15px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-label);
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--d2) var(--ease-out);
}
.st-nav__item:hover {
  color: var(--text);
}
.st-nav__item[aria-current="page"] {
  color: var(--gold-3);
}
.st-nav__item .st-icon {
  opacity: 0.85;
}
.st-nav__glider {
  position: absolute;
  top: 4px;
  left: 0;
  height: 40px;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(243, 223, 166, 0.15), rgba(216, 180, 92, 0.06));
  box-shadow: inset 0 0 0 1px rgba(216, 180, 92, 0.38), 0 8px 20px -10px rgba(216, 180, 92, 0.55);
  opacity: 0;
  transition: transform var(--d3) var(--ease-out), opacity var(--d2) var(--ease-out);
  pointer-events: none;
}
.st-nav__glider.is-on {
  opacity: 1;
}
/* 録音中はメニューを押せない見た目にする（押すと「録音中は移動できません」と知らせる） */
body[data-recording] .st-nav__item {
  color: var(--text-3);
  cursor: not-allowed;
}
body[data-recording] .st-nav {
  opacity: 0.55;
}

/* 上部の帯の下に並ぶお知らせの帯 */
.st-bands {
  display: grid;
  gap: var(--s-3);
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--page-pad));
  margin: var(--s-4) auto 0;
  padding: 0 var(--page-pad);
}
.st-bands:empty {
  display: none;
}

/* ═════════════ 2. ボタン ═════════════ */
.st-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.07), rgba(255, 244, 214, 0) 62%), var(--surface-2);
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: var(--fw-label);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    transform var(--d2) var(--ease-spring),
    border-color var(--d2) var(--ease-out),
    box-shadow var(--d3) var(--ease-out),
    color var(--d2) var(--ease-out);
}
/* ホバーの明るさは重ねた面の opacity で出す（地の色そのものは動かさない） */
.st-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.1), rgba(255, 244, 214, 0.03));
  opacity: 0;
  transition: opacity var(--d2) var(--ease-out);
}
.st-btn:hover {
  color: var(--text);
  border-color: rgba(230, 214, 170, 0.36);
  transform: scale(1.015);
}
.st-btn:hover::before {
  opacity: 1;
}
.st-btn:active {
  transform: scale(0.97);
  transition-duration: var(--d1);
}
.st-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.st-btn:disabled,
.st-btn[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--text-3);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
  transform: none;
}
.st-btn:disabled::before,
.st-btn[aria-disabled="true"]::before {
  opacity: 0;
}
.st-btn .st-icon {
  width: 1.05em;
  height: 1.05em;
}

/* 主ボタン：1画面に1つだけ。光の帯の地、ホバーで光沢が左→右へ流れる */
.st-btn--primary {
  min-height: 62px;
  min-width: 240px;
  padding: 0 36px;
  border: 0;
  background: var(--band);
  color: var(--text-ink);
  font-weight: var(--fw-display);
  letter-spacing: 0.04em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(110, 70, 10, 0.4),
    var(--glow-gold-soft);
}
.st-btn--primary::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04));
}
.st-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.62) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-120%);
  transition: transform var(--d-sheen) var(--ease-out);
  pointer-events: none;
}
.st-btn--primary:hover {
  color: var(--text-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(110, 70, 10, 0.4),
    var(--glow-gold);
}
.st-btn--primary:hover::after {
  transform: translateX(120%);
}
.st-btn--primary:disabled,
.st-btn--primary[aria-disabled="true"] {
  border: 1px solid var(--line-2);
  background: repeating-linear-gradient(135deg, rgba(230, 214, 170, 0.035) 0 10px, rgba(230, 214, 170, 0) 10px 20px), var(--surface);
  color: var(--text-3);
  box-shadow: none;
}
.st-btn--primary:disabled::after,
.st-btn--primary[aria-disabled="true"]::after {
  display: none;
}

/* 危険（消す・やめる）：小さく、主ボタンから離して右下に置く */
.st-btn--danger {
  background: transparent;
  border-color: var(--danger-line);
  color: var(--danger);
  box-shadow: none;
}
.st-btn--danger::before {
  background: var(--danger-soft);
}
.st-btn--danger:hover {
  color: #ffb3b3;
  border-color: rgba(255, 147, 147, 0.7);
}

/* 控えめ（枠なし） */
.st-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
  box-shadow: none;
}
.st-btn--ghost:hover {
  border-color: var(--line-2);
}

.st-btn--sm {
  min-height: 44px;
  padding: 0 16px;
  gap: 8px;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
}
.st-btn--primary.st-btn--sm {
  min-width: 0;
  min-height: 46px;
  padding: 0 22px;
}
.st-btn--lg {
  min-height: 70px;
  padding: 0 44px;
  font-size: var(--fs-lead);
  border-radius: var(--r-md);
}
.st-btn--block {
  display: flex;
  width: 100%;
}
.st-btn--icon {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--r-pill);
}
/* 押している間（core の busy() が付ける） */
.st-btn[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}
.st-btn[aria-busy="true"] > :not(.st-spinner) {
  opacity: 0.75;
}

/* ボタンの並び。消す・やめるは .st-actions__away で右へ離す */
.st-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.st-actions__away {
  margin-left: auto;
}
.st-actions--center {
  justify-content: center;
}
.st-actions--end {
  justify-content: flex-end;
}

/* 押した所から広がる光（motion.js） */
.st-ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 214, 0.35) 0%, rgba(255, 244, 214, 0) 70%);
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
  animation: st-ripple var(--d4) var(--ease-out) forwards;
}
@keyframes st-ripple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

/* ═════════════ 3. 録音ボタン（真鍮の縁に赤い芯。2重の光の輪がゆっくり脈打つ） ═════════════ */
.st-rec-wrap {
  display: inline-grid;
  justify-items: center;
  gap: var(--s-3);
}
.st-rec {
  position: relative;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #1b0b10 0 53%, rgba(0, 0, 0, 0) 54%),
    conic-gradient(from 200deg, #6b5534, #e7c877 18%, #8a6a35 34%, #f3dfa6 52%, #7a5f30 70%, #d8b45c 86%, #6b5534);
  box-shadow:
    0 22px 46px -18px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: transform var(--d2) var(--ease-spring);
}
.st-rec::before,
.st-rec::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 98, 88, 0.6);
  opacity: 0;
  pointer-events: none;
}
.st-rec__core {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffb0a2 0%, var(--rec-hot) 16%, var(--rec) 42%, var(--rec-deep) 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.4),
    inset 0 -8px 14px rgba(70, 0, 10, 0.55),
    0 0 26px rgba(255, 75, 75, 0.5);
  transition: transform var(--d2) var(--ease-spring), border-radius var(--d3) var(--ease-out);
}
.st-rec:hover {
  transform: scale(1.03);
}
.st-rec:hover .st-rec__core {
  transform: scale(1.04);
}
.st-rec:active {
  transform: scale(0.95);
}
.st-rec:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), 0 22px 46px -18px rgba(0, 0, 0, 0.9);
}
.st-rec:disabled {
  cursor: not-allowed;
  filter: saturate(0.15) brightness(0.7);
  transform: none;
}
/* 録音中は芯が四角（止める印）になる */
.st-rec[data-state="live"] .st-rec__core {
  width: 52px;
  height: 52px;
  border-radius: 12px;
}
.st-rec-label {
  font-size: var(--fs-lead);
  font-weight: var(--fw-head);
  letter-spacing: 0.04em;
}
.st-rec-hint {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* 小さい録音系の丸（「あとで聴く印」「一時停止」など、録音画面の副ボタン用） */
.st-round {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line-3);
  background: radial-gradient(circle at 50% 30%, rgba(255, 244, 214, 0.08), rgba(255, 244, 214, 0) 60%), var(--surface-2);
  color: var(--text);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: transform var(--d2) var(--ease-spring), border-color var(--d2) var(--ease-out);
}
.st-round:hover {
  transform: scale(1.04);
  border-color: rgba(230, 214, 170, 0.38);
}
.st-round:active {
  transform: scale(0.95);
}
.st-round .st-icon {
  width: 26px;
  height: 26px;
}

/* ═════════════ 4. ON AIR ランプ（消えている時は暗い看板、録音中だけ赤く灯る） ═════════════ */
.st-onair {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  height: 32px;
  padding: 0 13px 0 11px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 98, 88, 0.16);
  background: linear-gradient(180deg, #24111a, #170a10);
  color: #6f3a45;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-display);
  letter-spacing: 0.24em;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 14px rgba(0, 0, 0, 0.65);
  transition: color var(--d3) var(--ease-out), border-color var(--d3) var(--ease-out);
}
.st-onair__lamp {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4a1c24;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.14);
}
.st-onair[data-on],
body[data-recording] .st-onair {
  border-color: rgba(255, 170, 160, 0.75);
  background: radial-gradient(120% 160% at 50% 0%, #ff8b7c 0%, #e5313b 52%, #8c1119 100%);
  color: #fff7f2;
  text-shadow: 0 0 6px rgba(255, 225, 215, 0.95), 0 0 16px rgba(255, 90, 80, 0.85);
  box-shadow: var(--glow-rec), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  animation: st-ignite 760ms steps(1, end) 1;
}
.st-onair[data-on] .st-onair__lamp,
body[data-recording] .st-onair__lamp {
  background: #fffaf5;
  box-shadow: 0 0 6px #fff, 0 0 14px rgba(255, 120, 110, 0.9);
}
.st-onair--lg {
  height: 48px;
  padding: 0 20px 0 16px;
  font-size: 18px;
  gap: 12px;
  border-radius: var(--r-md);
}
.st-onair--lg .st-onair__lamp {
  width: 12px;
  height: 12px;
}
/* 灯る瞬間だけ、ネオン管のように数回またたく（1回きり） */
@keyframes st-ignite {
  0% {
    opacity: 0.35;
  }
  12% {
    opacity: 1;
  }
  20% {
    opacity: 0.5;
  }
  32% {
    opacity: 1;
  }
  40% {
    opacity: 0.75;
  }
  52%,
  100% {
    opacity: 1;
  }
}

/* ═════════════ 5. 面：ガラス・カード・台本カード・定義の並び ═════════════ */
.st-glass {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  background: var(--glass-sheen), var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-2);
}
.st-card {
  position: relative;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: var(--glass-sheen), var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-2);
}
.st-card + .st-card {
  margin-top: var(--s-5);
}
.st-grid > .st-card,
.st-stack > .st-card,
.st-row > .st-card {
  margin-top: 0;
}
.st-card--tight {
  padding: var(--s-5);
}
/* 脇役の面（この回・あなたがやること・記録など）：縁を消し、地を薄くして静かにする */
.st-card--quiet {
  border-color: transparent;
  background: var(--glass-sheen), var(--glass-soft);
  box-shadow: var(--glass-edge);
}
/* 主役の面（1画面に1つ）：光の帯の縁（1.5px）・上辺の光の線と光だまり・面の奥に溜まる金の光。
   飾りはすべて背景の重ねと ::before で描く（::after は画面の CSS が飾りに使ってよい） */
.st-card--accent {
  border-width: 0;
  background:
    linear-gradient(90deg, rgba(251, 241, 214, 0), rgba(251, 241, 214, 0.85), rgba(251, 241, 214, 0)) 50% 0 / 64% 1px no-repeat,
    var(--hero-top),
    radial-gradient(120% 90% at 0% 0%, rgba(216, 180, 92, 0.1), rgba(216, 180, 92, 0) 55%),
    var(--glass-sheen),
    var(--glass);
  box-shadow: var(--shadow-2), var(--hero-glow);
}
.st-card--accent::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--hero-edge);
  background: var(--band-hairline);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* 状態の色：広い面に色の地は敷かず、縁と左の細い帯だけを色にする（紺の上で濁らせない） */
.st-card[data-tone] {
  border-color: var(--tone-line);
  background:
    linear-gradient(var(--tone-strong), var(--tone-strong)) 0 0 / 3px 100% no-repeat,
    var(--glass-sheen),
    var(--glass);
}
/* 押せるカード：ホバーで外側へ少し広がる（端でちらつかない） */
.st-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--d3) var(--ease-out), border-color var(--d2) var(--ease-out), box-shadow var(--d3) var(--ease-out);
}
.st-card--link:hover {
  color: inherit;
  transform: scale(1.01);
  border-color: var(--line-3);
  box-shadow: var(--shadow-3);
}
.st-card__head {
  display: flex;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.st-card__title {
  font-size: 24px;
}
.st-card__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.st-card__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  background: radial-gradient(circle at 50% 30%, rgba(243, 223, 166, 0.16), rgba(216, 180, 92, 0.04));
  color: var(--gold-3);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-display);
  font-variant-numeric: tabular-nums;
}
.st-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

/* 項目名と中身の並び（カンペのテーマ・冒頭・流れ・CTA、要約など） */
.st-defs {
  display: grid;
  grid-template-columns: minmax(6em, max-content) 1fr;
  gap: var(--s-4) var(--s-6);
  margin: 0;
}
.st-defs > dt {
  padding-top: 0.28em;
  color: var(--gold-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-label);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.st-defs > dd {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.st-defs > dd + dt,
.st-defs > dd + dt + dd {
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* 引用（文字起こしの該当部分など。AIの文は textContent で入れる） */
.st-quote {
  position: relative;
  margin: 0;
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  background: rgba(3, 6, 13, 0.4);
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.st-quote::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(216, 180, 92, 0.2));
}

/* 画面の見出しの並び */
.st-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-6);
}
.st-pagehead__text {
  display: grid;
  gap: var(--s-2);
}
.st-pagehead__lead {
  color: var(--text-2);
  font-size: var(--fs-lead);
}

/* 折りたたみ */
.st-details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-soft);
}
.st-details > summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: var(--s-2) var(--s-4);
  list-style: none;
  cursor: pointer;
  font-weight: var(--fw-label);
  border-radius: inherit;
}
.st-details > summary::-webkit-details-marker {
  display: none;
}
.st-details > summary::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--gold-2);
  border-bottom: 2px solid var(--gold-2);
  transform: rotate(-45deg);
  transition: transform var(--d2) var(--ease-out);
}
.st-details[open] > summary::before {
  transform: rotate(45deg);
}
.st-details > summary:hover {
  background: rgba(230, 214, 170, 0.04);
}
.st-details__body {
  padding: 0 var(--s-4) var(--s-4) calc(var(--s-4) + 21px);
}

/* 一覧の表（履歴など） */
.st-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.st-table th {
  padding: var(--s-2) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--line-2);
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-label);
  letter-spacing: 0.06em;
  text-align: left;
  white-space: nowrap;
}
.st-table td {
  padding: var(--s-4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.st-table tbody tr {
  transition: background-color var(--d2) var(--ease-out);
}
.st-table tbody tr:hover {
  background: rgba(230, 214, 170, 0.035);
}
.st-table .st-num {
  white-space: nowrap;
}

/* ═════════════ 6. 帯（緑・黄・赤・青のお知らせ） ═════════════ */
.st-band {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--tone-line, var(--line-2));
  background: linear-gradient(90deg, var(--tone-soft, var(--glass-soft)), rgba(0, 0, 0, 0) 70%), var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.st-band::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tone-strong, var(--gold));
  box-shadow: 0 0 14px var(--tone-strong, var(--gold));
}
.st-band__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tone-soft, var(--gold-soft));
  color: var(--tone, var(--gold-2));
}
.st-band__icon .st-icon {
  width: 21px;
  height: 21px;
}
.st-band__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.st-band__title {
  font-weight: var(--fw-head);
  color: var(--tone, var(--text));
}
.st-band__text {
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.st-band__list {
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.st-band__list li {
  display: flex;
  gap: var(--s-2);
  color: var(--text);
}
.st-band__list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.7em;
  border-radius: 50%;
  background: var(--tone, var(--gold));
}
.st-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: flex-end;
}
.st-band--compact {
  padding: var(--s-2) var(--s-4);
  gap: var(--s-3);
}
.st-band--compact .st-band__icon {
  width: 30px;
  height: 30px;
}
/* 画面全体の警告（マイクが外れた時など） */
.st-band--alarm {
  padding: var(--s-5) var(--s-6);
  font-size: var(--fs-lead);
  border-width: 2px;
}

/* ═════════════ 7. 状態の印（✓ 完了・● 実行中・! うまくいきませんでした など） ═════════════ */
.st-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px 0 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--tone-line, var(--line-2));
  background: var(--tone-soft, var(--glass-soft));
  color: var(--tone, var(--text-2));
  font-size: var(--fs-sm);
  font-weight: var(--fw-label);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.st-mark .st-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.3;
}
.st-mark--plain {
  border-color: transparent;
  background: none;
  padding: 0;
  height: auto;
}
.st-mark--lg {
  height: 40px;
  padding: 0 16px 0 12px;
  font-size: var(--fs-body);
}
.st-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--tone-strong, var(--gold));
  box-shadow: 0 0 10px var(--tone-strong, var(--gold));
}
/* 数（あと3項目・12件など） */
.st-count {
  display: inline-flex;
  align-items: center;
  min-width: 28px;
  height: 26px;
  padding: 0 9px;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--tone-soft, rgba(230, 214, 170, 0.1));
  color: var(--tone, var(--text-2));
  font-size: 15px;
  font-weight: var(--fw-head);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* 字数のカウンタ（24/30字）。超えたら data-over で赤 */
.st-counter {
  font-size: var(--fs-sm);
  font-weight: var(--fw-label);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.st-counter[data-over] {
  color: var(--danger);
}
.st-counter[data-unchecked] {
  color: var(--warn);
}
/* 「推奨」などの小さな札。読ませる言葉なので注記の最小（17px）。飾りの英字だけ .st-tag--deco で 13px */
.st-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-gold);
  background: var(--gold-soft);
  color: var(--gold-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-label);
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.st-tag--deco {
  height: 24px;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
}
.st-tag[data-tone] {
  border-color: var(--tone-line);
  background: var(--tone-soft);
  color: var(--tone);
}

/* ═════════════ 8. 進行表（放送の進行表に見立てた工程の一覧） ═════════════ */
.st-steps {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  counter-reset: st-step;
}
.st-step {
  --rail-x: 66px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 34px 32px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  counter-increment: st-step;
  transition: background-color var(--d3) var(--ease-out);
}
/* 工程をつなぐ縦の線 */
.st-step::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(var(--s-5) + 34px + var(--s-4) + 15px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line-2);
}
.st-step:first-child::before {
  top: 30px;
}
.st-step:last-child::before {
  bottom: calc(100% - 30px);
}
.st-step:only-child::before {
  display: none;
}
.st-step[data-state="done"]::before,
.st-step[data-state="carried"]::before {
  background: linear-gradient(180deg, rgba(216, 180, 92, 0.75), rgba(216, 180, 92, 0.45));
}
.st-step__cue {
  padding-top: 5px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.st-step__cue:empty::before {
  content: counter(st-step, decimal-leading-zero);
}
.st-step__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--line-3);
  background: var(--bg-elev);
  color: var(--text-3);
}
/* 色付きの印も、縦の線が透けないよう下に地を敷く */
.st-step__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--bg-elev);
}
.st-step__icon .st-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}
.st-step__main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.st-step__label {
  font-weight: var(--fw-label);
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.st-step__detail {
  color: var(--text-2);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.st-step__note {
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.st-step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.st-step__side {
  display: grid;
  justify-items: end;
  gap: 4px;
  padding-top: 3px;
  text-align: right;
}
.st-step__status {
  font-size: var(--fs-sm);
  font-weight: var(--fw-label);
  color: var(--text-3);
  white-space: nowrap;
}
.st-step__time {
  font-size: var(--fs-sm);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 実行中：金の縁、内側に光が流れる */
.st-step[data-state="running"] {
  background: linear-gradient(90deg, rgba(216, 180, 92, 0.14), rgba(216, 180, 92, 0.03) 70%);
  box-shadow: inset 0 0 0 1px rgba(216, 180, 92, 0.28);
}
.st-step[data-state="running"]::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(100deg, rgba(243, 223, 166, 0) 30%, rgba(243, 223, 166, 0.13) 50%, rgba(243, 223, 166, 0) 70%);
  transform: translateX(-100%);
}
.st-step[data-state="running"] .st-step__icon {
  border-color: var(--gold);
  color: var(--gold-2);
  background: radial-gradient(circle, rgba(216, 180, 92, 0.25), rgba(216, 180, 92, 0.05));
}
.st-step[data-state="running"] .st-step__icon::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 12px var(--gold);
}
.st-step[data-state="running"] .st-step__label {
  color: var(--text);
}
.st-step[data-state="running"] .st-step__status,
.st-step[data-state="running"] .st-step__time {
  color: var(--gold-2);
}

/* 完了・前回の結果：金色の印がすっと入る */
.st-step[data-state="done"] .st-step__icon,
.st-step[data-state="carried"] .st-step__icon {
  border-color: rgba(216, 180, 92, 0.85);
  background: radial-gradient(circle at 50% 30%, rgba(243, 223, 166, 0.38), rgba(216, 180, 92, 0.16));
  color: var(--gold-3);
}
.st-step[data-state="carried"] .st-step__icon {
  background: var(--bg-elev);
  border-style: dashed;
}
.st-step[data-state="done"] .st-step__label,
.st-step[data-state="carried"] .st-step__label {
  color: var(--text);
}
.st-step[data-state="done"] .st-step__status,
.st-step[data-state="carried"] .st-step__status {
  color: var(--gold-2);
}

/* うまくいかなかった・止まった・確認が必要 */
.st-step[data-state="failed"] {
  background: linear-gradient(90deg, var(--danger-soft), rgba(0, 0, 0, 0) 75%);
  box-shadow: inset 0 0 0 1px rgba(255, 147, 147, 0.26);
}
.st-step[data-state="failed"] .st-step__icon {
  border-color: var(--danger-strong);
  background: var(--danger-soft);
  color: var(--danger);
}
.st-step[data-state="failed"] .st-step__label,
.st-step[data-state="failed"] .st-step__status {
  color: var(--danger);
}
.st-step[data-state="blocked"],
.st-step[data-state="interrupted"] {
  background: linear-gradient(90deg, var(--warn-soft), rgba(0, 0, 0, 0) 75%);
  box-shadow: inset 0 0 0 1px rgba(255, 211, 110, 0.24);
}
.st-step[data-state="blocked"] .st-step__icon,
.st-step[data-state="interrupted"] .st-step__icon {
  border-color: var(--warn-strong);
  background: var(--warn-soft);
  color: var(--warn);
}
.st-step[data-state="blocked"] .st-step__label,
.st-step[data-state="blocked"] .st-step__status,
.st-step[data-state="interrupted"] .st-step__label,
.st-step[data-state="interrupted"] .st-step__status {
  color: var(--warn);
}
/* 待機・飛ばした・取り消し・未実行 */
.st-step[data-state="skipped"] .st-step__icon,
.st-step[data-state="canceled"] .st-step__icon,
.st-step[data-state="not_run"] .st-step__icon {
  border-style: dashed;
}
.st-step[data-state="skipped"] .st-step__label,
.st-step[data-state="canceled"] .st-step__label,
.st-step[data-state="not_run"] .st-step__label {
  color: var(--text-3);
}
/* 枝分かれ（A2 の X記事・Substack など）の小さな進み具合 */
.st-substeps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

/* ═════════════ 9. タブ（記事の媒体など。下の板がすべる） ═════════════ */
.st-tabs {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 5px;
  border-radius: var(--r-md);
  background: rgba(3, 6, 13, 0.4);
  border: 1px solid var(--line);
}
.st-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-2);
  font-weight: var(--fw-label);
  transition: color var(--d2) var(--ease-out);
}
.st-tab:hover {
  color: var(--text);
}
.st-tab[aria-selected="true"] {
  color: var(--text);
}
.st-tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.st-tab .st-dot {
  width: 8px;
  height: 8px;
}
.st-tabs__ink {
  position: absolute;
  top: 5px;
  left: 0;
  bottom: 5px;
  width: 0;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.08), rgba(255, 244, 214, 0.02)), var(--surface-3);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-2);
  opacity: 0;
  transition: transform var(--d3) var(--ease-out), opacity var(--d2) var(--ease-out);
  pointer-events: none;
}
.st-tabs__ink::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--band);
  box-shadow: 0 0 10px rgba(216, 180, 92, 0.7);
}
.st-tabs__ink.is-on {
  opacity: 1;
}
/* JS が無い時の選択の印 */
.st-tabs:not(.has-ink) .st-tab[aria-selected="true"] {
  background: var(--surface-3);
}
.st-tabpanel {
  margin-top: var(--s-5);
}

/* ═════════════ 10. 入力欄・選ぶ物 ═════════════ */
.st-field {
  display: grid;
  gap: var(--s-2);
}
.st-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-weight: var(--fw-label);
}
.st-field__hint {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.st-field__error {
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: var(--fw-label);
}
.st-input,
.st-textarea,
.st-select {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 12px 16px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  background: rgba(3, 6, 13, 0.55);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.5;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  transition: border-color var(--d2) var(--ease-out), box-shadow var(--d2) var(--ease-out), background-color var(--d2) var(--ease-out);
}
.st-input::placeholder,
.st-textarea::placeholder {
  color: var(--text-3);
  opacity: 1;
}
.st-input:hover,
.st-textarea:hover,
.st-select:hover {
  border-color: rgba(230, 214, 170, 0.34);
}
.st-input:focus,
.st-textarea:focus,
.st-select:focus {
  outline: none;
  border-color: var(--line-gold);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 4px var(--gold-soft);
}
.st-textarea {
  min-height: 200px;
  padding: 16px 18px;
  line-height: 1.8;
  resize: vertical;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* 原稿を読む・直すための大きな欄 */
.st-textarea--doc {
  min-height: 420px;
  font-size: 19px;
  line-height: 1.9;
  background: rgba(3, 6, 13, 0.4);
}
.st-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1.5l6 6 6-6' fill='none' stroke='%23e7c877' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
/* 拾えなかった欄：地は普通の欄のまま、縁と左の 3px だけを黄にする（広い黄の地は紺の上で茶色く濁るため） */
.st-input[data-state="missing"],
.st-textarea[data-state="missing"],
.st-select[data-state="missing"] {
  border-color: var(--warn-line);
  box-shadow: inset 3px 0 0 var(--warn-strong), inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.st-input[data-state="missing"]:focus,
.st-textarea[data-state="missing"]:focus,
.st-select[data-state="missing"]:focus {
  box-shadow: inset 3px 0 0 var(--warn-strong), inset 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 4px var(--warn-soft);
}
.st-input[aria-invalid="true"],
.st-textarea[aria-invalid="true"],
.st-input[data-state="error"],
.st-textarea[data-state="error"] {
  border-color: var(--danger-line);
}
.st-input:disabled,
.st-textarea:disabled,
.st-select:disabled,
.st-input[readonly],
.st-textarea[readonly] {
  cursor: not-allowed;
  border-style: dashed;
  color: var(--text-2);
  background: rgba(3, 6, 13, 0.3);
}

/* チェックとラジオ（金の印） */
.st-option {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: 44px;
  padding: 8px 0;
  cursor: pointer;
  line-height: 1.5;
}
.st-option > span {
  padding-top: 1px;
}
.st-check,
.st-radio {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  margin: 1px 0 0;
  border: 1.5px solid rgba(230, 214, 170, 0.42);
  background: rgba(3, 6, 13, 0.55);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: border-color var(--d2) var(--ease-out), box-shadow var(--d2) var(--ease-out);
}
.st-check {
  border-radius: 7px;
}
.st-radio {
  border-radius: 50%;
}
.st-check::after,
.st-radio::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--d2) var(--ease-out), transform var(--d2) var(--ease-spring);
}
.st-check::after {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23171106' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px no-repeat,
    var(--band);
}
.st-radio::after {
  inset: 5px;
  background: var(--band);
  box-shadow: 0 0 10px rgba(216, 180, 92, 0.7);
}
.st-check:checked,
.st-radio:checked {
  border-color: var(--gold-2);
}
.st-check:checked::after,
.st-radio:checked::after {
  opacity: 1;
  transform: none;
}
.st-check:hover,
.st-radio:hover {
  border-color: var(--gold-2);
}
.st-check:focus-visible,
.st-radio:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.st-check:disabled,
.st-radio:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.st-option:has(:disabled) {
  cursor: not-allowed;
  color: var(--text-3);
}

/* オン・オフのスイッチ */
.st-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 54px;
  height: 30px;
  margin: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-3);
  background: rgba(3, 6, 13, 0.6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: background-color var(--d3) var(--ease-out), border-color var(--d3) var(--ease-out);
}
.st-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e8e2d2, #9d978a);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: transform var(--d3) var(--ease-spring);
}
.st-switch:checked {
  border-color: var(--gold-2);
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-2));
}
.st-switch:checked::before {
  transform: translateX(24px);
  background: linear-gradient(180deg, #fffaf0, #f3dfa6);
}
.st-switch:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* 並んだ選択肢（◉標準 ○強め ○なし のような切り替え） */
.st-choices {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
  border-radius: var(--r-md);
  background: rgba(3, 6, 13, 0.45);
  border: 1px solid var(--line);
}
.st-choice {
  position: relative;
  display: inline-flex;
}
.st-choice > input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.st-choice > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-weight: var(--fw-label);
  transition: color var(--d2) var(--ease-out), background-color var(--d2) var(--ease-out), box-shadow var(--d2) var(--ease-out);
}
.st-choice:hover > span {
  color: var(--text);
}
.st-choice > input:checked + span {
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.08), rgba(255, 244, 214, 0.02)), var(--surface-3);
  color: var(--gold-3);
  box-shadow: inset 0 0 0 1px var(--line-gold), 0 6px 16px -10px rgba(216, 180, 92, 0.65);
}
.st-choice > input:focus-visible + span {
  box-shadow: var(--focus-ring);
}
.st-choice > input:disabled + span {
  color: var(--text-3);
  cursor: not-allowed;
}

/* 1行ずつ選ぶ札（タイトル候補など）。選ぶと光の帯の縁 */
.st-pick {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--glass-soft);
  cursor: pointer;
  transition: border-color var(--d2) var(--ease-out), background-color var(--d2) var(--ease-out), transform var(--d3) var(--ease-out);
}
.st-pick:hover {
  border-color: var(--line-3);
  transform: scale(1.005);
}
.st-pick:has(input:checked) {
  border-color: transparent;
  background: radial-gradient(110% 120% at 0% 0%, rgba(216, 180, 92, 0.12), rgba(216, 180, 92, 0) 60%), var(--glass);
}
.st-pick:has(input:checked)::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--band-hairline);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.st-pick:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}
.st-pick__text {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.st-pick__sub {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.st-pick__side {
  display: grid;
  justify-items: end;
  gap: 6px;
}

/* スライダー（つまみはミキサーのフェーダー） */
.st-range {
  --fill: 50%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 40px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.st-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(90deg, var(--gold-deep), var(--gold-2)) 0 / var(--fill) 100% no-repeat,
    rgba(230, 214, 170, 0.13);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.st-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 32px;
  margin-top: -13px;
  border-radius: 6px;
  border: 1px solid rgba(60, 40, 10, 0.6);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 46%, rgba(40, 26, 6, 0.75) 46% 54%, rgba(0, 0, 0, 0) 54%),
    linear-gradient(180deg, #fbf1d6 0%, #e7c877 40%, #a8843a 100%);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: transform var(--d2) var(--ease-spring);
}
.st-range:hover::-webkit-slider-thumb {
  transform: scale(1.08);
}
.st-range:active::-webkit-slider-thumb {
  transform: scale(0.96);
}
.st-range:focus-visible {
  outline: none;
}
.st-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold-3);
}
.st-range::-moz-range-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(230, 214, 170, 0.13);
}
.st-range::-moz-range-progress {
  height: 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-2));
}
.st-range::-moz-range-thumb {
  width: 22px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(60, 40, 10, 0.6);
  background: linear-gradient(180deg, #fbf1d6 0%, #e7c877 40%, #a8843a 100%);
}

/* 取り込みの受け皿（ドラッグ＆ドロップ） */
.st-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-6);
  border-radius: var(--r-xl);
  border: 1.5px dashed rgba(230, 214, 170, 0.3);
  background: radial-gradient(60% 80% at 50% 0%, rgba(216, 180, 92, 0.08), rgba(216, 180, 92, 0) 70%), var(--glass-soft);
  text-align: center;
  transition: border-color var(--d3) var(--ease-out), background-color var(--d3) var(--ease-out);
}
.st-drop__icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  background: radial-gradient(circle at 50% 30%, rgba(243, 223, 166, 0.2), rgba(216, 180, 92, 0.04));
  color: var(--gold-2);
  transition: transform var(--d3) var(--ease-spring);
}
.st-drop__icon .st-icon {
  width: 34px;
  height: 34px;
}
.st-drop__title {
  font-size: var(--fs-lead);
  font-weight: var(--fw-head);
}
.st-drop[data-over] {
  border-color: var(--gold-2);
  border-style: solid;
  background: radial-gradient(60% 80% at 50% 0%, rgba(216, 180, 92, 0.2), rgba(216, 180, 92, 0) 70%), var(--glass);
}
.st-drop[data-over] .st-drop__icon {
  transform: translateY(-6px) scale(1.06);
}

/* 進み具合のバー（光の帯で満ちていく） */
.st-progress {
  --p: 0;
  position: relative;
  height: 10px;
  border-radius: var(--r-pill);
  background: rgba(230, 214, 170, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.st-progress__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--band);
  transform-origin: left center;
  transform: scaleX(var(--p));
  transition: transform var(--d3) var(--ease-out);
  box-shadow: 0 0 12px rgba(216, 180, 92, 0.6);
}
.st-progress[data-indeterminate] .st-progress__fill {
  transform: translateX(-100%) scaleX(0.4);
}

/* ═════════════ 11. ダイアログ ═════════════ */
.st-dialog {
  width: min(640px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background: var(--glass-sheen), var(--glass-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text);
  box-shadow: var(--shadow-3);
  overflow: auto;
}
.st-dialog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, rgba(216, 180, 92, 0), rgba(243, 223, 166, 0.85), rgba(216, 180, 92, 0));
}
.st-dialog[data-tone="danger"]::before {
  background: linear-gradient(90deg, rgba(236, 90, 90, 0), rgba(255, 147, 147, 0.85), rgba(236, 90, 90, 0));
}
.st-dialog::backdrop {
  background: rgba(3, 6, 13, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.st-dialog__inner {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-6) var(--s-5);
}
.st-dialog__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tone-soft, var(--gold-soft));
  color: var(--tone, var(--gold-2));
}
.st-dialog__icon .st-icon {
  width: 24px;
  height: 24px;
}
.st-dialog__title {
  font-size: 26px;
}
.st-dialog__body {
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.st-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.st-dialog__actions .st-btn--primary {
  min-width: 180px;
}
/* 見本のように画面の中に並べて見せる時 */
.st-dialog--inline {
  position: relative;
  display: block;
  margin: 0;
}

/* ═════════════ 12. トースト（上の帯の下の右に、右からすっと出る短い知らせ。Mac の通知と同じ場所） ═════════════ */
/* 画面の主ボタンの列（中央・下）と重ならないよう、右上に固定する */
.st-toasts {
  position: fixed;
  top: calc(var(--topbar-h) + var(--s-3));
  right: max(16px, calc((100vw - var(--page-max)) / 2 - var(--s-4)));
  z-index: var(--z-toast);
  display: grid;
  justify-items: end;
  gap: var(--s-2);
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}
.st-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 60px;
  max-width: 100%;
  padding: 10px 10px 10px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--glass-sheen), var(--glass-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-3), inset 3px 0 0 var(--tone-strong, var(--gold));
  transition: opacity var(--d2) var(--ease-out), transform var(--d2) var(--ease-out);
}
.st-toast__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tone-soft, var(--gold-soft));
  color: var(--tone, var(--gold-2));
}
.st-toast__icon .st-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.3;
}
.st-toast__msg {
  flex: 1;
  font-weight: var(--fw-label);
  overflow-wrap: anywhere;
  padding-right: var(--s-2);
}
.st-toast__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-3);
  transition: color var(--d2) var(--ease-out), background-color var(--d2) var(--ease-out);
}
.st-toast__close:hover {
  color: var(--text);
  background: rgba(230, 214, 170, 0.08);
}
.st-toast.is-leaving {
  opacity: 0;
  transform: translateX(18px) scale(0.98);
}

/* ═════════════ 13. 音量計（VU メーター風の段）と波形 ═════════════ */
/* --level と --peak は 0〜1。core の setMeter() が入れる。光る段は transform だけで見せる */
.st-vu {
  --level: 0;
  --peak: 0;
  --seg: 7px;
  --gap: 2px;
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 20px;
  padding: 4px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #01030a, #050a16);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 244, 214, 0.04);
  overflow: hidden;
}
.st-vu__off,
.st-vu__lit {
  position: absolute;
  inset: 4px;
  border-radius: 2px;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(var(--seg) - var(--gap)), transparent calc(var(--seg) - var(--gap)) var(--seg));
  mask: repeating-linear-gradient(90deg, #000 0 calc(var(--seg) - var(--gap)), transparent calc(var(--seg) - var(--gap)) var(--seg));
}
.st-vu__off {
  background: var(--vu-off);
}
.st-vu__window {
  position: absolute;
  inset: 4px;
  overflow: hidden;
  transform: translateX(calc((var(--level) - 1) * 100%));
  transition: transform 90ms linear;
  will-change: transform;
}
.st-vu__window > .st-vu__lit {
  inset: 0;
  background: linear-gradient(90deg, var(--vu-low) 0%, var(--vu-low) 60%, var(--vu-mid) 70%, var(--vu-mid) 84%, var(--vu-high) 90%, var(--vu-high) 100%);
  transform: translateX(calc((1 - var(--level)) * 100%));
  transition: transform 90ms linear;
  will-change: transform;
  filter: drop-shadow(0 0 3px rgba(111, 213, 155, 0.6));
}
.st-vu__peak {
  position: absolute;
  inset: 4px;
  transform: translateX(calc((var(--peak) - 1) * 100%));
  transition: transform 300ms var(--ease-out);
  pointer-events: none;
}
.st-vu__peak::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 1px;
  background: var(--champagne);
  box-shadow: 0 0 6px rgba(251, 241, 214, 0.9);
  opacity: calc(var(--peak) * 4);
}
.st-vu[data-clip] {
  border-color: var(--danger-line);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--danger-line), 0 0 18px rgba(236, 90, 90, 0.45);
}
.st-vu--lg {
  height: 30px;
  padding: 5px;
  --seg: 9px;
  --gap: 3px;
}
.st-vu--lg .st-vu__off,
.st-vu--lg .st-vu__window,
.st-vu--lg .st-vu__peak {
  inset: 5px;
}
.st-vu--mini {
  width: 62px;
  height: 14px;
  padding: 3px;
  --seg: 5px;
  --gap: 1.5px;
  border-radius: 4px;
}
.st-vu--mini .st-vu__off,
.st-vu--mini .st-vu__window,
.st-vu--mini .st-vu__peak {
  inset: 3px;
}
/* 目盛り（-60・-18・-6・0 dB など。飾りの小さな数字） */
.st-vu-scale {
  position: relative;
  max-width: 560px;
  height: 18px;
  margin-top: 4px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.st-vu-scale > span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
.st-vu-scale > span:first-child {
  transform: none;
}
.st-vu-scale > span:last-child {
  transform: translateX(-100%);
}

/* 波形：整えた所・あとで聴く印・再生位置。再生済みは金（transform で見せる） */
.st-wave {
  --p: 0;
  position: relative;
  height: 84px;
  padding: 0 2px;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(3, 6, 13, 0.25), rgba(3, 6, 13, 0.55));
  border: 1px solid var(--line);
  overflow: hidden;
}
.st-wave__bars {
  position: absolute;
  inset: 10px 4px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.st-wave__bars > i {
  flex: 1;
  min-width: 1px;
  height: calc(var(--h, 0.3) * 100%);
  min-height: 2px;
  border-radius: 2px;
  background: rgba(230, 214, 170, 0.26);
}
.st-wave__played {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateX(calc((var(--p) - 1) * 100%));
  pointer-events: none;
}
.st-wave__played > .st-wave__bars {
  transform: translateX(calc((1 - var(--p)) * 100%));
}
.st-wave__played > .st-wave__bars > i {
  background: linear-gradient(180deg, var(--gold-3), var(--gold) 55%, var(--gold-deep));
}
.st-wave__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--at, 0%);
  width: 2px;
  margin-left: -1px;
  background: rgba(243, 223, 166, 0.55);
  pointer-events: none;
}
.st-wave__mark::before {
  content: "";
  position: absolute;
  top: 0;
  left: -4px;
  width: 10px;
  height: 6px;
  border-radius: 0 0 3px 3px;
  background: var(--gold-2);
}
.st-wave__mark[data-kind="later"] {
  background: rgba(150, 198, 255, 0.6);
}
.st-wave__mark[data-kind="later"]::before {
  background: var(--info);
}
.st-wave__head {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateX(calc(var(--p) * 100%));
  pointer-events: none;
}
.st-wave__head::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--champagne);
  box-shadow: 0 0 10px rgba(251, 241, 214, 0.9);
}

/* 大きな経過時間（13分で黄、16分で橙） */
.st-timer {
  font-family: var(--font-display);
  font-size: var(--fs-timer);
  font-weight: var(--fw-head);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.st-timer[data-level="warn"] {
  color: var(--warn);
}
.st-timer[data-level="long"] {
  color: var(--orange);
}
.st-timer small {
  font-size: 0.4em;
  color: var(--text-2);
  margin-left: 0.2em;
}

/* ═════════════ 14. 空の状態・読み込み中 ═════════════ */
.st-empty {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-5);
  text-align: center;
}
.st-empty__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  margin-bottom: var(--s-2);
  color: var(--gold-2);
}
.st-empty__art > i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(216, 180, 92, 0.32);
}
.st-empty__art > i:nth-child(2) {
  inset: 18px;
  border-color: rgba(216, 180, 92, 0.45);
}
.st-empty__art > i:nth-child(3) {
  inset: 36px;
  border-color: rgba(216, 180, 92, 0.6);
  background: radial-gradient(circle, rgba(216, 180, 92, 0.16), rgba(216, 180, 92, 0));
}
.st-empty__art .st-icon {
  position: relative;
  width: 30px;
  height: 30px;
}
.st-empty__title {
  font-size: 24px;
}
.st-empty__text {
  max-width: 34em;
  color: var(--text-2);
  text-wrap: balance;
}
.st-empty__actions {
  margin-top: var(--s-3);
}

/* 音の輪の読み込み表示（中心から輪が広がる） */
.st-loader {
  --size: 46px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
}
.st-loader::before {
  content: "";
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 12px var(--gold);
}
.st-loader > i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(231, 200, 119, 0.7);
  opacity: 0.35;
}
.st-loader > i:nth-child(2) {
  inset: 18%;
  opacity: 0.55;
}
.st-loader--sm {
  --size: 26px;
}
.st-loading {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  color: var(--text-2);
}
.st-loading--center {
  justify-content: center;
  padding: var(--s-8) 0;
}
/* 小さな回る輪（ボタンの中など） */
.st-spinner {
  --size: 20px;
  display: inline-block;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 2px solid rgba(230, 214, 170, 0.2);
  border-top-color: currentColor;
  animation: st-spin 0.9s linear infinite;
}
@keyframes st-spin {
  to {
    transform: rotate(360deg);
  }
}
/* 中身を待つ間の形だけの面 */
.st-skeleton {
  position: relative;
  overflow: hidden;
  min-height: 1em;
  border-radius: var(--r-xs);
  background: rgba(230, 214, 170, 0.07);
}
.st-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(230, 214, 170, 0) 30%, rgba(230, 214, 170, 0.09) 50%, rgba(230, 214, 170, 0) 70%);
  transform: translateX(-100%);
}

/* ═════════════ 15. ツールチップ（.st-tip の data-tip を、ホバーとキーボードで出す） ═════════════ */
.st-tip {
  position: relative;
  display: inline-flex;
}
.st-tip::after {
  content: attr(data-tip);
  position: absolute;
  z-index: var(--z-tip);
  left: 50%;
  bottom: calc(100% + 12px);
  width: max-content;
  max-width: 340px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--surface-3);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-body);
  line-height: 1.55;
  white-space: normal;
  text-align: left;
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity var(--d2) var(--ease-out), transform var(--d2) var(--ease-out);
  pointer-events: none;
}
.st-tip::before {
  content: "";
  position: absolute;
  z-index: var(--z-tip);
  left: 50%;
  bottom: calc(100% + 6px);
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: var(--surface-3);
  opacity: 0;
  transform: translate(-50%, 6px) rotate(45deg);
  transition: opacity var(--d2) var(--ease-out), transform var(--d2) var(--ease-out);
  pointer-events: none;
}
.st-tip:hover::after,
.st-tip:focus-within::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 260ms;
}
.st-tip:hover::before,
.st-tip:focus-within::before {
  opacity: 1;
  transform: translate(-50%, 0) rotate(45deg);
  transition-delay: 260ms;
}
/* data-open を付けると、ホバーしなくても出したままにする（はじめての案内など） */
.st-tip[data-open]::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.st-tip[data-open]::before {
  opacity: 1;
  transform: translate(-50%, 0) rotate(45deg);
}
.st-tip--below::after {
  bottom: auto;
  top: calc(100% + 12px);
}
.st-tip--below::before {
  bottom: auto;
  top: calc(100% + 6px);
  transform: translate(-50%, -6px) rotate(225deg);
}
.st-tip--below:hover::before,
.st-tip--below:focus-within::before {
  transform: translate(-50%, 0) rotate(225deg);
}

/* ═════════════ 16. 続きから再開の札（処理中・確認・配信結果・履歴で同じ見た目） ═════════════ */
/* 大きい札は、止まった時の画面の主役：状態の色の縁（1.5px）・左の細い帯・上辺の光・奥に溜まる光 */
.st-resume {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, auto);
  align-items: center;
  gap: var(--s-3) var(--s-6);
  padding: var(--s-6) var(--s-6) var(--s-6) var(--s-7);
  border-radius: var(--r-lg);
  border: 0;
  background:
    linear-gradient(var(--tone-strong, var(--warn-strong)), var(--tone-strong, var(--warn-strong))) 0 0 / 4px 100% no-repeat,
    linear-gradient(90deg, rgba(251, 241, 214, 0), rgba(251, 241, 214, 0.55), rgba(251, 241, 214, 0)) 50% 0 / 60% 1px no-repeat,
    radial-gradient(60% 140% at 0% 50%, var(--tone-soft, var(--warn-soft)), rgba(0, 0, 0, 0) 70%),
    var(--glass-sheen),
    var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-2), 0 46px 110px -62px color-mix(in srgb, var(--tone-strong, var(--warn-strong)) 70%, transparent);
}
.st-resume::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--hero-edge);
  background: linear-gradient(120deg, var(--tone-line, var(--warn-line)), var(--tone, var(--warn)) 42%, var(--tone-line, var(--warn-line)) 72%, var(--tone-strong, var(--warn-strong)));
  opacity: 0.75;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.st-resume__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--tone-line, var(--warn-line));
  background: radial-gradient(circle at 50% 30%, var(--tone-soft, var(--warn-soft)), rgba(0, 0, 0, 0) 80%), var(--bg-elev);
  color: var(--tone, var(--warn));
  box-shadow: 0 0 24px -6px var(--tone-strong, var(--warn-strong));
}
.st-resume__icon .st-icon {
  width: 26px;
  height: 26px;
  stroke-width: 2.3;
}
.st-resume__body {
  display: grid;
  gap: 6px;
  min-width: 0;
}
/* 札の名前（「続きから再開」）。説明文の［続きから再開］はこの札を指す */
.st-resume__kicker {
  color: var(--tone, var(--warn));
  font-size: var(--fs-sm);
  font-weight: var(--fw-label);
  letter-spacing: 0.12em;
}
.st-resume__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-head);
  line-height: var(--lh-tight);
  color: var(--text);
}
.st-resume__reason {
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.st-resume__note {
  color: var(--warn);
  font-size: var(--fs-sm);
  font-weight: var(--fw-label);
}
.st-resume__first {
  color: var(--text-3);
  font-size: var(--fs-sm);
}
/* ボタンは縦に積む（先にやること→続きから再開）。待ちの時刻はボタンのすぐ下に大きめに出す */
.st-resume__actions {
  display: grid;
  justify-items: stretch;
  gap: var(--s-2);
  min-width: 0;
}
.st-resume__actions > .st-btn {
  width: 100%;
}
.st-resume__wait {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding-top: var(--s-1);
  text-align: center;
}
.st-resume__wait strong {
  color: var(--warn);
  font-size: var(--fs-body);
  font-weight: var(--fw-head);
  font-variant-numeric: tabular-nums;
}
.st-resume__wait span {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.st-resume__wait[data-ready] strong {
  color: var(--gold-2);
}
.st-resume--sm {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.st-resume--sm::before {
  padding: 1px;
  opacity: 0.5;
}
.st-resume--sm .st-resume__icon,
.st-resume--sm .st-resume__kicker {
  display: none;
}
.st-resume--sm .st-resume__title {
  font-size: var(--fs-body);
}
.st-resume--sm .st-resume__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.st-resume--sm .st-resume__actions > .st-btn {
  width: auto;
}
.st-resume--sm .st-resume__wait {
  justify-items: end;
  text-align: right;
}
.st-resume--sm .st-resume__wait strong {
  font-size: var(--fs-sm);
}

/* ═════════════ 17. 狭い窓 ═════════════ */
/* 上部の帯は 1280px まで1行に収める（メニューの絵→余白の順に詰める） */
@media (max-width: 1500px) {
  .st-nav__item .st-icon {
    display: none;
  }
  .st-nav__item {
    padding: 0 16px;
  }
  /* マイク名を切らずに収めるため、曜日を小さく、「空き」の字を省き、準備の札を短くする（全文は title） */
  .st-chip__wd {
    font-size: var(--fs-xs);
    color: var(--text-3);
  }
  .st-chip__long {
    display: none;
  }
  .st-chip__short {
    display: inline;
  }
}
@media (max-width: 1380px) {
  .st-topbar__inner {
    gap: var(--s-3);
    padding: 0 20px;
  }
  .st-chip {
    padding: 0 8px;
  }
  .st-onair {
    gap: 7px;
    padding: 0 9px 0 8px;
    letter-spacing: 0.14em;
  }
  .st-nav__item {
    padding: 0 13px;
  }
}
@media (max-width: 1260px) {
  .st-topbar__inner {
    flex-wrap: wrap;
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
    row-gap: var(--s-2);
  }
  .st-console {
    order: 3;
    flex-basis: 100%;
  }
  .st-nav {
    margin-left: auto;
  }
}
@media (max-width: 760px) {
  .st-band,
  .st-resume {
    grid-template-columns: auto 1fr;
  }
  .st-band__actions,
  .st-resume__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .st-step {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .st-step__cue {
    display: none;
  }
  .st-step__side {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }
  .st-nav__item span {
    display: none;
  }
}

/* ═════════════ 18. 常に動く飾り（動きを減らす設定でない・録音中でない時だけ） ═════════════ */
@media (prefers-reduced-motion: no-preference) {
  body:not([data-recording]) .st-rec::before {
    animation: st-ring var(--d-pulse) var(--ease-out) infinite;
  }
  body:not([data-recording]) .st-rec::after {
    animation: st-ring var(--d-pulse) var(--ease-out) infinite;
    animation-delay: calc(var(--d-pulse) / 2);
  }
  body:not([data-recording]) .st-rec:disabled::before,
  body:not([data-recording]) .st-rec:disabled::after {
    animation: none;
  }
  /* いちばん大事なボタンだけ、ときどき光沢が流れる */
  body:not([data-recording]) .st-btn--glow:not(:disabled)::after {
    animation: st-sheen-idle 6s var(--ease-in-out) infinite 1.2s;
  }
  body:not([data-recording]) .st-step[data-state="running"]::after {
    animation: st-flow 2.6s var(--ease-in-out) infinite;
  }
  body:not([data-recording]) .st-skeleton::after {
    animation: st-flow 1.6s var(--ease-in-out) infinite;
  }
  body:not([data-recording]) .st-loader > i {
    animation: st-ring-soft 2.2s var(--ease-out) infinite;
  }
  body:not([data-recording]) .st-loader > i:nth-child(2) {
    animation-delay: 1.1s;
  }
  body:not([data-recording]) .st-empty__art > i {
    animation: st-breathe 4.8s var(--ease-in-out) infinite;
  }
  body:not([data-recording]) .st-empty__art > i:nth-child(2) {
    animation-delay: 0.5s;
  }
  body:not([data-recording]) .st-empty__art > i:nth-child(3) {
    animation-delay: 1s;
  }
  body:not([data-recording]) .st-brand__mark .st-wave-arc {
    animation: st-emit 3.6s var(--ease-in-out) infinite;
  }
  body:not([data-recording]) .st-brand__mark .st-wave-arc--2 {
    animation-delay: 0.35s;
  }
  body:not([data-recording]) .st-progress[data-indeterminate] .st-progress__fill {
    animation: st-indeterminate 1.6s var(--ease-in-out) infinite;
  }
  /* 完了の印が「すっと入る」（1回きり） */
  .st-step[data-state="done"] .st-step__icon .st-icon,
  .st-step[data-state="carried"] .st-step__icon .st-icon {
    animation: st-pop-in var(--d3) var(--ease-spring) both;
  }
  .st-toast {
    animation: st-toast-in var(--d3) var(--ease-spring) both;
  }
  .st-dialog[open] {
    animation: st-dialog-in var(--d3) var(--ease-out) both;
  }
  .st-dialog[open]::backdrop {
    animation: st-fade-in var(--d3) var(--ease-out) both;
  }
}
@keyframes st-ring {
  0% {
    opacity: 0.8;
    transform: scale(0.92);
  }
  100% {
    opacity: 0;
    transform: scale(1.42);
  }
}
@keyframes st-ring-soft {
  0% {
    opacity: 0.7;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}
@keyframes st-breathe {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}
@keyframes st-emit {
  0%,
  100% {
    opacity: 0.35;
  }
  40% {
    opacity: 1;
  }
}
@keyframes st-sheen-idle {
  0%,
  72% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}
@keyframes st-flow {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes st-indeterminate {
  from {
    transform: translateX(-100%) scaleX(0.4);
  }
  to {
    transform: translateX(250%) scaleX(0.4);
  }
}
@keyframes st-pop-in {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-12deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes st-toast-in {
  from {
    opacity: 0;
    transform: translateX(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes st-dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}