/*
 * ANNEI 画面部品
 * 値は tokens.css の変数だけを使う。ここで色や余白を直接決めない。
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper-sunk);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------
   動きの受け皿

   端末で「視差効果を減らす」を選んだ人には、
   位置・大きさ・描画の動きをすべて止める。
   残すのは色と状態の変化だけ。これで情報は 1 つも失われない。

   動きを足すより先にこれを置く。あとから足すと、
   足した動きのどれかが必ず漏れる。
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* 大きさの変化は transition を消しても残る。ここで明示的に止める。
     押した感触は面の色で返す。触った手応えは落とさない */
  .score__btn:active { transform: none; background: var(--paper-sunk); }
}

/* ---------------------------------------------------------------
   骨格
   --------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--page-max-wide);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  display: flex; align-items: center; gap: var(--space-4);
}
.brand {
  font-size: var(--fs-md); font-weight: 700; letter-spacing: .04em;
  text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
/*
 * 記章。WOELFE のロゴの再現（簡略化しない）。
 *
 * パスは docs/design/woelfe-logo.png を実測して起こしたもの。
 * 細部が潰れるので小さくしない。18px では返しも目も読めない。
 * 形が正しいことを、小ささより優先する
 */
.brand__mark {
  height: 34px; width: auto; flex: none;
  display: block;
}
.mark__body { fill: var(--brand); }
.mark__eye  { fill: var(--olive); }

/*
 * 2 匹が別々の場所から来て、重なって「W」になる。
 *
 * ロゴの成り立ちそのものを動きにする。
 * 「2 つの V が重なって完成する」こと、
 * 「交わるはずのないものを交わらせる」こと。
 * 同時に出したら、ただ現れただけになる。
 *
 * 重なったあとで、目（オリーブ）が開く。
 * 後始末は JS（motionOnce）が持つ
 */
.brand__mark--enter .mark__wolf { transform-box: fill-box; }
.brand__mark--enter .mark__wolf--top {
  animation: wolf-top 520ms var(--ease-back) both;
}
.brand__mark--enter .mark__wolf--bottom {
  animation: wolf-bottom 520ms var(--ease-back) 90ms both;
}
.brand__mark--enter .mark__eye {
  transform-box: fill-box; transform-origin: left center;
  animation: eye-open 240ms var(--ease-out) 600ms backwards;
}

@keyframes wolf-top {
  from { opacity: 0; transform: translate(-30%, -70%); }
  to   { opacity: 1; transform: none; }
}
@keyframes wolf-bottom {
  from { opacity: 0; transform: translate(-30%, 70%); }
  to   { opacity: 1; transform: none; }
}
@keyframes eye-open {
  from { transform: scaleX(0); }
  to   { transform: none; }
}

/*
 * 記章は登場して終わりではない。居続ける。
 * 隅で静止している絵は 3 回目には見えなくなる。
 * ときどき動くものだけが、視界の端に残る
 */
.brand__mark .mark__eye { transform-box: fill-box; transform-origin: center; }
/* 瞬き。間隔は JS がばらす（規則正しいと機械に見える） */
.brand__mark--blink .mark__eye { animation: blink 160ms var(--ease-out); }
@keyframes blink {
  50% { transform: scaleY(.08); }
}
/* 夜は眠そう。安寧という名前に合っている */
.brand__mark--night .mark__eye { transform: scaleY(.45); }

/* 20 回に 1 回。上の狼が下の狼を小突く */
.brand__mark--play .mark__wolf--top { animation: nudge 620ms var(--ease-back) 900ms; }
.brand__mark--play .mark__wolf--bottom { animation: nudged 620ms var(--ease-back) 1010ms; }
@keyframes nudge {
  35% { transform: translate(6%, 14%); }
  60% { transform: translate(-3%, -4%); }
}
@keyframes nudged {
  45% { transform: translate(4%, 7%) rotate(2deg); }
  75% { transform: translate(-1%, -2%); }
}

