/* ==================================================
   usAIin — ログイン・端末登録・組織の管理画面
   style.css のトークンだけを使う（新しい色を足さない）。
   組織の管理画面は app.css（.pill / .sheet / .toast / .tabs）と一緒に読む。
   ================================================== */

/* ---------- 入力欄 ---------- */
.field { display: block; margin-bottom: 14px; }
.field-label {
  display: block;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  margin-bottom: 6px;
}
.field-input,
.field select {
  width: 100%;
  font-family: inherit; font-size: 16px;   /* 16px 未満だと iPhone が入力時に拡大する */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
}
.field-input:focus,
.field select:focus { outline: 2px solid var(--accent-border); border-color: var(--accent); }
.field-input[readonly] { background: var(--bg-2); color: var(--ink-3); }
.field-hint { font-size: 13px; color: var(--ink-3); line-height: 1.6; margin-top: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } }

.form-err {
  font-size: 13px; color: var(--color-red); line-height: 1.6;
  margin: -4px 0 12px;
}
.form-err:empty { display: none; }

.btn-block { width: 100%; }

/* 同意のチェック */
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 4px 0 14px; }
.agree input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: 0 0 auto; }

/* 個人の利用の申し込み（/apply/）: 立場を 2×2 で選ぶ */
.role-field { border: 0; padding: 0; min-width: 0; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-opt {
  display: flex; align-items: center; gap: 8px; min-height: 46px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); font-size: 13.5px; color: var(--ink-2); line-height: 1.4; cursor: pointer;
}
.role-opt input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; margin: 0; }
.role-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dk); font-weight: 700; }
.apply-note {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.75;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 10px 12px; margin: 4px 0 14px;
}
.apply-note p + p { margin-top: 6px; }
/* 機械の送信を見分ける欄。画面の外へ出す（display:none だと埋めてくる機械もある） */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- ログイン・端末登録（1 枚のカード） ---------- */
.auth {
  max-width: 420px;
  margin: 0 auto;
  padding: calc(40px + env(safe-area-inset-top)) 18px 48px;
  min-height: 100vh;
}
.auth .logo { display: block; text-align: center; font-size: 22px; margin-bottom: 22px; text-decoration: none; }
.auth .panel { padding: 26px 22px; }
.auth-title { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.auth-sub { font-size: 14px; color: var(--ink-2); line-height: 1.7; margin-bottom: 18px; }
.auth-or {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 700; color: var(--ink-2);
  margin: 20px 0;
}
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-note { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; margin-top: 16px; }
/* メールのログインのリンク（ログイン画面） */
.auth-magic { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.auth-sent { color: var(--notice-ink); background: var(--notice-bg); border: 1px solid var(--notice-border);
  border-radius: var(--radius-sm); padding: 8px 10px; }
.auth-foot { text-align: center; font-size: 12.5px; color: var(--ink-3); margin-top: 22px; }
.auth-foot a { color: var(--ink-3); }
.auth-who {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px; margin-bottom: 18px;
}
.auth-who-org { font-size: 13px; color: var(--ink-3); }
.auth-who-name { font-size: 16px; font-weight: 700; margin-top: 2px; }
.auth-who-mail { font-size: 13px; color: var(--ink-3); margin-top: 2px; word-break: break-all; }
.auth-steps { margin: 4px 0 18px; padding-left: 20px; font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.auth [hidden] { display: none !important; }

/* ---------- ログインの方法（パスキー・認証アプリ・予備コード。mfa.js） ---------- */
.mfa .btn + .mfa-note { margin-top: 6px; }
.mfa-note { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; margin: 0 0 4px; }
.mfa .form-err { margin-top: 12px; }
.mfa-back { margin-top: 10px; }
.mfa-secret {
  font-family: var(--font-code); font-size: 15px; letter-spacing: .06em; color: var(--ink);
  background: var(--bg-2); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 16px;
  text-align: center; word-break: keep-all; overflow-wrap: break-word; user-select: all;
}
.field-input.mfa-code { font-family: var(--font-code); font-size: 22px; letter-spacing: .2em; text-align: center; }
.mfa-codes {
  list-style: none; margin: 0 0 14px; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px;
  font-family: var(--font-code); font-size: 15px; color: var(--ink); background: var(--bg-2); border-radius: var(--radius-md);
  user-select: all;
}
.mfa-codes li { text-align: center; }
.mfa-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.mfa-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin: 0 0 12px; }
.mfa-reauth {
  color: var(--notice-ink); background: var(--notice-bg); border: 1px solid var(--notice-border);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 12px; font-size: 13.5px; line-height: 1.7;
}
.mfa-reauth p { margin: 0 0 8px; }
.btn.is-disabled { opacity: .5; pointer-events: none; }

/* ---------- 組織の管理画面 ---------- */
.org-head { margin: 4px 0 14px; }
.org-name { font-size: 18px; font-weight: 800; }
.org-role { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

.sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.sec-head .panel-title { margin-bottom: 0; }
.sec-head .btn { height: 38px; padding: 0 16px; font-size: 13px; }

/* 追加の欄（案 1・2026-10-22）: 白いカードに基本の項目だけを並べ、任意の項目は「＋ くわしく入れる」で開く。
   児童・スタッフ・教室の追加で同じ形にする（水色の点線の箱はやめた） */
.sub-card {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 18px;
  padding: 18px 20px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.sub-card[hidden] { display: none; }
.sub-card-title { margin: 0 0 12px; font-size: 15px; font-weight: 900; color: var(--ink); }
/* 項目名の横の「任意」などの添え書き（項目名より軽く・小さすぎない） */
.sub-card .opt, .sheet-box .opt { margin-left: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
/* 「＋ くわしく入れる」 */
.add-more {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px; padding: 6px 0; text-align: left;
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--accent-dk);
}
.add-more:hover { text-decoration: underline; }
.add-more[aria-expanded="true"] { margin-bottom: 10px; }
.add-extra { padding-top: 14px; border-top: 1px solid var(--line-2); }
.add-extra[hidden] { display: none; }
.sub-card .sheet-btns { margin-top: 8px; justify-content: flex-end; }
/* ボタンは右にそろえ、幅いっぱいに伸ばさない（入りきらなければボタンごと折り返す） */
.sub-card .sheet-btns .btn { flex: 0 0 auto; min-width: fit-content; white-space: nowrap; padding: 0 20px; }
@media (max-width: 420px) { .sub-card { padding: 16px 14px 14px; } .sub-card .sheet-btns .btn { flex: 1 1 auto; } }
/* ボタンの文言が長くても、カードの外へはみ出さず折り返す */
.sub-card .btn, .sheet-box .btn { white-space: normal; min-width: 0; }

/* スタッフの一覧。行全体を押すと詳細へ */
.mem-list { display: flex; flex-direction: column; }
.mem-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  font-family: inherit; color: inherit;
  background: none; border: 0; border-bottom: 1px solid var(--line-2);
  padding: 12px 2px; cursor: pointer;
}
.mem-row:last-child { border-bottom: 0; }
.mem-row:hover { background: var(--bg); }
.mem-row.is-off { opacity: .55; }
.mem-avatar {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-dk);
  border: 1px solid var(--accent-border);
  font-weight: 800; font-size: 15px;
}
.mem-main { flex: 1; min-width: 0; }
.mem-name {
  font-size: 14.5px; font-weight: 700;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.mem-meta { font-size: 13px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; }
.mem-go { flex: 0 0 auto; color: var(--ink-4); font-size: 18px; }

/* スタッフの詳細 */
/* 戻るリンク（閲覧・スタッフの詳細・型）。小さく薄くしない（2026-10-22 のご指示「ちゃんと見えるように」）: 枠つきの札で 15px の濃い字 */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  font-size: 15px; font-weight: 700; color: var(--ink-2); text-decoration: none;
  margin: 2px 0 12px;
}
.back-link:hover { color: var(--accent-dk); border-color: var(--accent-border); background: var(--accent-soft); }
.back-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mem-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.mem-detail-head .mem-avatar { flex-basis: 52px; width: 52px; height: 52px; font-size: 20px; }
.mem-detail-head .mem-name { font-size: 18px; }
.mem-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mem-acts .btn { height: 38px; padding: 0 16px; font-size: 13px; }
.btn-danger { background: transparent; color: var(--color-red); border-color: var(--line); }
.btn-danger:hover:not(:disabled) { background: var(--paper); border-color: var(--color-red); }

/* 端末 */
.dev-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line-2);
}
.dev-row:last-child { border-bottom: 0; }
.dev-main { flex: 1; min-width: 0; }
.dev-name { font-size: 14px; font-weight: 700; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dev-meta { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.dev-row .btn { height: 34px; padding: 0 14px; font-size: 12.5px; flex: 0 0 auto; }

/* 教室 */
.room-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line-2);
}
.room-row:last-child { border-bottom: 0; }
.room-row.is-off { opacity: .55; }
.room-main { flex: 1; min-width: 0; }
.room-name { font-size: 14px; font-weight: 700; }
.room-meta { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.room-row .btn { height: 34px; padding: 0 14px; font-size: 12.5px; flex: 0 0 auto; }

/* 端末登録のリンク（QR） */
.qr-box { text-align: center; margin: 4px 0 14px; }
.qr-box canvas {
  width: 200px; height: 200px; image-rendering: pixelated;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--paper); padding: 8px;
}
.qr-url {
  font-family: var(--font-code); font-size: 11.5px; color: var(--ink-3);
  word-break: break-all; background: var(--bg-2);
  border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 12px;
}
.sheet-box .auth-steps { margin-bottom: 14px; }

