/* 新人の受け入れ。style.css・flow.css・fm.css の上に重ねる（接頭辞 ob-。よいは緑、よくないは赤、場合によるは琥珀） */
.ob-intro { margin: 0 0 10px; font-size: 13.5px; color: var(--ink2); background: var(--paper); border: 1px solid var(--line); border-left: 4px solid #0d9488; border-radius: 10px; padding: 9px 12px; max-width: 64em; }
.ob-lead { margin: 0 0 10px; font-size: 13.5px; color: var(--ink2); max-width: 60em; }
.ob-score { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--ink2); }
.ob-inl { display: block; margin-top: 4px; }
.ob-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ob-fb { margin: 0; font-size: 12.5px; border-radius: 8px; padding: 6px 10px; background: var(--line2); color: var(--ink2); }
.ob-fb.good { background: #f0fdf4; color: #14532d; }
.ob-fb.bad { background: #fef2f2; color: #7f1d1d; }
.ob-fb.mid { background: #fffbeb; color: #78350f; }
.ob-fb .srcl { color: inherit; opacity: .85; }

/* 入る前の準備 */
.ob-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.ob-sel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; flex-wrap: wrap; }
.ob-sel select { font: inherit; font-size: 13.5px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; background: var(--paper); max-width: 100%; }
.ob-btns { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ob-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; align-items: start; }
.ob-side { padding: 12px 14px; }
.ob-side h3 { margin: 0 0 6px; font-size: 14.5px; }
.ob-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ob-task { border: 1px solid var(--line2); border-radius: 10px; padding: 7px 9px; background: var(--paper); }
.ob-task.on { border-color: #86efac; background: #f7fdf9; }
.ob-task.late { background: #fbfbfd; }
.ob-task label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.ob-task input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: #0d9488; cursor: pointer; }
.ob-task input[disabled] { cursor: not-allowed; }
.ob-task.late label { cursor: default; }
.ob-tbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ob-tbody b { font-size: 13.5px; }
.ob-meta { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11.5px; color: var(--muted); }
.ob-dl { font-weight: 700; color: #0b4f49; background: #e2f6f3; border-radius: 6px; padding: 0 7px; }
.ob-dl.ng { color: #991b1b; background: #fee2e2; }
.ob-detail { margin: 4px 0 0 26px; font-size: 12px; color: var(--ink2); }
.ob-detail:empty { display: none; }
.ob-what { display: block; }
.ob-tip { margin-top: 3px; }
.ob-detail .fm-go { margin: 3px 0 0; font-size: 12px; }
.ob-day1 { margin-top: 10px; padding: 12px 14px; }
.ob-day1 h3 { margin: 0 0 8px; font-size: 15px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ob-big { font: 700 22px var(--latin); color: #1d4ed8; }
.ob-acts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px 12px; }
.ob-acts li { font-size: 13px; border-radius: 8px; padding: 6px 9px; display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; }
.ob-acts li.good { background: #f0fdf4; color: #14532d; }
.ob-acts li.bad { background: #fef2f2; color: #7f1d1d; }
.ob-acts li small { flex-basis: 100%; font-size: 11.5px; padding-left: 18px; }
.ob-legal { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; border-radius: 8px; padding: 6px 10px; }
.ob-legal.good { background: #f0fdf4; color: #14532d; }
.ob-legal.bad { background: #fef2f2; color: #7f1d1d; }
.ob-legal.mid { background: #fffbeb; color: #78350f; font-weight: 500; }

/* 2 週間を組む */
.ob-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ob-items { display: grid; gap: 6px; min-width: 0; }
.ob-item { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.ob-item.wait { border-style: dashed; }
.ob-item > p { margin: 0 0 6px; font-size: 13px; font-weight: 700; display: flex; gap: 7px; align-items: baseline; }
.ob-item > p i, .ob-q i { font-style: normal; flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 11px var(--latin); background: #e2e8f0; color: #334155; }
.ob-bopts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.ob-bopt { appearance: none; font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.3; cursor: pointer; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 5px 4px; color: var(--ink2); text-align: center; }
.ob-bopt:hover { border-color: #94a3b8; color: var(--ink); }
.ob-bopt[aria-pressed="true"] { background: #0f172a; border-color: #0f172a; color: #fff; }
.ob-bopt.no[aria-pressed="true"] { background: #475569; border-color: #475569; }
.ob-side2 { position: sticky; top: 12px; min-width: 0; }
.ob-board { padding: 12px 14px; }
.ob-board h3 { margin: 0 0 8px; font-size: 14px; }
.ob-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.ob-col { border: 1px solid var(--line2); border-radius: 10px; padding: 7px 9px; background: #f8fafc; min-width: 0; }
.ob-col.no { background: #f1f5f9; }
.ob-col.over { border-color: #fca5a5; background: #fef2f2; }
.ob-col h4 { margin: 0 0 4px; font-size: 12.5px; display: flex; flex-direction: column; }
.ob-col h4 small { font-size: 11px; font-weight: 500; color: var(--muted); }
.ob-col ul { margin: 0; padding-left: 1.1em; font-size: 12px; color: var(--ink2); display: grid; gap: 2px; }
.ob-empty { margin: 0; font-size: 12px; color: var(--muted); }
.ob-wait { margin: 6px 0 0; font-size: 12px; color: #78350f; }
.ob-planbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ob-rules { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.ob-rules li { border-radius: 8px; padding: 5px 9px; background: var(--line2); color: var(--ink2); }
.ob-rules li b { display: block; font-size: 12.5px; }
.ob-rules li.good { background: #f0fdf4; color: #14532d; }
.ob-rules li.bad { background: #fef2f2; color: #7f1d1d; }
.ob-rules li.wait { background: #f8fafc; color: var(--muted); }
.ob-rules .srcl { color: inherit; opacity: .85; margin: 3px 0 0; }
.ob-rules .fm-go { margin: 3px 0 0; font-size: 12px; }

/* 最初の仕事・権限・片付けの練習 */
.ob-road th a { color: #1d4ed8; text-underline-offset: 2px; }
.ob-quiz, .ob-perms, .ob-offs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ob-qz, .ob-perm, .ob-off { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ob-qz.good, .ob-perm.good, .ob-off.good { border-color: #86efac; }
.ob-qz.bad, .ob-perm.bad, .ob-off.bad { border-color: #fca5a5; }
.ob-q { margin: 0; font-size: 13.5px; color: var(--ink); display: flex; gap: 7px; align-items: baseline; }
.ob-permsum { margin-top: 10px; padding: 12px 14px; }
.ob-permsum h3 { margin: 0 0 4px; font-size: 14px; }
.ob-sumline { margin: 3px 0 0; font-size: 13px; color: var(--ink2); }
.ob-sumline b { font-family: var(--latin); }
.ob-sumline.bad { color: #7f1d1d; }
.ob-sumline.mid { color: #78350f; }
.ob-offdl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; font-size: 13px; }
.ob-offdl dt { font-size: 11.5px; font-weight: 700; color: var(--muted); padding-top: 1px; }
.ob-offdl dd { margin: 0; color: var(--ink2); }
.ob-roles th, .ob-roles td { font-size: 12.5px; }

.ob-task input:focus-visible, .ob-sel select:focus-visible, .ob-bopt:focus-visible, .ob-road th a:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
@media (max-width: 1100px) {
  .ob-plan { grid-template-columns: minmax(0, 1fr); }
  .ob-side2 { position: static; }
  .ob-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ob-sides, .ob-acts, .ob-quiz, .ob-perms, .ob-offs { grid-template-columns: minmax(0, 1fr); }
  .ob-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob-bopts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ob-detail { margin-left: 0; }
}