/* 全アプリ共通のデザイントークンと基本要素。画面固有の配置は各HTMLで定義する。 */
@font-face {
  font-family: "DIN2014Rounded";
  src: url("/fonts/din-2014-rounded.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 110%;
}

@font-face {
  font-family: "SeuratProNDB";
  src: url("/fonts/seurat-pron-db.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Apple System Colors（ライト・コントラストを上げる） */
  --ink:#000000;
  --sub:#6c6c70;
  --blue:#1e6ef4;
  --action-fill:var(--blue);
  --selection-ink:var(--blue);
  --focus-ring:var(--blue);
  --border-subtle:var(--mat-blue-gray-200,#b0bec5);
  --orange:#c55300;
  --yellow:#a16a00;
  --green:#008932;
  --cyan:#007eae;
  --mint:#008575;
  --red:#e9152d;
  --purple:#b02fc2;
  --teal:#008198;
  --gray:#6c6c70;
  --gray-2:#8e8e93;
  --gray-3:#aeaeb2;
  --gray-5:#d8d8dc;
  --gray-6:#ebebf0;
  --paper:#ffffff;
  --ink-secondary:#48484a;
  --spinner-track:#d8d8dc;
  --mat-red-200:#ef9a9a;
  --mat-orange-200:#ffcc80;
  --radius-control:12px;
  --radius-small:6px;
  --font-caption:13px;
  --font-small:12px;
  --shadow-card:0 2px 8px rgba(0,0,0,.05);
  --shadow-selected:0 2px 6px rgba(30,110,244,.28);
  --unread-halo:rgba(233,21,45,.18);
  --shadow-floating:0 -3px 14px rgba(0,0,0,.08);
  --media-background:var(--ink);
  --note-background:var(--mat-gray-50);
  --note-rule:var(--mat-blue-gray-100);


  /* 可視化専用のApple System Colors（ライト・標準） */
  --viz-blue:#0088ff;
  --viz-green:#34c759;
  --viz-mint:#00c8b3;
  --viz-yellow:#ffcc00;
  --viz-orange:#ff8d28;

  /* Material Colors */
  --mat-red-50:#ffebee;
  --mat-purple-50:#f3e5f5;
  --mat-indigo-50:#e8eaf6;
  --mat-blue-50:#e3f2fd;
  --mat-cyan-50:#e0f7fa;
  --mat-teal-50:#e0f2f1;
  --mat-green-50:#e8f5e9;
  --mat-yellow-50:#fffde7;
  --mat-amber-50:#fff8e1;
  --mat-deep-orange-50:#fbe9e7;
  --mat-blue-gray-50:#eceff1;
  --mat-red-100:#ffcdd2;
  --mat-purple-100:#e1bee7;
  --mat-blue-100:#bbdefb;
  --mat-cyan-100:#b2ebf2;
  --mat-teal-100:#b2dfdb;
  --mat-green-100:#c8e6c9;
  --mat-yellow-100:#fff9c4;
  --mat-amber-200:#ffe082;
  --mat-orange-50:#fff3e0;
  --mat-orange-100:#ffe0b2;
  --mat-deep-orange-100:#ffccbc;
  --mat-gray-50:#fafafa;
  --mat-gray-100:#f5f5f5;
  --mat-gray-200:#eeeeee;
  --mat-blue-gray-100:#cfd8dc;
  --mat-blue-200:#90caf9;
  --mat-cyan-200:#80deea;
  --mat-teal-200:#80cbc4;
  --mat-green-200:#a5d6a7;
  --mat-deep-orange-200:#ffab91;
  --mat-blue-gray-200:#b0bec5;
  --mat-blue-gray-800:#37474f;

  /* 子どもアプリの合言葉画面・称号・コインなどの演出専用色。操作状態には使わない。 */
  --quest-navy:#111a52;
  --quest-indigo:#23306f;
  --quest-blue:#3a4aab;
  --quest-violet:#5b4a86;
  --quest-brown:#7a4a00;
  --quest-orange-dark:#965700;
  --quest-orange:#b95500;
  --quest-gold:#ffb300;
  --quest-gold-mid:#ffc83a;
  --quest-gold-pale:#ffe08a;
  --quest-gold-text:#ffd54a;
  --quest-yellow-pale:#fff59d;

  /* 共通寸法 */
  --bg:var(--mat-indigo-50);
  --radius-card:14px;
  --radius-inset:10px;
  --radius-modal:20px;
  --modal-backdrop:rgba(0,0,0,.55);
  /* 共通ボタンガイドライン
     standalone text button:
       compact  = 64×44px以上 / 左右12px
       standard = 88×44px以上 / 左右20px
       emphasis = 116×48px以上 / 左右20px
       primary  = 高さ52px / 左右24px以上
     segment/tabは親幅を均等分割し、icon controlは正方形のタップ領域を使う。 */
  --tap-target-adult:44px;
  --tap-target-child:48px;
  --button-compact-min-width:64px;
  --button-standard-min-width:88px;
  --button-emphasis-min-width:116px;
  --button-padding-compact:12px;
  --button-padding-standard:20px;
  --button-padding-primary:24px;
  --toggle-hit-size:48px;
  --toggle-track-width:44px;
  --toggle-track-height:26px;
  --control-height:var(--tap-target-adult);
  --control-height-emphasis:var(--tap-target-child);
  --control-height-primary:52px;
  --control-height-card:60px;
  --padding-card:16px;
  --padding-list-card:6px 16px;
  --padding-inset:10px 12px;
  --padding-modal:20px;
  --input-border:var(--mat-blue-gray-200);
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }

html {
  background:var(--bg);
  min-height:calc(100% + env(safe-area-inset-top));
  overscroll-behavior-y:contain;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body {
  font-family:"DIN2014Rounded","SeuratProNDB","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  color:var(--ink);
  background:var(--bg);
  margin:0;
  font-weight:600;
  overscroll-behavior-y:contain;
}

button {
  box-sizing:border-box;
  flex-shrink:0;
  font-family:inherit;
  touch-action:manipulation;
}

button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
}

/* Admin／Analytics共通。画面固有の列数・一覧・可視化だけ各HTMLに残す。 */
body.adult-app {
  font-size:15px;
  line-height:1.7;
}

.adult-app .wrap {
  max-width:680px;
  margin:0 auto;
  padding:calc(10px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
          calc(64px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}

.adult-app header { padding:2px; }
.adult-app header h1 {
  margin:0;
  color:var(--ink);
  font-size:20px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.2;
}

.adult-app .lock {
  margin-top:20px;
  padding:var(--padding-card);
  border:0;
  border-radius:var(--radius-card);
  background:var(--paper);
  box-shadow:var(--shadow-card);
  text-align:center;
}

@keyframes adultAppFade {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:none; }
}

.adult-app .fade-in { animation:adultAppFade .3s ease-out; }
.adult-app .lock-copy { margin:0 0 12px; color:var(--sub); font-size:14px; }
.adult-app .loading-copy { margin:0; color:var(--sub); font-size:14px; }
.adult-app .lock input {
  width:100%;
  max-width:240px;
  padding:12px;
  border:3px solid var(--input-border);
  height:47px;
  border-radius:var(--radius-inset);
  font-family:inherit;
  font-size:20px;
  letter-spacing:5px;
  text-align:center;
}
.adult-app .lock input:focus { border-color:var(--blue); outline:none; }
.adult-app .lock .err {
  min-height:18px;
  margin:8px 0;
  color:var(--red);
  font-size:13px;
  font-weight:700;
}
.adult-app .lock .err.is-info { color:var(--sub); }

.adult-app .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--control-height);
  min-height:var(--control-height);
  max-height:var(--control-height);
  min-width:var(--button-standard-min-width);
  padding:0 var(--button-padding-standard);
  overflow:hidden;
  border:0;
  border-radius:var(--radius-control);
  background:var(--blue);
  box-shadow:none;
  color:var(--paper);
  cursor:pointer;
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.adult-app .lock .btn { width:120px; min-width:120px; max-width:120px; }
.adult-app .btn.sub {
  border-color:var(--gray);
  background:var(--gray);
  color:var(--paper);
}

.adult-app .panel { display:none; margin-top:8px; }
.adult-app .tabs {
  display:grid;
  gap:1px;
  margin-bottom:16px;
  padding:4px;
  border:0;
  border-radius:16px;
  background:var(--gray);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
}
.adult-app .tab {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:var(--control-height);
  min-height:var(--control-height);
  max-height:var(--control-height);
  padding:0 6px;
  overflow:hidden;
  border:0;
  border-radius:var(--radius-control);
  background:transparent;
  box-shadow:none;
  color:var(--paper);
  cursor:pointer;
  font-size:14px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:background .15s, box-shadow .15s;
}
.adult-app .tab.active,
.adult-app .tab.on {
  border-color:var(--blue);
  background:var(--blue);
  box-shadow:var(--shadow-selected);
  color:var(--paper);
}
.adult-app .tab .tab-label { min-width:0; white-space:normal; word-break:keep-all; }

.adult-app .box,
.adult-app .card {
  margin-bottom:12px;
  padding:var(--padding-card);
  border:0;
  border-radius:var(--radius-card);
  background:var(--paper);
  box-shadow:var(--shadow-card);
}
.adult-app .box h2,
.adult-app .card h2 { margin:0 0 10px; font-size:16px; font-weight:800; }

.adult-app button:focus-visible,
.adult-app [role="button"]:focus-visible,
.adult-app [role="tab"]:focus-visible,
.adult-app a:focus-visible,
.adult-app summary:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:2px;
}

/* Analytics grade filter is the reference for dropdowns in all four apps. */
.fencer-grade-filter,
html[data-fq-app="admin"] select,
#mrAdminRoot select,
#mrChildRoot select {
  width:100%; min-width:0;
  box-sizing:border-box; font-family:inherit;
  color:var(--ink); background:var(--paper);
  border:3px solid var(--input-border); border-radius:var(--radius-inset); padding:0 10px;
}
/* Selectors share the admin input dimensions, including ID selectors. */
.fencer-grade-filter,
html[data-fq-app="admin"] select,
#mrAdminRoot select,
#mrChildRoot select {
  height:47px; min-height:47px; max-height:47px;
  font-size:16px; font-weight:400;
}