.org-empty { text-align: center; color: var(--ink-2); font-size: 14px; padding: 24px 8px; }

/* 組織の画面のタブは 5 つ。狭い画面でも 1 行に収める */
.tabs-5 .tab { font-size: 12px; padding: 9px 2px; letter-spacing: 0; }
/* 幅を中身に合わせて配る（等分だと 320px で「下書きの型」だけが 2 行に折れる） */
.tabs-5 .tab { flex: 1 1 auto; white-space: nowrap; }
@media (max-width: 380px) { .tabs-5 .tab { font-size: 11px; } }

/* 管理者のタブは 7 つ（ホーム・スタッフ・児童・下書きの型・教室・記録・自分）。1 行では 320px に収まらないので 4 列の 2 段にする */

/* ---------- 事業者のホーム ---------- */
.home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 2px; }
.home-stat { background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 10px 9px; min-width: 0; }
.home-stat-label { font-size: 12.5px; color: var(--ink-3); }
.home-stat-value { font-size: 22px; font-weight: 900; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.home-stat-value small { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-left: 1px; }
@media (max-width: 380px) { .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.home-list { list-style: none; margin: 0; padding: 0; }
.home-list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; line-height: 1.6; }
.home-list li:last-child { border-bottom: 0; }
.home-list a { color: var(--ink); text-decoration: none; }
.home-list a:hover { color: var(--accent-dk); text-decoration: underline; }
.home-list .home-sub { display: block; font-size: 13px; color: var(--ink-3); }
.home-list .home-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.home-list .home-end { flex: 0 0 auto; font-size: 13px; color: var(--ink-3); text-align: right; white-space: nowrap; }
.home-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; background: var(--color-orange); }
.home-dot.is-ng { background: var(--color-red); }