/*
 * 芝居に出る一匹。記章と同じパスを使う（形は変えない）。
 * 色は記章と同じ塗り分け
 */
.wolf { display: block; overflow: visible; }

/* ---------------------------------------------------------------
   狼の芝居
   出す・出さないは js/play.js の PLAY で切り替える。
   ここはそれぞれの見た目だけ。1 つ消すときはこの節から該当分を消す
   --------------------------------------------------------------- */

/* 記章が ANNEI の文字に体当たりする。文字は読むものなので一度きり・小さく */
.brand__word { display: inline-block; }
.brand__mark--charge { animation: charge 420ms var(--ease-back) 880ms; }
.brand__word--hit { animation: word-hit 460ms var(--ease-out) 1000ms; }
@keyframes charge {
  40% { transform: translateX(5px); }
  70% { transform: translateX(-1px); }
}
@keyframes word-hit {
  20% { transform: translateX(3px) skewX(-4deg); }
  45% { transform: translateX(-2px) skewX(2deg); }
  70% { transform: translateX(1px); }
}

/* 一匹がヘッダーを走り抜ける。その日の最初の 1 回だけ */
.site-header__inner { position: relative; }
.header__dash {
  position: absolute; left: 0; top: 50%;
  width: 26px; height: 18.3px;
  margin-top: -9px; pointer-events: none;
  animation: dash-across 1100ms linear;
}
@keyframes dash-across {
  from { transform: translateX(-40px); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  to   { transform: translateX(calc(100% + 100vw)); opacity: 0; }
}
/* 通り過ぎるところでナビの文字が跳ねる。3px。押す場所はほぼ動かさない */
.nav__link--hop { animation: nav-hop 320ms var(--ease-out) var(--hop-at, 0ms); }
@keyframes nav-hop {
  40% { transform: translateY(-3px); }
  70% { transform: translateY(1px); }
}

/*
 * 行き先を移ると狼が走る。
 * /admin は別ページなので、直前の行き先は sessionStorage が覚えている。
 * 押す場所の上を通るが、当たり判定は持たない
 */
.nav__wolf {
  position: absolute; left: 0; top: 50%;
  width: 26px; height: 18.3px; margin-top: -9px;
  pointer-events: none;
  opacity: 0;
}
/*
 * 走っている間だけ見える。
 * 位置は transition、姿は animation で持つ。
 * 1 つの opacity を 2 つの規則で奪い合わせない
 */
.nav__wolf--run {
  transition: transform 420ms var(--ease-out);
  animation: nav-run 620ms linear;
}
@keyframes nav-run {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 待ちが実際にあるときだけ出る。無い待ちは演出しない */
.loading { position: relative; }
.loading__wolf {
  width: 26px; height: 18.3px;
  margin: var(--space-3) auto 0;
  animation: trot 620ms var(--ease-out) infinite alternate;
}
@keyframes trot {
  from { transform: translateX(-10px) translateY(0); }
  50%  { transform: translateX(0) translateY(-3px); }
  to   { transform: translateX(10px) translateY(0); }
}

/* 狼が過去を掘り起こす。行が下から立ち上がるのに合わせて掘る */
.section-title--dig { position: relative; }
.history__digger {
  position: absolute; right: 0; top: 50%;
  width: 24px; height: 17px; margin-top: -9px;
  pointer-events: none; opacity: 0;
}
.history__digger--go { animation: dig 1500ms var(--ease-out) 120ms; }
@keyframes dig {
  0%   { opacity: 0; transform: translateY(-10px); }
  12%  { opacity: 1; transform: translateY(0); }
  28%  { transform: translateY(4px) rotate(6deg); }
  42%  { transform: translateY(0) rotate(0); }
  58%  { transform: translateY(4px) rotate(6deg); }
  72%  { transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* 記章をつつくと、上の一匹が飛び出して戻る */
.brand__mark--poked .mark__wolf--top { animation: poke 780ms var(--ease-back); }
@keyframes poke {
  25% { transform: translate(38%, -34%) rotate(-10deg); }
  55% { transform: translate(10%, 6%) rotate(4deg); }
  80% { transform: translate(-2%, -1%); }
}

/* 兆候が無い日は伏せている。兆候が出ている日には何も足さない */
.rest { position: relative; }
.rest__wolf {
  width: 24px; height: 17px;
  margin: 0 auto var(--space-2);
  opacity: .5;
  animation: breathe 3600ms ease-in-out infinite;
}
.rest__wolf .mark__eye { transform-box: fill-box; transform-origin: center; transform: scaleY(.12); }
@keyframes breathe {
  50% { transform: translateY(1px) scaleY(.97); }
}

/*
 * 線の上を走る狼。線と点は CSS が引き、狼はその上を追うだけ。
 * 狼が止まっても線は引かれる
 */
/*
 * 線上を走る。位置と傾きは offset-path が持つ（線と同じ時間軸に乗る）。
 * 中心を線に合わせ、進む向きへ自然に傾く
 */
/* 位置は JS が線を測って動かす（Web Animations）。ここは見た目だけ */
.chart__wolf { pointer-events: none; }
.chart__wolf--arrive { animation: wolf-arrive 640ms var(--ease-out) forwards; }
/* 着いたら消える。eNPS が上がった回だけ、消える前に一度跳ねる */
@keyframes wolf-arrive {
  to { opacity: 0; }
}
.chart__wolf--cheer { animation: wolf-cheer 700ms var(--ease-back) forwards; }
@keyframes wolf-cheer {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-14px); }
  65%  { transform: translateY(0); }
  100% { transform: translateY(0); opacity: 0; }
}
.wolf .mark__body { fill: var(--brand); }
.wolf .mark__eye  { fill: var(--olive); }

.brand__sub {
  font-size: var(--fs-xs); font-weight: 400; color: var(--ink-faint);
  margin-left: var(--space-2); letter-spacing: 0;
}
.nav {
  position: relative;
  display: flex; gap: var(--space-1); margin-left: auto; align-items: center;
  /* 幅が足りないときは折り返さず横に流す。項目が 2 行になると頭が重くなる */
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--ink-muted); text-decoration: none;
  font-size: var(--fs-sm);
  white-space: nowrap;
  background: none; border: 0; cursor: pointer;
}
.nav__link:hover { background: var(--paper-sunk); color: var(--ink); }
.nav__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-12);
}
.page--wide { max-width: var(--page-max-wide); }

