/* Cloudflare 版だけの部品: 上のバーのアカウント表示・ログイン前の画面・注意書き・プラン。値は style.css の変数（DESIGN.md が正本）。 */
.topbar { flex-wrap: wrap; }
body[data-screen="login"] .topbar nav { visibility: hidden; }
body[data-screen="login"] .topbar h1 { visibility: hidden; }

.account-bar { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px 8px; margin-left: auto; min-width: 0; }
.account-plan { padding: 2px 14px; background: var(--yellow-soft); border: 1px solid #f1e0a0; border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }

.test-banner { margin: 0 0 16px; padding: 8px 14px; border: 1px solid #f1e0a0; border-left-width: 4px; border-radius: 10px; background: var(--yellow-soft); font-size: 15px; }
.notice-ok { margin: 0 0 16px; padding: 8px 14px; border: 1px solid var(--good); border-left-width: 4px; border-radius: 10px; color: var(--good); font-weight: 700; background: var(--card); }
.data-list li, .notice-list li { margin: 6px 0; }

.iv-notice { width: min(100%, 680px); margin: 16px auto 0; border: 2px solid var(--ink); }
.iv-notice .q-title { margin-bottom: 4px; }
.notice-list { margin: 0 0 8px; padding-left: 1.3em; font-size: 15px; line-height: 1.6; }
.iv-notice .check-row { margin: 8px 0 0; }

.privacy-card { background: var(--paper-2); }
.privacy-card p { margin: 0; }
.home-privacy { max-width: 1232px; margin: 12px auto 0; }

.plan-row { align-items: center; }
.plan-row button { margin-left: auto; min-height: 40px; padding: 0 18px; font-size: 15px; }
.plan-row.current { border-color: var(--ink); background: var(--yellow-soft); }
.history td.del { text-align: right; }
.history td.del button { min-height: 32px; padding: 0 12px; font-size: 13px; }

/* 新しい面接の入口（種類と話題）。選択肢は幅いっぱいに並べ、説明文が折り返せるようにする */
.pick-line { margin: 0 0 12px; font-weight: 700; color: var(--ink); }
#screen-new fieldset.card { margin: 0 0 16px; }
#screen-new legend { font-weight: 800; font-size: 17px; padding: 0 6px; }
#new-kinds .choice, #new-topics .choice { flex: 1 1 100%; }
#new-topics .choice { flex-basis: calc(50% - 5px); }
#new-kinds .choice-body, #new-topics .choice-body { height: 100%; }
#new-kinds .choice-body b, #new-topics .choice-body b { font-size: 16px; }
#new-kinds .choice-body .small, #new-topics .choice-body .small { color: var(--ink-2); font-size: 14px; }
#iv-item-row { margin: 10px 0 0; }
#iv-item { display: block; margin-top: 4px; width: 100%; font-weight: 400; }

/* 面接中の残り時間。締めの合図の少し前から赤くして、注意書きを出す */
.timecard[data-low="true"] { border-color: var(--bad); }
.timecard[data-low="true"] b { color: var(--bad); }
.time-note { width: min(100%, 680px); margin: 10px auto 0; padding: 6px 14px; text-align: center; font-weight: 700; background: var(--yellow-soft); border: 1px solid #f1e0a0; border-radius: 10px; }

/* 1 つの話題だけの練習で、見ていない軸の行 */
.axis-row.not-observed .axis-head { grid-template-columns: minmax(11em, 14em) minmax(0, 1fr); }
.axis-skip { color: var(--ink-2); font-size: 14px; font-weight: 700; }

@media (max-width: 760px) {
  #new-topics .choice { flex-basis: 100%; }
  .axis-row.not-observed .axis-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "skip"; }
  .axis-skip { grid-area: skip; }
  .topbar { gap: 4px 12px; }
  .topbar nav { order: 3; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .account-bar { justify-content: flex-start; margin-left: 0; width: 100%; order: 2; }
  .plan-row button { margin-left: 0; width: 100%; }
  .history td.del { text-align: left; }
}