.home-check { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: var(--paper); margin-top: 1px; }
.home-check.is-done { background: var(--color-green); border-color: var(--color-green); }
.home-progress { font-size: 12.5px; color: var(--ink-3); font-weight: 700; }

.home-bars { display: flex; align-items: flex-end; gap: 2px; height: 72px; margin-top: 6px; }
.home-bars i { flex: 1 1 0; min-width: 2px; min-height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }
.home-bars i.is-zero { background: var(--line); }
.home-bars-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }

/* 操作の記録 */
.act-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.act-filter select.field-input { width: auto; min-width: 9em; max-width: 100%; height: 42px; padding-top: 0; padding-bottom: 0; }
.act-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.act-chip { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.act-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.act-time { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }

/* 下書きの型 */
.tpl-card {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px; margin-bottom: 10px;
}
.tpl-card.is-off { opacity: .55; }
.tpl-name { font-size: 15px; font-weight: 800; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tpl-meta { font-size: 14px; color: var(--ink-2); margin-top: 6px; line-height: 1.6; }
.tpl-card .mem-acts { margin-top: 10px; }
textarea.field-input { resize: vertical; line-height: 1.7; font-size: 15px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin: 6px 0 12px; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: 0 0 auto; }
.how {
  font-size: 13.5px; line-height: 1.8; color: var(--notice-ink);
  background: var(--notice-bg); border: 1px solid var(--notice-border);
  border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 14px;
}

/* ---------- HUG との連携（組織 › 教室） ---------- */
.hug-tpl { font-family: var(--font-code); font-size: 13px; overflow-wrap: anywhere; word-break: break-all; }
.sheet-box .hug-help { font-size: 13px; color: var(--ink-2); line-height: 1.75; margin-bottom: 12px; }
.field-input.hug-input { font-family: var(--font-code); font-size: 16px; line-height: 1.5; word-break: break-all; resize: vertical; }
.hug-keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.hug-key {
  display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%;
  padding: 5px 10px; border: 1px solid var(--accent-border); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dk); font: inherit; font-size: 12px; cursor: pointer; text-align: left;
}
.hug-key:hover { border-color: var(--accent); }
.hug-key code { font-family: var(--font-code); font-size: 12px; font-weight: 700; }
.hug-key span { color: var(--ink-3); font-size: 12px; }
.hug-preview { min-height: 2.5em; }
.hug-note, .sheet-box .hug-note { font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.hug-url {
  display: block; margin-top: 6px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--bg-2); font-family: var(--font-code); font-size: 12px; color: var(--ink-2);
  overflow-wrap: anywhere; word-break: break-all;
}
/* .sheet-box p（app.css）より強く書く */
.sheet-box .hug-preview p { margin-bottom: 0; }
.sheet-box .hug-err { font-size: 13px; color: var(--color-red); line-height: 1.6; }
.sheet-box .hug-warn { font-size: 13px; color: var(--notice-ink); background: var(--notice-bg); border: 1px solid var(--notice-border);
  border-radius: var(--radius-sm); padding: 6px 10px; margin-top: 8px; line-height: 1.6; }
.setting .btn-sm { flex: 0 0 auto; }
.room-link { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--line); }
.room-link:hover { color: var(--accent-dk); border-color: var(--accent); }