.page__title { font-size: var(--fs-lg); line-height: var(--lh-tight); font-weight: 700; }
.page__lead { color: var(--ink-muted); font-size: var(--fs-sm); margin-top: var(--space-1); }

.stack > * + * { margin-top: var(--space-4); }
.stack-tight > * + * { margin-top: var(--space-2); }
.stack-loose > * + * { margin-top: var(--space-8); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
}
.card__title {
  font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-tight);
}
.card__note { color: var(--ink-faint); font-size: var(--fs-xs); }

.section-title {
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-faint);
  letter-spacing: .06em;
}

/* ---------------------------------------------------------------
   お知らせ / 匿名の明示
   --------------------------------------------------------------- */

.notice {
  display: flex; gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper-sunk);
}
.notice__mark {
  flex: none; width: 24px; height: 24px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 700;
  background: var(--line); color: var(--ink);
}
.notice__title { font-weight: 700; font-size: var(--fs-base); line-height: var(--lh-tight); }
.notice__body { color: var(--ink-muted); font-size: var(--fs-sm); margin-top: var(--space-1); }

/* 匿名: 落ち着いた色。約束が守られている状態 */
.notice--anonymous { background: var(--ok-soft); border-color: transparent; }
.notice--anonymous .notice__mark { background: var(--ok); color: var(--ink-inverse); }

/* 記名: 注意を向ける色。名前が残ることを見落とさせない */
.notice--named { background: var(--warn-soft); border-color: transparent; }
.notice--named .notice__mark { background: var(--warn); color: var(--ink-inverse); }