/* Shared update notice: preserve ongoing work, apply the new shell on request. */
.fq-update-notice {
  position:fixed; z-index:11000; left:12px; right:12px;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 28px);
  max-width:min(640px,90%); margin:0 auto; padding:12px 22px; box-sizing:border-box;
  display:grid; grid-template-columns:minmax(0,1fr) max-content; align-items:center; gap:12px;
  background:var(--mat-blue-gray-800); color:var(--paper);
  border:0; border-radius:var(--radius-card);
  box-shadow:0 6px 20px rgba(0,0,0,.25); font:inherit; font-size:15px; font-weight:700; line-height:1.6; overflow-wrap:anywhere;
}
.fq-update-notice span { min-width:0; }
.fq-update-notice button {
  align-self:center; white-space:nowrap; width:auto; min-width:88px; min-height:var(--tap-target-adult);
  margin:0; padding:8px 12px; border:0; border-radius:var(--radius-control);
  background:var(--paper); color:var(--mat-blue-gray-800); font:inherit; font-weight:800;
}
[data-fq-app="child"] .fq-update-notice button,
[data-fq-app="ai-note"] .fq-update-notice button { min-height:var(--tap-target-child); }
[data-fq-app="ai-note"] .fq-update-notice { bottom:calc(env(safe-area-inset-bottom, 0px) + 96px); }
.fq-update-notice button:focus-visible { outline:3px solid var(--paper); outline-offset:3px; }

/* 通常の通知ティッカー。画面を動かさず、端末のホームバーを避ける。 */
.toast {
  position:fixed; left:0; right:0; margin-inline:auto; bottom:calc(28px + env(safe-area-inset-bottom));
  transform:translateY(20px); background:var(--mat-blue-gray-800); color:var(--paper);
  padding:12px 22px; border-radius:var(--radius-control); font-weight:700; font-size:15px;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:9500;
  box-shadow:0 6px 20px rgba(0,0,0,.25); width:max-content; max-width:90%; box-sizing:border-box;
  text-align:center; overflow-wrap:anywhere; word-break:normal;
}
.toast.show { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce) { .toast { transition:none; } }