/* memo-flashcards の画面（スマホ前提）。Ink v1.0（ink.css。2026-10-29 コピー）の上に、カード・スワイプ・記録に要る部品だけ足す。
   色・線・角丸・影は ink.css の --ink-* を使い、ここに値を直書きしない。ライトだけ */

html { min-height: 100%; -webkit-text-size-adjust: 100%; }
.ink-ui a { text-decoration: none; }
.ink-ui kbd { margin-left: 8px; padding: 1px 6px; border-radius: 6px; background: var(--ink-fill); color: var(--ink-text-3);
  font: 500 var(--ink-fs-xs) var(--ink-mono); }
.ink-btn--dark kbd { background: rgba(255, 255, 255, 0.14); color: var(--ink-on-black-3); }
@media (hover: none), (pointer: coarse) { .ink-ui kbd { display: none; } }

/* 枠: 上は白い帯、下は薄いグレーの地。中身は真ん中の 560px の列 */
.mf { display: flex; flex-direction: column; min-height: 100dvh; }
.mf-wrap { width: 100%; max-width: 560px; margin: 0 auto; padding-left: 18px; padding-right: 18px; }

/* ヘッダ */
.mf-top { padding-top: env(safe-area-inset-top); background: var(--ink-surface); border-bottom: 1px solid var(--ink-line); }
.mf-top .mf-wrap { padding-top: 18px; padding-bottom: 14px; }
.mf-top-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mf-head { min-width: 0; }
.mf-brand { font-size: var(--ink-fs-lg); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.mf-date { min-height: 1.6em; margin-top: 2px; color: var(--ink-text-2); font-size: var(--ink-fs-base); font-weight: 500; line-height: 1.6; }
.mf-count { flex: none; padding: 4px 12px; border: 1px solid var(--ink-line-2); border-radius: var(--ink-r-pill);
  font: 500 var(--ink-fs-base) var(--ink-mono); font-feature-settings: "tnum" 1; }
.mf-tabs { display: flex; width: 100%; margin-top: 14px; }
.mf-tabs .ink-tab { flex: 1; justify-content: center; height: 36px; }

.mf-main { flex: 1; padding-top: 18px; padding-bottom: 28px; }

/* 今日の残り */
.mf-progress { display: flex; align-items: center; gap: 14px; margin: 0 2px 14px; color: var(--ink-text-2); font-size: var(--ink-fs-sm); white-space: nowrap; }
.mf-progress-bar { position: relative; flex: 1; height: 6px; overflow: hidden; border-radius: var(--ink-r-pill); background: var(--ink-fill-2); }
.mf-progress-bar i { position: absolute; inset: 0 auto 0 0; width: var(--mf-bar, 0%); border-radius: var(--ink-r-pill); background: var(--ink-text); transition: width 0.3s ease; }

/* カード（白いカード・細い線） */
/* 文字を選べるようにすると、指を止めてから振ったときに iOS が文字選択を始めてスワイプが取り消されるので選ばせない */
.mf-card { position: relative; display: flex; flex-direction: column; padding: 20px 22px 22px;
  background: var(--ink-surface); border: 1px solid var(--ink-line); border-radius: var(--ink-r-card); box-shadow: var(--ink-card-shadow); }
#card { min-height: 48dvh; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: transform 0.22s ease, opacity 0.22s ease; }
.mf-card[data-shown="false"] { cursor: pointer; }
.mf-card.is-dragging { transition: none; }
.mf-card.is-entering { animation: mf-in 0.24s ease-out; }
.mf-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 28px; }
.mf-drop { margin-right: -8px; padding: 6px 8px; border: 0; border-radius: var(--ink-r-sm); background: none; color: var(--ink-text-3); font-size: var(--ink-fs-sm); }
.mf-drop:hover { background: var(--ink-fill); color: var(--ink-text); }
.mf-book { margin-top: 18px; color: var(--ink-text-2); font-size: var(--ink-fs-sm); line-height: 1.6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-book:not([hidden]) + .mf-q { margin-top: 6px; }
.mf-q { margin-top: 18px; font-size: 20px; font-weight: 600; line-height: 1.7; letter-spacing: -0.005em; overflow-wrap: anywhere; word-break: auto-phrase; }
.mf-hint { margin-top: auto; padding-top: 32px; color: var(--ink-text-3); font-size: var(--ink-fs-sm); text-align: center; }
.mf-ans { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ink-line); animation: mf-fade 0.2s ease-out; }
.mf-label { color: var(--ink-text-3); font-size: var(--ink-fs-sm); font-weight: 600; }
.mf-a { margin-top: 10px; font-size: var(--ink-fs-read-2); line-height: 1.95; letter-spacing: var(--ink-ls-read); white-space: pre-wrap; overflow-wrap: anywhere; }
.mf-memo { margin-top: 16px; }
.mf-memo summary { width: max-content; padding: 4px 0; color: var(--ink-text-2); font-size: var(--ink-fs-sm); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--ink-line-2); text-underline-offset: 3px; }
.mf-memo summary:hover { color: var(--ink-text); }
.mf-memo-body { margin-top: 8px; padding: 14px 16px; border-radius: var(--ink-r-ctl); background: var(--ink-fill);
  color: var(--ink-text-2); font-size: var(--ink-fs-base); line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.mf-src { margin-top: 16px; color: var(--ink-text-3); font-size: var(--ink-fs-xs); }
.mf-swipe-hint { margin-top: 20px; color: var(--ink-text-3); font-size: var(--ink-fs-xs); text-align: center; }
@media (hover: hover) and (pointer: fine) { .mf-swipe-hint { display: none; } }

/* スワイプ中のはんこ（色では分けない。覚えてた＝塗り、忘れてた＝線） */
.mf-stamp { position: absolute; top: 16px; padding: 5px 12px; border-radius: var(--ink-r-sm);
  font-size: var(--ink-fs-sm); font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.mf-stamp-ok { left: 22px; background: var(--ink-solid); color: var(--ink-on-black); transform: rotate(-8deg); }
.mf-stamp-ng { right: 22px; background: var(--ink-surface); border: 1.5px solid var(--ink-line-2); color: var(--ink-text-2); transform: rotate(8deg); }
.mf-card[data-swipe="ok"] .mf-stamp-ok, .mf-card[data-swipe="ng"] .mf-stamp-ng { opacity: 1; }

.mf-skeleton { justify-content: center; gap: 12px; min-height: 48dvh; }
.mf-loading { height: 14px; border-radius: 4px; background: var(--ink-fill); }
.mf-skeleton .mf-short { width: 60%; }

/* 終わり・空・エラー */
.mf-done-title { margin: 4px 0 14px; font-size: var(--ink-fs-lg); font-weight: 600; }
.mf-kv { margin: 0; }
.mf-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ink-line); }
.mf-kv > div:last-child { border-bottom: 0; }
.mf-kv dt { color: var(--ink-text-2); font-size: var(--ink-fs-base); }
.mf-kv dd { margin: 0; text-align: right; font: 500 var(--ink-fs-base) var(--ink-mono); font-feature-settings: "tnum" 1; }
.mf-more { margin-top: 18px; height: 48px; }
.mf-note { color: var(--ink-text-2); font-size: var(--ink-fs-base); line-height: 1.9; }
.mf-note code { font: var(--ink-fs-sm) var(--ink-mono); overflow-wrap: anywhere; }
.mf-err { margin-top: 14px; }

