/* 作成日時: 2026-07-18 19:23 JST */
/* 更新日時: 2026-08-23 10:09 JST */

/* 基盤スタイル（リセット・アプリシェル・共通コンポーネント）。
   詳細は docs/design/GUI_DESIGN_SYSTEM.md を参照。フェーズ0では base.html の
   インラインスタイルをそのまま外部化しており、各テンプレート個別の
   <style> は未移行（フェーズ2以降）。フェーズ1でアプリシェル
   （レスポンシブヘッダー・ハンバーガードロワー・スキップリンク・
   セーフエリア）を追加。フェーズ2で低リスク画面向けの共通コンポーネント
   （アラート・パネル・hint 等）を追加。フェーズ3で一覧・詳細画面向けの
   横スクロール+先頭列固定テーブルと danger バリアントを追加。フェーズ4で
   入力・結果・日誌編集画面向けの split-grid/hint-inline を追加し
   （split-grid は後に日誌編集の単カラム化で data_detail.html 専用になった）、
   .panel の max-width を .panel--narrow 修飾子へ分離（全幅バナー用途との
   衝突を解消）。フェーズ6で data_detail.html と _diary_editor.html に
   重複していた table.diary の基本構造を共通化した（仕上げフェーズ。
   キャッシュ制御付き静的アセット配信は web.py/templating.py 側）。 */

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

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  background: var(--color-bg);
  color: var(--color-ink);
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  /* iOS Safari が横向きで本文を自動拡大するのを止め、Android・デスクトップと
     同じ文字サイズで描画させる（docs/design/GUI_DESIGN_SYSTEM.md §11）。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* フォーム部品はブラウザー既定の UI フォントへ戻さず、本文と同じ
   日英混植スタックを使う。個別画面のサイズ・行高指定はそのまま維持する。 */
button,
input,
select,
textarea {
  font-family: inherit;
}

.app-header__title,
h1,
h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: 0.02em;
}

code,
pre,
kbd,
samp,
.recovery-codes {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

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

.inline-form {
  display: inline;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--frame);
  color: #fff;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.app-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.6rem 1rem;
}

.app-header__title {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.app-header__nav {
  display: none;
  gap: var(--space-4);
  font-size: 0.9rem;
}

.app-header__nav a {
  color: #fff;
  text-decoration: none;
}

.app-header__nav a:hover {
  text-decoration: underline;
}

.app-header__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0.4rem 1rem;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--color-border);
}

.app-header__status a,
.app-header__status .linklike {
  color: var(--accent);
}

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.hamburger:hover {
  background: rgba(255, 255, 255, 0.12);
}

.hamburger__bars,
.hamburger__bars::before,
.hamburger__bars::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.hamburger__bars {
  position: relative;
}

.hamburger__bars::before {
  position: absolute;
  top: -7px;
  left: 0;
}

.hamburger__bars::after {
  position: absolute;
  top: 7px;
  left: 0;
}

.nav-drawer {
  border: none;
  margin: 0;
  padding: var(--space-5) var(--space-4);
  position: fixed;
  inset: 0 0 0 auto;
  height: 100%;
  max-height: 100%;
  width: min(300px, 85vw);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-md);
}

.nav-drawer::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

/* dialog はネイティブに dialog:not([open]) { display: none } を持つため、
   表示レイアウトは [open] 状態にだけ適用する（無条件に display を
   指定すると閉じた状態でも表示されてしまう） */
.nav-drawer[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transform: translateX(0);
  transition: transform var(--duration-base) ease;
}

@starting-style {
  .nav-drawer[open] {
    transform: translateX(100%);
  }
}

.nav-drawer__close {
  align-self: flex-end;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-ink);
  padding: var(--space-1) var(--space-2);
}

.nav-drawer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-drawer__links a {
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg);
}

.nav-drawer__links a:hover,
.nav-drawer__links a:focus-visible {
  background: var(--color-bg);
}

/* --bp-lg (docs/design/GUI_DESIGN_SYSTEM.md §2.4) 以上ではハンバーガーを隠し、
   ナビゲーションをヘッダー内に横並び表示する */
@media (min-width: 1024px) {
  .app-header__nav {
    display: flex;
  }

  .hamburger {
    display: none;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--accent);
  color: var(--color-accent-contrast);
  border: none;
  border-radius: 5px;
  padding: 0.5rem 1.2rem;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
}

.btn:disabled {
  background: var(--color-border);
  color: var(--color-ink-muted);
  cursor: not-allowed;
}

.btn.secondary {
  background: #667;
  color: #fff;
}

.btn.danger {
  background: var(--color-danger);
  /* --color-danger はダークモードで明るい赤になるため、通常のアクセント
     ボタンと同じコントラスト用トークンを流用する */
  color: var(--color-accent-contrast);
}

.linklike {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.linklike:hover {
  text-decoration: underline;
}

.form-narrow {
  max-width: 420px;
}

.form-narrow label {
  display: block;
  margin-bottom: 0.9rem;
}

.form-narrow input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.2rem;
  padding: 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font: inherit;
}

.msg-error {
  color: var(--color-danger);
}

.msg-success {
  color: var(--color-success);
}

.msg-warning {
  color: var(--color-warning);
}

footer {
  margin-top: 3rem;
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  text-align: center;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* フェーズ2: 低リスク画面（login/twofa/totp_setup/recovery/account/access）向け
   共通コンポーネント。詳細は docs/design/GUI_DESIGN_SYSTEM.md §4 を参照。 */

.hint {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-ink-muted);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.alert__icon {
  flex: none;
}

.alert.msg-warning {
  background: var(--color-warning-bg);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}

.panel {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: var(--space-4);
}

/* access.html の確認ダイアログ風パネルなど、狭い幅で止めたい場合の修飾子。
   data_detail.html/admin_jobs.html の警告・エラーバナーは全幅のまま使う */
.panel--narrow {
  max-width: 480px;
}

.panel-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
}

.panel-info {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}

.panel-danger {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.qr-code {
  border: 1px solid var(--color-border);
}

.recovery-codes {
  font-size: 1.2rem;
  columns: 2;
  max-width: 420px;
}

/* フェーズ3: 一覧・詳細画面（subjects/data_list/data_detail/admin_jobs/
   admin_logs）の横スクロール + 先頭列固定。先頭列の背景色は
   各テンプレートのtableクラス側で指定する（列によって行内で背景色が
   変わる場合があるため、ここでは位置決めのみを担う）。
   詳細は docs/design/GUI_DESIGN_SYSTEM.md §5.2/§5.3 を参照。 */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  width: 100%;
}

.table-scroll th:first-child,
.table-scroll td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

.table-scroll thead th:first-child {
  z-index: 2;
}

/* フェーズ4: 入力・結果画面向けの共通クラス。.split-grid は
   data_detail.html の画像+詳細レイアウト専用（_diary_editor.html は
   結果→注意→元画像の単カラム構成へ変更したため使わない）。
   詳細は docs/design/GUI_DESIGN_SYSTEM.md §5.3 を参照。 */
.split-grid {
  display: grid;
  grid-template-columns: minmax(320px, 45%) 1fr;
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .split-grid {
    grid-template-columns: 1fr;
  }
}

.split-grid img {
  width: 100%;
  border: 1px solid var(--color-border);
}

.hint-inline {
  font-size: var(--font-size-sm);
  color: var(--color-ink-muted);
}

/* フェーズ6: 日誌テーブルの基本構造（data_detail.html の表示専用テーブルと
   _diary_editor.html の編集用テーブルで、ほぼ同一のCSSが重複していたため
   共通化）。セルpadding・input/select装飾は画面ごとに異なるため、
   各テンプレート側で追加指定する。 */
table.diary {
  border-collapse: collapse;
  width: 100%;
}

table.diary th,
table.diary td {
  border: 1px solid var(--color-border);
  text-align: center;
}

table.diary thead th {
  background: var(--color-bg);
  font-weight: normal;
  font-size: .9rem;
}

table.diary td:first-child:not(.p-night):not(.p-day) {
  background: var(--color-surface);
}

table.diary thead th:first-child {
  background: var(--color-bg);
}

table.diary td.p-night { background: var(--night); }
table.diary td.p-day { background: var(--day); }

/* 帳票セルの背景はダークモードでもライト固定なので、文字も帳票用の濃色に固定する。
   編集画面の input/select は color: inherit によりこの色を引き継ぐ。 */
table.diary td.p-night,
table.diary td.p-day {
  color: var(--diary-ink);
}

table.diary tfoot td {
  background: var(--color-bg);
}

table.diary tfoot small {
  display: block;
  text-align: left;
  color: var(--color-ink-muted);
  font-size: .7rem;
}

/* フェーズ7: 公開ランディング（login.html）。未ログインの訪問者だけが見る画面の
   ため .landing 名前空間に閉じ、他画面のクラスとトークン値は変更しない。
   端末差を避けるため、サイズは clamp() の連続可変とし、装飾はインラインSVGだけを
   使う。詳細は docs/design/GUI_DESIGN_SYSTEM.md §11 を参照。 */
.landing {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 560px;
  margin: 0 auto;
}

/* .panel の既定下マージンは .landing の gap に任せる */
.landing .panel {
  margin-bottom: 0;
  border-radius: var(--radius-lg);
}

.landing__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: clamp(var(--space-5), 6vw, var(--space-7)) var(--space-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    150deg,
    var(--color-surface-soft),
    var(--color-surface-warm)
  );
  box-shadow: var(--shadow-soft);
}

.landing__art {
  width: clamp(88px, 26vw, 128px);
  height: auto;
}

.landing__title {
  margin: 0;
  font-size: clamp(1.35rem, 5.5vw, var(--font-size-2xl));
}

.landing__lead {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-ink-muted);
}

.landing__heading {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-lg);
}

/* パネル内では横幅の制限をパネル側に任せる */
.landing .form-narrow {
  max-width: none;
}

.landing__contact-line {
  margin: 0;
}

.landing__contact {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  overflow-wrap: anywhere;
}