/* 学習ノート(セイエス罫 / косая линейка)の紙面: 薄紫の罫と、左端の赤い余白線。
   書体だけは言語で替わるので、--display / --body は各 index.html で上書きする */
:root {
  --paper: #FCFCFA;
  --card: #FFFFFF;
  --ink: #1A2440;
  --ink-soft: #616A88;
  --rule: #C3B8DC;
  --rule-faint: #E9E4F3;
  --margin: #DA6480;
  --ok: #1E7A5B;
  --ok-bg: rgba(30, 122, 91, .12);
  --ng: #C4453C;
  --ng-bg: rgba(196, 69, 60, .1);
  --focus: #3B57C4;
  --focus-bg: rgba(59, 87, 196, .08);
  --display: "Bodoni Moda", "Hiragino Mincho ProN", serif;
  /* ラテンは Archivo、日本語は Zen Kaku Gothic New。
     素の system-ui (Mac なら Hiragino Sans) だと Archivo と字面が揃わない */
  --body: "Archivo", "Zen Kaku Gothic New", system-ui, "Hiragino Sans", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #11131C;
    --card: #191C28;
    --ink: #E9EAF3;
    --ink-soft: #9098B4;
    --rule: #4C4569;
    --rule-faint: #2A2C3C;
    --margin: #DE7B92;
    --ok: #55C296;
    --ok-bg: rgba(85, 194, 150, .16);
    --ng: #F07C72;
    --ng-bg: rgba(240, 124, 114, .14);
    --focus: #8FA3FF;
    --focus-bg: rgba(143, 163, 255, .12);
  }
}
:root[data-theme="dark"] {
  --paper: #11131C;
  --card: #191C28;
  --ink: #E9EAF3;
  --ink-soft: #9098B4;
  --rule: #4C4569;
  --rule-faint: #2A2C3C;
  --margin: #DE7B92;
  --ok: #55C296;
  --ok-bg: rgba(85, 194, 150, .16);
  --ng: #F07C72;
  --ng-bg: rgba(240, 124, 114, .14);
  --focus: #8FA3FF;
  --focus-bg: rgba(143, 163, 255, .12);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-text-size-adjust: 100%;
  padding: 1.75rem 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 100dvh;
  box-sizing: border-box;
}
/* 狭い画面では紙の余白を詰める。表を1行でも多く見せたい */
@media (max-width: 30rem) {
  body { padding-top: .75rem; gap: 1.1rem; }
}
main[hidden] { display: none; }
/* main は app.js が出すので、JS が動かないと白紙になる。その2通りの断りだけは HTML 側に置く */
#fallback, noscript { width: 100%; max-width: 64rem; margin-inline: auto; color: var(--ink-soft); }
main { width: 100%; max-width: 64rem; margin-inline: auto; display: flex; flex-direction: column; gap: 1.25rem; }

.eyebrow {
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--margin); font-weight: 600; margin: 0 0 .4rem;
}
h1 {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(2.0625rem, 9.75vw, 3.375rem); line-height: 1; margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .7rem; row-gap: .2rem;
}
#meaning {
  font-family: var(--body); font-style: normal; font-weight: 400;
  font-size: 1rem; letter-spacing: .01em; color: var(--ink-soft);
}
/* 見出し語と訳語の境。記号自体は主張させない */
#meaning:not(:empty)::before { content: "–"; margin-right: .4em; color: var(--rule); }
/* 動詞の右の ▾。押すとブラウザ標準の一覧が開く */
.pick {
  position: relative; top: -.15em; /* 動詞のベースラインに対して少し上げる */
  display: inline-grid; place-items: center;
  font-family: var(--body); font-style: normal; font-size: .42em; line-height: 1;
  color: var(--margin); cursor: pointer;
}
/* 三角は小さいので、当たり判定だけ指の幅まで広げる */
.pick select { position: absolute; inset: -.6em -.9em; width: auto; height: auto; opacity: 0; cursor: pointer; }
.pick:has(select:focus-visible) { outline: 2px solid var(--focus); outline-offset: .25em; border-radius: 2px; }