.notice--error { background: var(--danger-soft); border-color: transparent; }
.notice--error .notice__mark { background: var(--danger); color: var(--ink-inverse); }

/* ダッシュボードの兆候。
   平時は出ない。出たときに読み飛ばされないよう、1 件 1 行で短く置く */
.signals { flex: 1; min-width: 0; }
.signal {
  display: flex; align-items: baseline; gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
}
.signal__who {
  flex: none; min-width: 8em;
  font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.signal__score { font-variant-numeric: tabular-nums; white-space: nowrap; }
/*
 * 照合用のハッシュ。読むのはラベル（回答者A）で、こちらは引くための値。
 * 小さく、薄く、等幅で。管理者にだけ返ってくる
 */
.signal__hash {
  margin-left: var(--space-2);
  font-family: var(--font-num); font-size: var(--fs-xs); font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0;
}
.signal__note { color: var(--ink-muted); margin-left: var(--space-3); }

/*
 * 横に並べられるのは、名前・推移・理由が 1 行に収まるときだけ。
 * 折り返すと「4 段階の下降」が途中で切れて読めなくなるので、
 * 早めに縦に積む
 */
@media (max-width: 700px) {
  .signal { display: block; margin-top: var(--space-4); }
  .signal__who { min-width: 0; display: block; }
  .signal__note { margin-left: var(--space-2); }
}


/* ---------------------------------------------------------------
   スコア入力
   一番大事な部品。1 タップで決まること、押しやすいこと。

   区分ごとの色分けはしない。答える前に評価軸を示すと回答を誘導する。
   eNPS は本音を測る指標なので、すべて同じ見た目にし、
   選んだものだけが分かる状態にする。
   区分の色を使うのは結果を読む画面（管理・グラフ）だけ。
   --------------------------------------------------------------- */

.score__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}
.score__btn {
  appearance: none;
  min-height: 52px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform .06s ease, background-color .12s ease, border-color .12s ease;
}
.score__btn:active { transform: scale(.96); }
.score__btn:hover { border-color: var(--ink-faint); }

.score__btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: var(--shadow-2);
}

.score__anchors {
  display: flex; justify-content: space-between;
  margin-top: var(--space-2);
  color: var(--ink-faint); font-size: var(--fs-xs);
}

/* ---------------------------------------------------------------
   フォーム
   --------------------------------------------------------------- */

.field__label { display: block; font-weight: 600; font-size: var(--fs-sm); }
.field__hint { color: var(--ink-faint); font-size: var(--fs-xs); }

.input, .textarea, .select {
  display: block; width: 100%;
  padding: var(--space-3);
  font-size: var(--fs-input);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.textarea { min-height: 108px; resize: vertical; line-height: var(--lh-base); }
.textarea--tall { min-height: 220px; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); }

.btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  font-size: var(--fs-base); font-weight: 600;
  text-decoration: none;   /* a を btn として使う箇所があるため */
}
.btn:hover { background: var(--paper-sunk); }
/*
 * 押せない状態は、ブランドの色を薄めない。
 * 赤を半分にすると色がにごって、壊れているように見える。
 * 色そのものを外して灰にする（押せないことは色ではなく彩度の無さで伝える）
 */
.btn:disabled { cursor: default; }
.btn--primary:disabled {
  background: var(--line); color: var(--ink-faint); border-color: transparent;
}
.btn--primary:disabled:hover { background: var(--line); filter: none; }
.btn--primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn--block { width: 100%; }
.btn--small { min-height: 34px; padding: 0 var(--space-3); font-size: var(--fs-sm); font-weight: 500; }
.btn--danger { color: var(--danger); border-color: var(--danger); background: var(--paper); }

.form-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; }
.form-row > * { flex: 1 1 160px; }
.form-row > .btn { flex: 0 0 auto; }

/* ---------------------------------------------------------------
   数値・バッジ・表
   --------------------------------------------------------------- */