/* 下の操作（答えを出したあと） */
.mf-actions { position: sticky; bottom: 0; z-index: 5; background: var(--ink-surface); border-top: 1px solid var(--ink-line); }
.mf-actions-in { display: flex; gap: 10px; padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.mf-big { flex: 1; height: 54px; border-radius: 14px; font-size: var(--ink-fs-md); }
.mf-big:active { transform: scale(0.98); }

/* 元に戻す */
.mf-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: calc(100% - 36px); padding: 9px 10px 9px 16px; border-radius: var(--ink-r-ctl);
  background: var(--ink-solid); color: var(--ink-on-black); box-shadow: var(--ink-float-shadow); font-size: var(--ink-fs-sm);
  transform: translateX(-50%); animation: mf-toast 0.2s ease-out;
  pointer-events: none; } /* カードに重なっても下のカードを触れるように、効くのは「元に戻す」だけ */
.mf-toast button { pointer-events: auto; flex: none; padding: 6px 8px; border: 0; border-radius: var(--ink-r-sm); background: transparent; color: inherit;
  font-size: var(--ink-fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* 記録 */
.mf-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ink-gap); margin-bottom: var(--ink-gap); }
#view-stats > .ink-panel + .ink-panel { margin-top: var(--ink-gap); }
.mf-boxes { margin-bottom: 14px; }
.mf-boxes .ink-bar { grid-template-columns: 82px minmax(0, 1fr) 52px; }
/* 最近14日（縦の棒・同じ尺度。数は上に） */
.mf-cols { display: flex; align-items: stretch; gap: 6px; height: 150px; }
.mf-col { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: center; gap: 6px; }
.mf-col b { font: 500 var(--ink-fs-xs) var(--ink-mono); font-feature-settings: "tnum" 1; }
.mf-col-track { position: relative; flex: 1; width: 8px; overflow: hidden; border-radius: var(--ink-r-pill); background: var(--ink-fill-2); }
.mf-col-track i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: var(--ink-r-pill); background: var(--ink-text); }
.mf-col span { color: var(--ink-text-3); font: var(--ink-fs-xs) var(--ink-mono); }
.mf-logout { margin-top: 12px; }

@keyframes mf-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes mf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mf-toast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }

@media (max-width: 620px) {
  .mf-wrap { padding-left: 14px; padding-right: 14px; }
  .mf-card { padding: 18px 18px 20px; }
  .mf-q { font-size: 19px; }
}
@media (max-width: 380px) {
  .mf-stat-row { gap: 10px; }
  .mf-cols { gap: 4px; }
}

/* ログイン */
.mf-login { display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px; }
.mf-login-title { margin-bottom: 4px; font-size: var(--ink-fs-lg); font-weight: 700; letter-spacing: -0.02em; }
.mf-login .ink-input { min-height: 46px; font-size: 16px; } /* 16px 未満だと iPhone が拡大する */
.mf-login-err { display: none; }
.mf-login-err.show { display: block; }