/* 辞書の見出しにあたる行。品詞・語法・助動詞 */
.gloss { margin: .5rem 0 0; font-size: .82rem; line-height: 1.9; color: var(--ink-soft); }
.gloss i {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: .95rem; color: var(--margin);
}
/* 区切りは辞書にならってカンマ。中黒は point médian と紛れるので使わない */
.gloss .sep { margin-right: .3rem; color: var(--rule); }
/* 伏せた助動詞。破線の枠で「まだ出していない」ことを示す */
#aux-hint {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 2.4rem; height: 1.4rem; padding: 0; min-width: 0; /* 出てくる avoir / être の横長に合わせる。角丸は button 既定のカプセル */
  font: 500 .78rem/1 var(--body);
  position: relative; top: -2px; /* aux. の字面に合わせて少し上げる */
  border-style: dashed; color: var(--margin); border-color: var(--margin);
}
#aux-hint span { transform: translateY(1px); } /* 点線の円の中で ? を下げる */
#aux-hint:hover, #aux-hint:active { background: var(--ng-bg); }
/* 用例。活用形を含むので答え合わせのあとだけ出る */
.ex {
  margin: .6rem 0 0; font-family: var(--display); font-style: italic;
  font-size: .95rem; line-height: 1.5;
  border-left: 2px solid var(--rule); padding-left: .7rem;
  animation: pop-in .3s ease both;
}
.ex:empty { display: none; }
.ex small {
  display: block; font-family: var(--body); font-style: normal;
  font-size: .78rem; color: var(--ink-soft); margin-top: .15rem;
}
/* 余白線と同じ赤で目立たせる。gloss の先頭に置くので右に余白 */
.chip {
  font-size: .72rem; letter-spacing: .04em; color: var(--margin); margin-right: .5rem;
  border: 1px solid var(--margin); border-radius: 999px; padding: .2rem .7rem;
  white-space: nowrap;
}

.scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--rule-faint); border-radius: 2px; }
table { border-collapse: collapse; width: 100%; }
th { font-weight: 500; text-align: left; }
/* 見出しの位置で決まるぶん(余白・罫・sticky)。中身が人称でも時制でも共通 */
thead th { padding: .45rem .5rem; white-space: nowrap; border-bottom: 2px solid var(--margin); border-right: 1px solid var(--rule-faint); }
tbody th {
  position: sticky; left: 0; z-index: 1; background: var(--card);
  padding: 0 .5rem; white-space: nowrap;
  border-right: 2px solid var(--margin);
  border-bottom: 1px solid var(--rule-faint);
}
/* 見出しの中身で決まるぶん。行と列を入れ替えても字面はついて回る */
th.pron { font-family: var(--display); font-size: 1.05rem; }
th.tense { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--card); border-right: 2px solid var(--margin); padding: .25rem .4rem; }
/* 見出し列は幅を固定。人称と時制を入れ替えても表の位置がずれない。
   下限を決めているのは転置したときの "conditionnel" と 直説法現在(5文字)。
   これ以上詰めると人称のときだけ列が細くなって、入れ替えるたびに表が横に動く */
tbody th, thead th:first-child { box-sizing: border-box; width: 5.5rem; min-width: 5.5rem; text-align: right; }
/* 行・列を消すボタンの置き場。採点したら出す */
th.foot, td.foot {
  box-sizing: border-box; width: 2.6rem; min-width: 2.6rem; padding: .2rem;
  border-right: 1px solid var(--rule-faint);
}
.footrow th, .footrow td { border-bottom: 0; height: 2.2rem; }
#grid:not(.checked) .footrow, #grid:not(.checked) .foot { display: none; }
.cut-btn {
  width: 1.8rem; height: 1.8rem; min-width: 0; padding: 0; margin: 0 auto;
  display: grid; place-items: center; border-radius: 50%; font-size: .9rem;
  color: var(--margin); border-color: var(--margin);
  transition: transform .12s ease, background .12s ease;
}
/* 時制ヘッダに添える原語名 (présent / настоящее) */
.sub {
  display: block; font-family: var(--display); font-style: italic;
  font-size: .72rem; letter-spacing: 0; text-transform: none;
  color: var(--ink-soft); font-weight: 400;
}
/* 行見出しに来た原語名だけは折り返す。ハイフンは自動で折り返し候補になるので
   plus-que-parfait は plus-que- / parfait で折れる。列見出しは幅が足りるので1行のまま */
tbody th .sub { white-space: normal; line-height: 1.2; }
.cut-btn:hover { background: var(--ng-bg); }
.cut-btn:active { background: var(--ng-bg); transform: scale(.88); }
td { position: relative; border-bottom: 1px solid var(--rule-faint); border-right: 1px solid var(--rule-faint); padding: 0; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
/* 人称の行、時制の列に印をつけて現在地を示す */
tr:has(input:focus) th, thead th.here { color: var(--focus); }

input {
  /* 16px 未満だと iOS がフォーカス時にズームする */
  font: 400 1.0625rem/1 var(--body);
  border: 0; background: transparent; color: inherit;
  padding: .55rem .5rem; width: 100%; min-width: 7.5rem; box-sizing: border-box; display: block;
}
/* 採点中。フォーカスも渡さないので下線が出ない。色は自前のものを保つ */
input:disabled { -webkit-text-fill-color: currentColor; opacity: 1; cursor: default; }
input:focus { outline: 0; background: var(--focus-bg); box-shadow: inset 0 -2px 0 var(--focus); }
input.ok { color: var(--ok); background: var(--ok-bg); }
input.ng { color: var(--ng); background: var(--ng-bg); }
/* 行・列だけ採点したときの、採点対象外のセル */
input.skip { color: var(--ink-soft); background: color-mix(in srgb, var(--ink-soft) 13%, transparent); }
/* 形が存在しないマス(完了体の現在、命令法の я など)。斜線を敷いて書けないことを示す。
   仏語版には出ない形なので、.gap を付けるのはロシア語版だけ */
input.gap {
  cursor: default;
  background: repeating-linear-gradient(-45deg,
    transparent 0 6px, var(--rule-faint) 6px 7px);
}
input::placeholder { color: var(--rule); opacity: 1; }
/* 答え合わせで全セルに出る正解。採点前は空なので行の高さは変わらない */
.ans {
  display: block; padding: 0 .5rem .4rem; font-size: .8rem; line-height: 1.3;
  font-family: var(--display); font-style: italic; font-weight: 500; color: inherit;
  white-space: nowrap;
}
.ans > .pr { font-weight: 400; color: var(--ink-soft); }
.ans:empty { display: none; }

/* 行・列の出し入れ、採点の走り、用例。どれもセルの --i でわずかにずらす */
@keyframes pop-in { from { opacity: 0; transform: translateY(-.35rem); } }
.leaving { opacity: 0; transform: scale(.85); transition: opacity .2s ease, transform .2s ease; }
#grid.grading input { transition: background .25s ease, color .25s ease; transition-delay: calc(var(--i, 0) * 9ms); }
#grid.grading .ans, #grid.grading td .pct { animation: pop-in .25s ease both; animation-delay: calc(var(--i, 0) * 9ms); }
#grid.grading .cut-btn { animation: pop-in .25s ease both; animation-delay: .3s; }

/* 3. 読み込み時、表が右に見切れていたら横スクロールできることを知らせる */
.scroll-wrap { position: relative; }
#hint[hidden] { display: none; }
#hint {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; transition: opacity .45s ease;
  background: linear-gradient(90deg, transparent 40%, color-mix(in srgb, var(--card) 85%, transparent));
}
#hint.gone { opacity: 0; }
#hint span {
  margin-left: auto; margin-right: 1.25rem;
  font-size: .78rem; letter-spacing: .04em; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 999px; padding: .35rem .8rem; white-space: nowrap;
}
#hint span::after { content: " →"; display: inline-block; animation: nudge 1.1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(.3rem); } }

@media (prefers-reduced-motion: reduce) {
  .leaving, #grid.grading input, #grid.grading .ans, #grid.grading td .pct,
  #grid.grading .cut-btn, #hint span::after, .ex { animation: none; transition: none; }
}

/* 主なボタンは横並びで等分。消した行列がなければ2つ、あれば3つ */
.bar { display: flex; flex-wrap: wrap; gap: .5rem; }
/* 日本語の下にフランス語が入るぶん、上下の余白は詰める */
.bar button { flex: 1 1 auto; padding-block: .5rem; } /* 幅は文字なりに、余白は等分。狭ければ折り返す */
.bar button[hidden] { display: none; }
/* ボタンの下、右端に小さく */
.bar .feedback {
  flex: 1 0 100%; text-align: right; margin: 0;
  font-size: .72rem; color: var(--ink-soft); text-decoration: none;
}
.bar a.feedback:hover { text-decoration: underline; } /* 仏語版は <a> が直接 .feedback */
/* リンクが複数あるときは <p> で包んで中に <a> を並べる */
.bar .feedback a { color: inherit; text-decoration: none; }
.bar .feedback a:hover { text-decoration: underline; }
.bar .feedback .sep { margin-inline: .5em; color: var(--rule); }
.bar .sub { color: inherit; opacity: .7; } /* ボタンの色に合わせる */
button {
  font: 500 .95rem var(--body); color: var(--ink);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 999px; padding: .75rem .9rem; min-width: 2.9rem; cursor: pointer;
  touch-action: manipulation; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
button:hover { background: var(--focus-bg); }
button:active { background: var(--focus-bg); }
button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* 行列入れ替えとシャッフルは表の左上の空欄に並べる */
.corner { display: flex; justify-content: flex-end; gap: .3rem; }
#swap, #shuffle {
  width: 1.9rem; height: 1.9rem; min-width: 0; padding: 0; margin: 0;
  display: grid; place-items: center;
  border-radius: 50%; color: var(--margin); border-color: var(--margin);
  transition: transform .12s ease, background .12s ease;
}
#swap:hover, #shuffle:hover { background: var(--ng-bg); }
#swap:active, #shuffle:active { background: var(--ng-bg); transform: scale(.88); }
/* 出題中は並べ替えも止める。表の並びごと 1 件なので触らせない */
body:has(.pins.quiz) :is(#swap, #shuffle) { display: none; }
/* 1セルだけになったシャッフル。押せないことを見せて、そのまま置いておく */
#shuffle:disabled { opacity: .3; cursor: default; }
#shuffle:disabled:hover, #shuffle:disabled:active { background: var(--card); transform: none; }
#swap svg, #shuffle svg { width: 1.05rem; height: 1.05rem; }
#swap svg { transform: translate(1px, 1px); }
/* 動詞の左。今の動詞と並び順・消した行列をまとめてピン留めする */
#pin {
  width: 1.7rem; height: 1.7rem; min-width: 0; padding: 0; align-self: center;
  position: relative; top: 7px; /* h1 の字面に対して少し下げる */
  display: grid; place-items: center; border-radius: 50%;
  color: var(--margin); border-color: var(--margin);
  transition: transform .12s ease, background .12s ease;
}
#pin svg { width: .9rem; height: .9rem; transform: translateY(1px); } /* ピンの頭が上に張るぶん、円の中で下げる */
#pin:hover, #pin:active { background: var(--ng-bg); }
#pin:active { transform: scale(.88); }
/* 留めてあるあいだは塗りつぶす */
#pin[aria-pressed="true"] { background: var(--ng-bg); }
#pin[aria-pressed="true"] svg { fill: currentColor; }

/* ピン留めした表の一覧。1件1行ではなく、収まるだけ横に並べる */
.pins { flex: 1 0 100%; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pins[hidden] { display: none; }
.pins li {
  display: flex; background: var(--card);
  border: 1px solid var(--rule); border-radius: 999px; overflow: hidden;
}
.pins button { border: 0; border-radius: 0; padding: .4rem .7rem; min-width: 0; }
.pins .pin-open { display: flex; align-items: baseline; gap: .4rem; }
.pins .pin-open b { font-family: var(--display); font-style: italic; font-weight: 500; font-size: .95rem; }
.pins .pin-open small { font-size: .7rem; color: var(--ink-soft); }
.pins .pin-del { color: var(--margin); padding-inline: .55rem; border-left: 1px solid var(--rule-faint); }
/* 操作の行とピンの行を分けるだけの空の li */
.pins .br { flex: 1 0 100%; height: 0; border: 0; }
/* 一覧の末尾。ピンではないので枠を破線にして区別する */
.pins :is(.copy, .mode, .clear) { border-style: dashed; }
.pins :is(.copy, .mode, .clear) button { font-size: .78rem; color: var(--ink-soft); }
.pins .clear button:hover { color: var(--margin); }
.pins .copy button { display: flex; align-items: center; gap: .3rem; }
.pins .copy svg { width: .9rem; height: .9rem; flex: none; }
/* 問題集から出題している最中。押されたトグルとピンを同じ色で結ぶ */
.pins .mode button[aria-pressed="true"] { background: var(--ng-bg); color: var(--ink); }
.pins.quiz .mode { border-style: solid; border-color: var(--margin); }
/* li の背景は中のボタンに隠れるので、ボタンごと染める */
.pins.quiz li:has(.pin-open) { border-color: var(--margin); }
.pins.quiz li:has(.pin-open) button { background: var(--ng-bg); }
.pins.quiz li:has(.pin-open) button:hover { background: var(--focus-bg); }
.pins.quiz li:has(.pin-open) .pin-del { border-left-color: var(--margin); }

#check { color: var(--focus); border-color: var(--focus); background: var(--focus-bg); }
#check:hover { background: color-mix(in srgb, var(--focus) 16%, transparent); }
#next { color: var(--margin); border-color: var(--margin); }
#restore, #reorder { color: var(--ink-soft); }
/* 問題集から出題している間は、表の並びと消した行列ごと 1 件。取り消しは出さない */
.bar:has(.pins.quiz) :is(#restore, #reorder) { display: none; }
#next:hover { background: var(--ng-bg); }
/* 通算スコアの全消しは日常の操作ではないので、小さく下に置く */
#reset-score {
  align-self: center; font-size: .78rem; padding: .35rem .8rem;
  color: var(--ink-soft); border-color: var(--rule-faint);
}

/* 通算の正答率。セルは右上に小さく、見出しは名前の下 */
.pct {
  font-variant-numeric: tabular-nums; color: var(--ink-soft);
  font-family: var(--body); font-style: normal; letter-spacing: 0; font-size: .65rem;
}
td .pct { position: absolute; top: .15rem; right: .3rem; opacity: .75; }
th .pct { display: block; font-weight: 400; text-transform: none; }
th .pct:empty, td .pct:empty { display: none; }