.metric { display: flex; align-items: baseline; gap: var(--space-2); }
.metric__value {
  font-size: var(--fs-2xl); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric__unit { color: var(--ink-faint); font-size: var(--fs-sm); }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 600;
  background: var(--paper-sunk); color: var(--ink-muted);
  white-space: nowrap;
}
.badge--promoter  { background: var(--promoter-soft);  color: var(--promoter); }
.badge--passive   { background: var(--passive-soft);   color: var(--passive); }
.badge--detractor { background: var(--detractor-soft); color: var(--detractor); }
.badge--open      { background: var(--accent-soft);    color: var(--accent); }
.badge--anonymous { background: var(--ok-soft);        color: var(--ok); }
.badge--named     { background: var(--warn-soft);      color: var(--warn); }

/* 匿名の記号。同じ記号 = 同じ人、だが誰かは分からない */
.anon-tag {
  font-family: var(--font-num); font-size: var(--fs-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--paper-sunk); color: var(--ink-muted);
  border: 1px dashed var(--line-strong);
}

.split {
  display: flex; gap: var(--space-1); align-items: center;
  font-size: var(--fs-xs); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.split__seg { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.split__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.split__dot--promoter  { background: var(--promoter); }
.split__dot--passive   { background: var(--passive); }
.split__dot--detractor { background: var(--detractor); }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td {
  text-align: left; padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.table th { color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
/*
 * 一覧は列を潰さず、横に流す。
 * 幅を詰めると「2026年9月 第1回」や内訳が折り返して読めなくなる。
 * .table-wrap が横スクロールを受け持つ
 */
.table--rows { min-width: 520px; }
.table--rows td:first-child { white-space: nowrap; }
.table--rows tbody tr { cursor: pointer; }
.table--rows tbody tr:hover { background: var(--paper-sunk); }

.comment {
  white-space: pre-wrap; overflow-wrap: anywhere;
  line-height: var(--lh-base);
}
.comment--empty { color: var(--ink-faint); }

/* 当月の回答期間。ふだんは表示だけ。「編集」で直す */
.period + .period { border-top: 1px solid var(--line); margin-top: var(--space-4); padding-top: var(--space-4); }
.period__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.period__title { font-weight: 700; font-size: var(--fs-base); }
.period__body { margin-top: var(--space-1); font-variant-numeric: tabular-nums; }
.period__editor {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
}

/* 履歴。開くとその場で書き直せる */
.history + .history { border-top: 1px solid var(--line); }
.history__summary {
  appearance: none; background: none; border: 0; cursor: pointer;
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0;
  color: inherit;
}
.history__summary:hover { color: var(--accent); }
/* 書き直せないときは開く先が無い。押せる見た目にしない */
.history__summary--static { cursor: default; }
.history__summary--static:hover { color: inherit; }
/* 読むだけのときのスコア。0〜10 のボタンの代わりに数字だけを大きく出す */
.score__value {
  font-size: var(--fs-xl); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.history__score {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--paper-sunk); color: var(--ink);
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.history__body { flex: 1; min-width: 0; display: block; }
.history__title { display: block; font-weight: 600; font-size: var(--fs-sm); }
.history__comment {
  display: block; font-size: var(--fs-xs); color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history__comment--empty { color: var(--ink-faint); }
.history__chevron { flex: none; font-size: var(--fs-xs); color: var(--ink-faint); }
.history__summary[aria-expanded="true"] .history__chevron { color: var(--accent); }
.history__editor {
  padding: var(--space-4) 0 var(--space-5);
  border-top: 1px dashed var(--line);
}

/* 「回答開始日から [13] 日後の [10 時]」のように、文の中に入力を混ぜる */
.inline-fields {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-size: var(--fs-base);
}
.input--narrow { width: 5.5em; }
.select--narrow { width: auto; min-width: 6em; }

/* 既定値の開示 */
.disclosure > summary {
  cursor: pointer; font-size: var(--fs-xs); color: var(--accent);
  padding: var(--space-1) 0;
}
.code {
  margin: 0; padding: var(--space-3);
  background: var(--paper-sunk); border-radius: var(--radius);
  font-family: var(--font-num); font-size: var(--fs-xs);
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-muted);
  max-height: 320px; overflow-y: auto;
}

.empty {
  padding: var(--space-10) var(--space-4);
  text-align: center; color: var(--ink-faint); font-size: var(--fs-sm);
}

.tabs {
  display: flex; gap: var(--space-1); flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: var(--space-3) var(--space-4);
  color: var(--ink-muted); font-size: var(--fs-sm); font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--motion-fast) var(--ease-out);
}
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

/*
 * 下線は点灯ではなく移動。
 * タブは並列に置かれた場所なので、移動がその並びを説明する。
 * 点灯だと、別々の 3 つのランプに見える。
 *
 * 位置は JS が測って入れる（幅が文字数で変わるため）。
 * 測れたときだけ .tabs--ink が付き、各タブ自身の下線を消す。
 * JS が動かなければ従来どおりの下線が残る
 */
.tabs__ink {
  position: absolute; left: 0; top: 0;
  height: 3px; width: 0;
  background: var(--brand);
  pointer-events: none;
  transition: transform var(--motion-fast) var(--ease-out),
              width var(--motion-fast) var(--ease-out);
}

/*
 * 中身は下線を追って入る。
 * 下線だけが動くと、移ったのはタブだけに見える。
 * 本文が続くことで「場所が移った」ことが画面全体に伝わる
 */
@keyframes panel-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}
.panel-in { animation: panel-in 200ms var(--ease-out) 80ms backwards; }
.tabs--ink .tab[aria-selected="true"] { border-bottom-color: transparent; }


/*
 * 過去は奥から手前へ上がる。
 *
 * 履歴を開く／グラフの点を選ぶ／回答期間の詳細を開く。
 * どれも「過去を取り出す」操作なので、同じ動きにする。
 * 過去は下でも横でもなく奥にある。奥から引き上げる。
 *
 * 180ms・2% は、気づかない人には気づかれない。それでよい種類の動き
 */
@keyframes from-past {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}
/*
 * fill-mode は付けない。
 * 動きが走らない環境（裏に回ったタブなど）で both にすると、
 * 開始値（opacity 0）のまま止まって中身が消える。
 * 付けなければ、動く前も動いたあとも要素そのものの見た目になる
 */
.from-past { animation: from-past 240ms var(--ease-out); }

/* 履歴は上から順に立ち上がる。--stagger は行ごとに JS が入れる */
@keyframes from-past-staggered {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.from-past-staggered {
  animation: from-past-staggered 300ms var(--ease-out) var(--stagger, 0ms) backwards;
}

/*
 * これから始まるものは、左から右へ。
 *
 * 使うのは新しい回答期間の見出しだけ。隔週の月曜に一度しか見えない。
 * 動くのは見出しだけで、スコアボタンは最初から静止している。
 * 1 タップの速さは変わらない
 */
@keyframes from-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: none; }
}

/*
 * 見出しの赤い罫。ホームページで最も特徴的な意匠を借りる。
 * 新しい回答期間のときだけ、上から降りてくる
 */
.titled { display: flex; align-items: stretch; gap: var(--space-3); position: relative; }
.titled__rule {
  flex: none; width: 3px; align-self: stretch;
  background: var(--brand);
  transform-origin: top;
}
.titled--enter .titled__rule {
  animation: rule-down 300ms var(--ease-out) 200ms backwards;
}
@keyframes rule-down {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/*
 * 狼が罫を引き下ろす。
 * 狼が先に降り、赤い罫がその後ろに残る。年に 24 回しか見られない
 */
.titled__wolf {
  position: absolute; left: -8px; top: 0;
  width: 20px; height: 14px;
  pointer-events: none; opacity: 0;
}
.titled--enter .titled__wolf {
  animation: rule-pull 620ms var(--ease-out) 120ms;
}
@keyframes rule-pull {
  0%   { opacity: 0; transform: translateY(-130%); }
  18%  { opacity: 1; }
  62%  { opacity: 1; transform: translateY(100%); }
  100% { opacity: 0; transform: translateY(150%); }
}
/*
 * カードが出るのと同時に動かすと、全部が一度に現れて動きが見えない。
 * カードが出てから見出しが入る。「前」があって初めて動きになる。
 * backwards の後始末は JS（motionOnce）が持つ
 */
.from-left {
  animation: from-left var(--motion-base) var(--ease-out) var(--motion-hold) backwards;
}

.toast {
  position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill);
  font-size: var(--fs-sm); box-shadow: var(--shadow-2); z-index: 50;
  max-width: calc(100vw - var(--space-8));
}

/* 表示範囲の切り替え。保存しないその場だけの状態なので、
   設定ではなく操作として見えるように小さく置く */
.segmented {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
}
.segmented__btn {
  appearance: none; cursor: pointer;
  min-height: 32px; padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--paper); color: var(--ink-muted);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.segmented__btn:hover { background: var(--paper-sunk); color: var(--ink); }
.segmented__btn[aria-pressed="true"] {
  background: var(--accent); border-color: transparent; color: var(--accent-ink);
}

/* ---------------------------------------------------------------
   グラフ
   --------------------------------------------------------------- */

.chart { width: 100%; display: block; touch-action: manipulation; }
.chart__grid       { stroke: var(--line); stroke-width: 1; }
.chart__zero       { stroke: var(--line-strong); stroke-width: 1.5; }
.chart__axis-label { fill: var(--ink-faint); font-size: 11px; }
/*
 * 折れ線と点は中身（データ）なので黒で描く。ホームページも本文は黒。
 * 赤は「いま選んでいる位置」にだけ乗せる。
 * 線まで赤にすると、批判者の赤と同じ画面で競り合う
 */
.chart__line       { fill: none; stroke: var(--ink); stroke-width: 2;
                     stroke-linejoin: round; stroke-linecap: round; }
/*
 * 線は左から引かれる。長さは JS が --len に入れる。
 *
 * 要素の stroke-dashoffset は 0（＝引き終わった状態）にしておき、
 * 動きの開始値だけを keyframes 側に置く。
 * こうすると、動きが走らなかったときに線が消えるのではなく、
 * 最初から引かれた状態で残る。足した動きで情報を失わせない
 */
@keyframes draw-line {
  from { stroke-dashoffset: var(--len); }
  to   { stroke-dashoffset: 0; }
}
/* 点は線が届いたところで出る。遅れは JS が横位置から出す */
@keyframes dot-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.chart__dot        { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
/* 選んでいる点と縦線だけがクラブの赤。ここは「いまどこを見ているか」＝現在地 */
.chart__dot--active{ fill: var(--brand); stroke: var(--brand); r: 4; }
.chart__hit        { fill: transparent; cursor: pointer; }
.chart__cursor     { stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 3 3; }

.readout {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--paper-sunk); border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.readout__item { display: flex; gap: var(--space-2); align-items: baseline; }
.readout__label { color: var(--ink-faint); font-size: var(--fs-xs); }
.readout__value { font-weight: 700; font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--fs-xs); color: var(--ink-muted); }
.legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }

/* 小さい画面では見出しを削って、操作を 1 行に収める */
@media (max-width: 480px) {
  .site-header__inner { gap: var(--space-2); padding-left: var(--space-3); padding-right: var(--space-3); }
  .brand__sub { display: none; }
  .nav__link { padding: 0 var(--space-2); font-size: var(--fs-xs); }
}

@media (min-width: 700px) {
  .page { padding-top: var(--space-8); }
  .score__grid { grid-template-columns: repeat(11, 1fr); }
  .score__btn { min-height: 56px; }
}