/* スタッフの追加: 端末登録のリンクをメールでも送る */
.check-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin: 0 0 12px; }
.check-line input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
/* 端末登録のリンクのシート: メールで送った結果 */
.invite-mail { font-size: 13px; line-height: 1.6; border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; }
.invite-mail.is-ok { background: var(--notice-bg); border: 1px solid var(--notice-border); color: var(--notice-ink); }
.invite-mail.is-ng { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); }

/* 名簿: 見出しの右に並ぶボタン（狭い画面では折り返す） */
.sec-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
/* HUG の児童 ID のまとめ入力 */
.hug-bulk { max-height: 52vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 4px; }
.hug-bulk-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 11em); align-items: center; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid var(--line-2); }
.hug-bulk-row:last-child { border-bottom: 0; }
.hug-bulk-row.is-off { background: var(--bg); }
.hug-bulk-name { font-size: 14px; font-weight: 700; color: var(--ink); min-width: 0; }
.hug-bulk-name small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.hug-bulk-row .field-input { height: 38px; font-size: 14px; }
@media (max-width: 360px) { .hug-bulk-row { grid-template-columns: 1fr; gap: 4px; } }
/* 組織の登録の承認（運営） */
.review-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 4px 0 16px; font-size: 14px; }
.review-list dt { color: var(--ink-3); }
.review-list dd { margin: 0; color: var(--ink); font-weight: 700; overflow-wrap: break-word; min-width: 0; }
.review-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.review-btns .btn { flex: 1 1 auto; min-width: fit-content; }

