/*
 * x-helper — 全面スタイル (PR5)
 *
 * 方針: 案 C「校正紙」(暗色の卓 + 紙のカード) ビジュアル + 普通の用語。
 *  - 背景は卓 (desk #1C1A17)、カードは校正紙 (paper #E8DFC8) のライト面
 *  - 「投稿した」→ 赤い○、「破棄」→ 赤い斜線が SVG で描画される
 *  - 「コピー」→ カードに上から下へハサミの切れ目 (破線) が走る
 *  - フィルタタブで draft/posted/discarded を切替
 *  - モバイルファースト、@media (min-width: 720px) で PC 拡張
 *  - 動き低減ユーザーに配慮 (prefers-reduced-motion)
 */

:root {
  /* パレット — どこからでも参照する一次パレット */
  --c-desk:         #1C1A17;
  --c-paper:        #E8DFC8;
  --c-ink:          #1A1410;
  --c-muted:        #7A6F5C;
  --c-rule:         rgba(122, 111, 92, 0.45);
  --c-lamp:         #E8B549;
  --c-lamp-dim:     rgba(232, 181, 73, 0.18);
  --c-lamp-mid:     rgba(232, 181, 73, 0.32);
  --c-red:          #D0463A;
  --c-red-dim:      rgba(208, 70, 58, 0.08);
  --c-shadow:       rgba(0, 0, 0, 0.45);

  /* タイポ — 明朝主体、id/日付のみモノスペース */
  --f-display: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --f-body:    "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-card:  4px;
  --t-quick: 180ms;
  --t-med:   320ms;
  --t-slow:  600ms;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/*
 * HTML5 `hidden` 属性を確実に効かせる。
 * Chromium / WebKit の UA stylesheet は `[hidden] { display: none }` を !important
 * 無しで宣言している (Firefox は !important あり)。Author CSS の
 * `.card__state-group { display: flex }` / `.card__undo { display: flex }` が勝って
 * `hidden=true` が無視されるため、!important で UA 定義の意図を取り戻す。
 * app.js は HTML5 `hidden` 属性に統一しているので、この 1 行で
 * 投稿済/破棄タブの状態変更ボタン非表示・undo バーの初期非表示が機能する。
 */
[hidden] { display: none !important; }

body {
  background: var(--c-desk);
  color: var(--c-paper);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

/* ===========================================================================
 * Header
 * =========================================================================*/
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.25rem 1.25rem 0.75rem;
  max-width: 760px;
  margin: 0 auto;
}
.app-header__brand {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  margin: 0;
  color: var(--c-lamp);
}
.app-header__logout {
  background: transparent;
  border: 0;
  color: var(--c-muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.5rem;
  margin: -0.5rem;
  transition: color var(--t-quick);
}
.app-header__logout:hover { color: var(--c-paper); }
.app-header__logout:focus-visible {
  color: var(--c-paper);
  outline: 2px solid var(--c-lamp);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ヘッダ右のナビ群 (履歴 / ログアウト) */
.app-header__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.app-header__link {
  font-family: var(--f-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  text-decoration: none;
  padding: 0.5rem 0.25rem;
  transition: color var(--t-quick);
}
.app-header__link:hover { color: var(--c-paper); }
.app-header__link:focus-visible {
  color: var(--c-paper);
  outline: 2px solid var(--c-lamp);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ===========================================================================
 * History page (history.html)
 * =========================================================================*/
.page-history__main {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}
.stats-totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.stats-total {
  background: var(--c-paper);
  color: var(--c-ink);
  border-radius: var(--r-card);
  padding: 1.25rem 0.5rem;
  text-align: center;
  box-shadow: 0 8px 20px -8px var(--c-shadow), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  background-image:
    radial-gradient(rgba(122, 111, 92, 0.08) 1px, transparent 1px),
    radial-gradient(rgba(122, 111, 92, 0.05) 1px, transparent 1px);
  background-position: 0 0, 11px 13px;
  background-size: 22px 22px, 22px 22px;
}
.stats-total__num {
  display: block;
  font-family: var(--f-display);
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  letter-spacing: -0.01em;
}
.stats-total__label {
  display: block;
  font-size: 0.75rem;
  color: var(--c-muted);
  letter-spacing: 0.08em;
}
.stats-weekly__heading {
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--c-paper);
  margin: 0 0 1rem;
  font-weight: 600;
}
.stats-weekly__sub {
  color: var(--c-muted);
  font-size: 0.85em;
  margin-left: 0.5em;
  letter-spacing: 0.04em;
}
.stats-weekly__chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.stats-weekly__loading,
.stats-weekly__empty,
.stats-weekly__error {
  text-align: center;
  color: var(--c-muted);
  font-size: 0.9rem;
  padding: 2rem 0;
}
.stats-weekly__error { color: var(--c-red); }
.stats-weekly__row {
  display: grid;
  grid-template-columns: 6.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--c-paper);
}
.stats-weekly__week {
  color: var(--c-muted);
}
.stats-weekly__bar-wrap {
  height: 1.25rem;
  background: rgba(232, 223, 200, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.stats-weekly__bar {
  height: 100%;
  background: var(--c-lamp);
  /* 描画時の prefers-reduced-motion 対応はファイル末尾の global ルールで適用される */
  transition: width var(--t-med);
}
.stats-weekly__num {
  text-align: right;
}
@media (min-width: 720px) {
  .stats-weekly__row {
    grid-template-columns: 8rem 1fr 3rem;
    font-size: 0.8rem;
  }
}

/* ===========================================================================
 * Tabs
 * =========================================================================*/
.app-tabs {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.5rem 1rem 1.25rem;
  max-width: 760px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(232, 223, 200, 0.08);
}
.app-tabs__tab {
  background: transparent;
  border: 0;
  color: var(--c-muted);
  font: inherit;
  font-family: var(--f-display);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 0.5rem 0.25rem;
  position: relative;
  transition: color var(--t-quick);
  min-height: 44px;
}
.app-tabs__tab:hover { color: var(--c-paper); }
.app-tabs__tab.is-active { color: var(--c-paper); }
.app-tabs__tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 1.75rem;
  height: 2px;
  background: var(--c-lamp);
  transform: translateX(-50%);
}
.app-tabs__tab:focus-visible {
  outline: 2px solid var(--c-lamp);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ===========================================================================
 * Filters (search + tag chips)
 * =========================================================================*/
.app-filters {
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.app-filters__search {
  background: transparent;
  border: 1px solid var(--c-rule);
  color: var(--c-paper);
  font: inherit;
  /* iOS Safari zoom 防止 + 統一 */
  font-size: max(16px, 0.95rem);
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  min-height: 44px;
  transition: border-color var(--t-quick);
}
.app-filters__search::placeholder { color: var(--c-muted); }
.app-filters__search:focus,
.app-filters__search:focus-visible {
  outline: none;
  border-color: var(--c-lamp);
}
.app-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 1px;
}
.app-filters__chip {
  background: transparent;
  border: 1px solid var(--c-rule);
  color: var(--c-muted);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  min-height: 32px;
  transition: background var(--t-quick), border-color var(--t-quick), color var(--t-quick);
}
.app-filters__chip:hover {
  border-color: var(--c-lamp);
  color: var(--c-paper);
}
.app-filters__chip.is-active {
  background: var(--c-lamp-dim);
  border-color: var(--c-lamp);
  color: var(--c-paper);
}
.app-filters__chip:focus-visible {
  outline: 2px solid var(--c-lamp);
  outline-offset: 2px;
}

/* ===========================================================================
 * List status (loading / empty / error)
 * =========================================================================*/
.app-list {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1rem 0;
}
.app-list__loading,
.app-list__empty,
.app-list__error {
  text-align: center;
  color: var(--c-muted);
  font-size: 0.9rem;
  padding: 3rem 1rem;
}
.app-list__error { color: var(--c-red); }

/* ===========================================================================
 * Card (校正紙)
 * =========================================================================*/
.card {
  position: relative;
  background: var(--c-paper);
  color: var(--c-ink);
  border-radius: var(--r-card);
  padding: 1.5rem 1.5rem 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 12px 30px -10px var(--c-shadow),
              0 2px  6px  -2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  /* 紙の繊維風ドット 2 層 */
  background-image:
    radial-gradient(rgba(122, 111, 92, 0.08) 1px, transparent 1px),
    radial-gradient(rgba(122, 111, 92, 0.05) 1px, transparent 1px);
  background-position: 0 0, 11px 13px;
  background-size: 22px 22px, 22px 22px;
  transition: opacity var(--t-med);
}
.card.is-leaving {
  opacity: 0.25;
  pointer-events: none;
}

.card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--c-muted);
  letter-spacing: 0.02em;
}
.card__id-num {
  font-weight: 600;
  color: var(--c-ink);
  margin-left: 0.2em;
}

.card__divider {
  border-top: 1px solid var(--c-rule);
  margin: 0.5rem 0 1rem;
  width: 2.25rem;
}

.card__text {
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.95;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--c-ink);
  margin: 0 0 1.25rem;
}

/* 引用リポスト (kind=quote) の元ツイートコンテナ。
   初期は左に細い罫線 + フォールバックリンク。widgets.js が embed 成功すると
   app.js がフォールバックを除去して、X の iframe (twitter-tweet) のみ残る。 */
.card__quote {
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid var(--c-muted);
  background: rgba(122, 111, 92, 0.06);
  border-radius: 4px;
  font-size: 0.85rem;
  /* overflow-wrap: anywhere は word-break: break-all より破綻が少ない (CJK で自然な改行も維持) */
  overflow-wrap: anywhere;
  /* X widgets の iframe が要求する横幅 (~220px) でカードの overflow:hidden に切れないよう、
     コンテナ側で横スクロールを許す (375px モバイルの右端切れ対策) */
  overflow-x: auto;
}
.card__quote-fallback {
  color: var(--c-muted);
  text-decoration: none;
}
.card__quote-fallback:hover {
  color: var(--c-ink);
  text-decoration: underline;
}
/* X widgets が挿入する <iframe class="twitter-tweet"> を中央寄せ + 親幅を超えない。
   widgets.js の inline style より勝つために !important で当てる。 */
.card__quote .twitter-tweet {
  margin: 0 auto !important;
  max-width: 100% !important;
}

.card__foot {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--c-muted);
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}
.card__tags {
  font-family: var(--f-body);
  font-size: 0.8rem;
  color: var(--c-muted);
}

/* ---- インライン編集モード ---- */
.card__edit {
  margin: 0 0 1.25rem;
}
.card__edit-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--c-rule);
  color: var(--c-ink);
  font-family: var(--f-body);
  /* iOS Safari の zoom 防止 */
  font-size: max(16px, 1rem);
  line-height: 1.85;
  padding: 0.75rem 0.9rem;
  border-radius: 4px;
  resize: vertical;
  min-height: 8rem;
  transition: border-color var(--t-quick);
}
.card__edit-textarea:focus,
.card__edit-textarea:focus-visible {
  outline: none;
  border-color: var(--c-lamp);
}
.card__edit-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem 0 0.75rem;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--c-muted);
  gap: 0.75rem;
}
/* 残り 20 字を切ったら lamp で予告、超過したら red */
.card__edit-count.is-warn { color: var(--c-lamp); }
.card__edit-count.is-over { color: var(--c-red); }

/* 編集モード中は同じカードの state-group とコピーを抑制して
   「編集途中で状態変更してロスト」「コピーすると編集前 text が貼られる」を防ぐ。
   ([hidden] と同じく `display: none !important` の力で勝つ。) */
.card.is-editing .card__state-group { display: none !important; }
.card.is-editing .card__state--restore { display: none !important; }
.card.is-editing .card__copy {
  opacity: 0.4;
  pointer-events: none;
}
.card__edit-error {
  color: var(--c-red);
  font-family: var(--f-body);
  text-align: right;
}
.card__edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.card__edit-save,
.card__edit-cancel {
  font-family: var(--f-body);
  font-size: 0.9rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  min-height: 40px;
  border: 1px solid var(--c-rule);
  transition: background var(--t-quick), color var(--t-quick), border-color var(--t-quick);
}
.card__edit-save {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
  font-weight: 600;
}
.card__edit-save:hover { background: var(--c-red); border-color: var(--c-red); }
.card__edit-save:disabled { opacity: 0.5; cursor: not-allowed; }
.card__edit-save:focus-visible {
  outline: 2px solid var(--c-lamp);
  outline-offset: 2px;
}
.card__edit-cancel {
  background: transparent;
  color: var(--c-muted);
}
.card__edit-cancel:hover { color: var(--c-ink); border-color: var(--c-ink); }
.card__edit-cancel:focus-visible {
  outline: 2px solid var(--c-rule);
  outline-offset: 2px;
}

/* 編集タブ用ボタン (state-group 内に並べる) */
.card__state--edit { color: var(--c-ink); }
.card__state--edit:hover {
  background: var(--c-lamp-dim);
  border-color: var(--c-lamp-mid);
  color: var(--c-ink);
}

/* ---- 赤鉛筆の○ / 斜線 (投稿した / 破棄) ---- */
/* 描画前は不可視。is-marking + data-mark で線が描かれる。 */
.card__redmark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  height: 5.5rem;
  transform: translate(-50%, -50%) rotate(-3deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-quick);
  z-index: 2;
}
.card.is-marking .card__redmark { opacity: 1; }

.card__redmark-circle,
.card__redmark-slash {
  fill: none;
  stroke: var(--c-red);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
}
.card.is-marking[data-mark="post"]    .card__redmark-circle { animation: draw-mark var(--t-slow) ease forwards; }
.card.is-marking[data-mark="discard"] .card__redmark-slash  { animation: draw-mark var(--t-slow) ease forwards; }
.card[data-mark="post"]    .card__redmark-slash  { display: none; }
.card[data-mark="discard"] .card__redmark-circle { display: none; }

@keyframes draw-mark {
  to { stroke-dashoffset: 0; }
}

/* ---- カード全体を走る切れ目線 (コピー時) ---- */
/* top を 0 → 100% に動かしてカード分の高さを横切る (height は border 分のみ)。 */
.card.is-copying::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  border-top: 1.5px dashed var(--c-red);
  animation: scissor-line var(--t-med) ease-out forwards;
  pointer-events: none;
  z-index: 3;
}
@keyframes scissor-line {
  from { top: 0%;   opacity: 0.9; }
  to   { top: 100%; opacity: 0;   }
}

/* ===========================================================================
 * Card actions
 * =========================================================================*/
.card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  border-top: 1px dashed var(--c-rule);
  padding-top: 1rem;
}

.card__copy {
  flex: 1 1 auto;
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: var(--c-ink);
  background: var(--c-lamp-dim);
  border: 1px solid var(--c-lamp-mid);
  padding: 0.65rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  transition: background var(--t-quick), border-color var(--t-quick);
}
.card__copy:hover { background: rgba(232, 181, 73, 0.28); }
.card__copy:focus-visible {
  outline: 2px solid var(--c-lamp);
  outline-offset: 2px;
}

.card__state-group {
  display: flex;
  gap: 0.5rem;
}
.card__state {
  font-family: var(--f-body);
  font-size: 0.9rem;
  border: 1px solid var(--c-rule);
  background: transparent;
  color: var(--c-ink);
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-quick), border-color var(--t-quick), color var(--t-quick);
  min-height: 44px;
}
.card__state--post:hover {
  background: var(--c-red-dim);
  border-color: rgba(208, 70, 58, 0.4);
  color: var(--c-red);
}
.card__state--discard { color: var(--c-muted); }
.card__state--discard:hover {
  background: rgba(122, 111, 92, 0.12);
  color: var(--c-ink);
}
.card__state:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}

/* ---- 下書きに戻すボタン (投稿済/破棄タブのみ表示) ---- */
/* state-group のボタンと外観は共通だが、控えめな muted 色で「主要操作ではない」感を出す。 */
.card__state--restore {
  color: var(--c-muted);
}
.card__state--restore:hover {
  background: rgba(122, 111, 92, 0.12);
  border-color: var(--c-rule);
  color: var(--c-ink);
}

/* ---- undo バー (状態変更後 3 秒間) ---- */
/* JS 側 UNDO_MS (3000) と同期。変更時は両方更新。 */
.card__undo {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--c-red-dim);
  border: 1px solid rgba(208, 70, 58, 0.3);
  border-radius: var(--r-card);
  padding: 0.7rem 1rem;
  position: relative;
  overflow: hidden;
  font-size: 0.85rem;
  color: var(--c-ink);
}
.card__undo-label { flex: 1; }
.card__undo-btn {
  background: transparent;
  border: 1px solid var(--c-red);
  color: var(--c-red);
  font: inherit;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  min-height: 36px;
  transition: background var(--t-quick), color var(--t-quick);
}
.card__undo-btn:hover {
  background: var(--c-red);
  color: var(--c-paper);
}
.card__undo-btn:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}
.card__undo-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--c-red);
  transform-origin: left center;
  animation: undo-progress 3s linear forwards;
}
@keyframes undo-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ===========================================================================
 * Pager
 * =========================================================================*/
.app-pager {
  text-align: center;
  padding: 1.5rem 1rem 3rem;
  max-width: 760px;
  margin: 0 auto;
}
.app-pager__more {
  background: transparent;
  border: 1px solid var(--c-rule);
  color: var(--c-paper);
  font-family: var(--f-display);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  padding: 0.75rem 2.5rem;
  border-radius: 999px;
  cursor: pointer;
  min-height: 44px;
  transition: border-color var(--t-quick), color var(--t-quick);
}
.app-pager__more:hover {
  border-color: var(--c-lamp);
  color: var(--c-lamp);
}
.app-pager__more:focus-visible {
  outline: 2px solid var(--c-lamp);
  outline-offset: 2px;
  border-color: var(--c-lamp);
  color: var(--c-lamp);
}

/* ===========================================================================
 * Toast
 * =========================================================================*/
.app-toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 0.9rem;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  opacity: 0;
  transition: opacity var(--t-quick), transform var(--t-quick);
  pointer-events: none;
}
.app-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.app-toast--error {
  background: var(--c-red);
  color: var(--c-paper);
}

/* ===========================================================================
 * Login page (login.html)
 * =========================================================================*/
.page-login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 2rem 1rem;
}
.login-card {
  background: var(--c-paper);
  color: var(--c-ink);
  width: 100%;
  max-width: 22rem;
  padding: 2.5rem 2rem;
  border-radius: var(--r-card);
  box-shadow: 0 16px 40px -12px var(--c-shadow),
              0 2px  6px  -2px rgba(0, 0, 0, 0.5);
  background-image:
    radial-gradient(rgba(122, 111, 92, 0.08) 1px, transparent 1px),
    radial-gradient(rgba(122, 111, 92, 0.05) 1px, transparent 1px);
  background-position: 0 0, 11px 13px;
  background-size: 22px 22px, 22px 22px;
}
.login-card__brand {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  margin: 0 0 0.4rem;
  font-size: 1.5rem;
  color: var(--c-ink);
}
.login-card__caption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--c-muted);
  margin: 0 0 1.75rem;
  letter-spacing: 0.04em;
}
.login-card__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.login-card__input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-rule);
  font: inherit;
  /* iOS Safari は 16px 未満の input にフォーカスすると拡大するため、最低 16px を保証 */
  font-size: max(16px, 1rem);
  color: var(--c-ink);
  padding: 0.75rem 0.25rem;
  transition: border-color var(--t-quick);
}
.login-card__input::placeholder { color: var(--c-muted); }
.login-card__input:focus {
  outline: none;
  border-bottom-color: var(--c-lamp);
}
/* キーボードフォーカス時は border-bottom 変化に加えて outline も出す
   (マウスフォーカスでは focus-visible が立たないので二重にはならない)。 */
.login-card__input:focus-visible {
  outline: 2px solid var(--c-lamp);
  outline-offset: 4px;
  border-radius: 2px;
}
.login-card__submit {
  background: var(--c-ink);
  color: var(--c-paper);
  border: 0;
  font: inherit;
  font-family: var(--f-display);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 0.5rem;
  min-height: 44px;
  transition: background var(--t-quick), color var(--t-quick);
}
.login-card__submit:hover { background: var(--c-red); }
.login-card__submit:focus-visible {
  outline: 2px solid var(--c-lamp);
  outline-offset: 2px;
}
.login-card__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--c-muted);
}
.login-card__error {
  color: var(--c-red);
  font-size: 0.85rem;
  min-height: 1.2em;
  text-align: center;
  margin: 0.25rem 0 0;
}

/* ===========================================================================
 * Desktop expansion
 * =========================================================================*/
@media (min-width: 720px) {
  .app-header        { padding: 2rem 0 1rem; }
  .app-header__brand { font-size: 1.75rem; }
  .app-list          { padding: 2rem 0 0; }
  .card              { padding: 2rem 2.25rem 1.5rem; margin-bottom: 2rem; }
  .card__text        { font-size: 1.125rem; }
  .card__actions     { padding-top: 1.25rem; }
}

/* ===========================================================================
 * Reduce motion
 * =========================================================================*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}