/* 今月の AI の利用（組織の管理者） */
.usage-bar { height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; margin: 6px 0 10px; }
.usage-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.usage-bar.is-high i { background: var(--color-orange); }
.usage-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-3); padding: 4px 0; border-bottom: 1px solid var(--line-2); }
.usage-row:last-of-type { border-bottom: 0; }
.usage-row b { color: var(--ink); font-weight: 700; text-align: right; }
.usage-row small { font-weight: 400; color: var(--ink-3); }
.usage-warn { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--notice-ink); background: var(--notice-bg);
  border: 1px solid var(--notice-border); border-radius: 10px; padding: 8px 12px; }
/* 運営が今月だけ足したとき、棒は「今月の上限」までの 1 本にして、100% の所に細い印を付ける（org.js の usagePanel） */
.usage-bar { position: relative; }
.usage-mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink-3); }
/* 1 人あたりの上限（同じ 1 枚の中の小見出し・2 つの % の欄・人ごとの表） */
.usage-sub { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.usage-sub > .panel-title { font-size: 15px; margin-bottom: 10px; }
.eff-base.usage-limits .field { flex: 1 1 120px; max-width: 180px; }
.usage-staff td:first-child { white-space: normal; overflow-wrap: anywhere; }
.usage-staff td .pill { vertical-align: 1px; }
@media (max-width: 380px) {
  .review-list { grid-template-columns: 1fr; gap: 0; }
  .review-list dt { margin-top: 8px; font-size: 12px; }
}

/* 下書きの型: 叩き台・形式（2026-10-15） */
.tpl-starters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.tpl-formats { display: grid; gap: 6px; }
.tpl-formats .check { margin-bottom: 0; }
/* 名簿: 個別支援計画の目標 */
.goals-field .field-input + .field-input { margin-top: 6px; }
/* 効果測定（ホーム → 月ごとの表） */
.eff-base { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 6px 0 12px; }
.eff-base .field { flex: 0 1 260px; margin-bottom: 0; }
.eff-table-wrap { overflow-x: auto; }
/* 効果測定の画面だけ、広い画面では表が収まる幅にする（org.js が .app に is-wide を付ける） */
@media (min-width: 900px) { .app.is-wide { max-width: 980px; } }
.eff-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.eff-table th, .eff-table td { padding: 8px 6px; border-bottom: 1px solid var(--line-2); text-align: right; white-space: nowrap; }
.eff-table th:first-child, .eff-table td:first-child { text-align: left; }
.eff-table th { font-size: 12px; color: var(--ink-3); font-weight: 700; line-height: 1.45; vertical-align: bottom; }
.eff-table td small { display: block; font-size: 11.5px; color: var(--ink-3); }
/* 効果測定のグラフ（effexport.js）。広い画面は 2 つ並べ、狭い画面は縦に積む。数字は触れると出す */
.eff-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 16px; }
@media (max-width: 700px) { .eff-charts { grid-template-columns: minmax(0, 1fr); } }
.eff-chart { position: relative; margin: 0; padding: 12px 12px 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); min-width: 0; }
.eff-chart figcaption { display: grid; gap: 2px; margin-bottom: 6px; }
.eff-chart-t { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.eff-chart-s { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.eff-chart-plot { width: 100%; }
.eff-chart-plot svg { display: block; }
.eff-hit { cursor: default; outline: none; }
.eff-hit:focus-visible { outline: 2px solid var(--accent); }
.eff-tip { position: absolute; z-index: 2; pointer-events: none; max-width: 160px; padding: 6px 8px; border-radius: var(--radius-sm);
  background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.45; box-shadow: var(--shadow-sm); }
.eff-out { flex-wrap: wrap; }
.eff-chart-wide { grid-column: 1 / -1; }
.eff-staff { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 8px; }
.eff-staff li { display: grid; grid-template-columns: minmax(5em, 9em) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.eff-staff-n { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eff-staff-bar { height: 12px; background: var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
.eff-staff-bar i { display: block; height: 100%; background: var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.eff-staff-v { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.watch { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 10px; }
.watch-time { font-family: var(--font-code); font-size: 32px; font-weight: 700; color: var(--ink); min-width: 4.5ch; }
.watch-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- データ（書き出し・保存期間・利用終了） ---------- */
.data-form { margin: 4px 0 6px; }
.data-range { display: flex; gap: 10px; flex-wrap: wrap; }
.data-range .field { flex: 1 1 180px; }
#expEst.is-ng { color: var(--color-red); }
/* データ・ログ: データの下に、操作の記録を折りたたんで出す（2026-10-22）。見出しの行を押すと開け閉めする */
.data-log { padding-top: 20px; padding-bottom: 20px; }
.data-log > summary { list-style: none; cursor: pointer; margin: 0; user-select: none; }
.data-log > summary::-webkit-details-marker { display: none; }
.data-log > summary::after {
  content: ''; flex: 0 0 auto; width: 9px; height: 9px; margin-left: 2px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translateY(-3px); transition: transform .18s ease;
}
.data-log[open] > summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.data-log-hint { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.data-log > summary:hover .data-log-hint { color: var(--ink-2); }
.data-log > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }
.data-log-body { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 480px) { .data-log-hint { display: none; } .data-log > summary::after { margin-left: auto; } }
.data-now { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; margin: 0 0 10px; }
.data-warn { font-size: 13.5px; color: var(--ink); line-height: 1.7; margin: 0 0 12px; padding: 10px 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius-md); }
.data-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.data-item { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.data-item-main { min-width: 0; flex: 1 1 260px; }
.data-item-title { font-size: 13.5px; font-weight: 700; color: var(--ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.data-item-meta { font-size: 13px; color: var(--ink-3); line-height: 1.6; margin-top: 2px; }
.data-item-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.data-ul { margin: 6px 0 12px 1.2em; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }
.sample-acts { margin: -4px 0 14px; }

/* ==================================================
   入口の画面（ログイン・新規事業者登録・個人の申し込み）。hAIchi.shop の /account と同じ形（2026-10-20）
   広い画面: 左に大きなうさぎと一言、右に広めのカード。狭い画面: カードだけ（うさぎは下の島に座る）。
   カードの上に「事業所・法人の方／個人の方」のタブ。選んだ方の真下だけ、カードの上辺に短い青い線（--i）。
   ================================================== */
.entry {
  max-width: 1180px; margin: 0 auto;
  padding: calc(28px + env(safe-area-inset-top)) 16px calc(170px + env(safe-area-inset-bottom));
}
.entry-side { display: none; }
.entry-wrap { --i: 0; max-width: 520px; margin: 0 auto; }

/* どちらの方か（文字だけのタブ。選んだ方は青い文字） */
.entry-aud { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 14px; }
.entry-tab {
  display: block; padding: 10px 4px 9px; text-align: center; text-decoration: none;
  font-size: 15px; font-weight: 800; color: var(--ink-3); border-radius: 14px 14px 0 0;
  transition: color .2s;
}
.entry-tab:hover { color: var(--ink-2); }
.entry-tab[aria-current="true"] { color: var(--accent-dk); }
.entry-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* タブの下の版の名前（Work／Note・前提 41） */
.entry-tab-sub { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }

.entry-card {
  position: relative;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 26px 26px 24px;
}
.entry-card::before {
  content: ''; position: absolute; top: -2px; height: 3px; border-radius: 3px; background: var(--accent);
  --col: calc((100% - 28px - 12px) / 2);
  width: calc(var(--col) * .6);
  left: calc(14px + var(--col) * .2 + var(--i) * (var(--col) + 12px));
}
/* 中身の段（登録のフォーム・送ったあと・受付停止など）。カードの中なので枠は付けない */
.entry-pane[hidden] { display: none; }
.entry .auth-sub { margin-bottom: 18px; }
.entry-mh-sub { font-size: 19px; margin-bottom: 8px; }

/* 見出しと、ログイン／新規登録を行き来するボタン（hAIchi の案 3） */
.entry-mt { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: -2px 0 8px; }
.entry-mh { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.3; color: var(--ink); }
.entry-mx {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap;
  border: 1.5px solid var(--accent-border); background: var(--paper); border-radius: 999px;
  padding: 6px 8px 6px 14px; font-size: 13.5px; font-weight: 800; line-height: 1.3; color: var(--accent-dk);
  transition: border-color .2s, background .2s;
}
.entry-mx small { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.entry-mx .a {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--paper);
  display: grid; place-items: center; transition: transform .2s;
}
.entry-mx .a svg { width: 13px; height: 13px; }
.entry-mx:hover { border-color: var(--accent); background: var(--accent-soft); }
.entry-mx:hover .a { transform: translateX(2px); }
.entry-mx:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ログインの途中（リンクの確認・2 段目）は、行き来のタブを出さない */
.entry-wrap:has(#first[hidden]) .entry-aud { visibility: hidden; }
.entry-wrap:has(#first[hidden]) .entry-card::before { display: none; }

.entry-foot { text-align: center; font-size: 12.5px; color: var(--ink-3); margin-top: 20px; }
.entry-foot a { color: var(--ink-3); }

/* 島の右は「TOPに戻る」 */
.entry-body .isl-cta { gap: 0; }

@media (min-width: 961px) {
  .entry {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: 56px; align-items: start;
    padding: 64px 32px calc(130px + env(safe-area-inset-bottom));
  }
  .entry-wrap { max-width: none; margin: 0; }
  .entry-card { padding: 30px 34px 28px; }
  /* 左: 一言を、下の島から覗くうさぎの吹き出しにする（2026-10-20 のご指示・案 2。添え書きは付けない） */
  /* 吹き出しはうさぎの頭のすぐ上に（島の上端 − うさぎの高さ − 吹き出しの高さ）。背が低い画面でも上に潜らせない */
  .entry-side { display: grid; justify-items: center; position: sticky; top: max(40px, calc(100vh - 84px - 440px - 170px)); container-type: inline-size; }
  .entry-side-title {
    position: relative; margin: 0; text-align: center;
    padding: 26px 30px; border-radius: 30px;
    background: var(--paper); border: 2px solid var(--accent-border); box-shadow: var(--shadow);
    /* 1 行ずつ折らずに出す（.ln）。左の列の幅（100cqi）に 2 行目（約 11 字）が収まる大きさ（2026-10-22 のご指示で大きく） */
    font-size: clamp(24px, calc((100cqi - 64px) / 11.4), 42px); font-weight: 900; line-height: 1.45; letter-spacing: -.01em;
    color: var(--accent);
  }
  /* 吹き出しのしっぽ（下のうさぎへ向ける） */
  .entry-side-title::after {
    content: ''; position: absolute; left: 50%; bottom: -15px; width: 26px; height: 26px;
    background: var(--paper); border-right: 2px solid var(--accent-border); border-bottom: 2px solid var(--accent-border);
    border-bottom-right-radius: 4px; transform: translateX(-50%) rotate(45deg);
  }
  .entry-body .isl-logo { order: -2; }
  .entry-body .isl-pocket { order: -1; --pw: 380px; }
  .entry-body .isl .seat { --w: 400px; --rb-grip: 23px; }
}
/* 広い画面は外枠を少し広げ、左の吹き出しの字を大きく出せるようにする */
@media (min-width: 1320px) { .entry { max-width: 1300px; } }
/* 左の列が狭い幅・背の低い画面は、うさぎを少し小さく（カードと一言に重ならない） */
@media (min-width: 961px) and (max-width: 1180px) {
  .entry-body .isl-pocket { --pw: 250px; }
  .entry-body .isl .seat { --w: 240px; --rb-grip: 14px; }
  .entry-side { top: max(40px, calc(100vh - 84px - 260px - 170px)); }
  /* 左の列が狭いので、1 行の中でも折ってよい（文の切れ目で） */
  .entry-side-title { font-size: clamp(18px, calc((100cqi - 48px) / 9.5), 24px); padding: 20px 22px; word-break: auto-phrase; }
  .entry-side-title .ln { white-space: normal; }
}
@media (min-width: 1181px) and (max-height: 820px) {
  .entry-body .isl .seat { --w: 320px; --rb-grip: 19px; }
  .entry-side { top: max(40px, calc(100vh - 84px - 350px - 170px)); }
}

@media (max-width: 560px) {
  .entry-card { padding: 22px 18px 20px; border-radius: 16px; }
  .entry-mh { font-size: 19px; }
  .entry-mx small { display: none; }
  .entry-mx { padding: 5px 6px 5px 12px; gap: 6px; }
  .entry-tab { font-size: 13.5px; }
}
@media (max-width: 360px) {
  .entry-mh { font-size: 17px; }
  .entry-mx { font-size: 12.5px; }
}

/* ボット対策（Turnstile）の枠。いつも出す（2026-10-22 のご指示・turnstile.js） */
.ts-box { display: flex; justify-content: center; margin: 12px 0 4px; min-height: 65px; }
.entry-side-title .ln { display: block; white-space: nowrap; }
/* Google のボタンの G のロゴ（Google の決まりの 4 色のまま） */
.g-logo { width: 18px; height: 18px; flex: none; }
.ts-box:empty { display: none; }

/* スマホで使う（install.js）: QR・ホーム画面に追加する手順・まだ登録していないスタッフ */
.inst-ok { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink-2); }
.inst-ok span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-green); color: var(--paper); font-size: 13px; }
.inst-steps { margin: 8px 0 0; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 14px; background: var(--paper); }
.inst-steps summary { cursor: pointer; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.inst-steps ol { margin: 8px 0 2px 1.3em; line-height: 1.9; color: var(--ink-2); font-size: 14px; }
.inst-steps > .setting-d, .inst-steps > div { margin-top: 8px; }
.inst-here { font-size: 11.5px; font-weight: 700; color: var(--accent-dk); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; }
.inst-qr { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin: 10px 0 4px; }
.inst-qr-img canvas { display: block; width: 168px; height: 168px; image-rendering: pixelated; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.inst-qr-side { flex: 1 1 220px; min-width: 0; display: grid; gap: 8px; justify-items: start; }
.inst-url { width: 100%; font-size: 12px; }
.inst-h { margin: 14px 0 4px; }
.inst-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.inst-member-out { flex-basis: 100%; }
#instMembers .home-list li { flex-wrap: wrap; }

/* 事業所 › スタッフと教室のいちばん下の、組織の名前を変える行（ほとんど使わないので目立たせない・2026-10-22） */
.org-rename { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 12px 4px 0; font-size: 13px; color: var(--ink-3); }

/* うさ委員 Note の申し込み（/apply/・前提 41）: 3 つの要点と Google のボタン */
.note-points { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 10px; }
.note-points li { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.note-points b { font-size: 15px; color: var(--ink); }
.note-points span { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.note-go { gap: 10px; }
.note-go .g-logo { background: #fff; border-radius: 50%; padding: 2px; width: 22px; height: 22px; }
#seatMsg { margin: 0 0 12px; }

/* うさ委員 Note の今月の清書（アカウント・前提 41） */
.note-meter { height: 8px; margin: 10px 0 4px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.note-meter i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }