/* 読者名簿 (readers) view-specific styles. Every selector starts with
   #page-readers (SPEC: CSS の規律). */

#page-readers .readers-layout { display: flex; gap: 16px; align-items: flex-start; }

#page-readers .readers-list-card { width: 420px; flex: none; }
#page-readers .readers-list-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
#page-readers .readers-count { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
#page-readers .readers-list-empty { color: var(--text-muted); font-size: 13px; padding: 8px 0; }

#page-readers .readers-row { cursor: pointer; }
#page-readers .readers-row:hover { background: var(--tag-bg); }
#page-readers .readers-row.active { background: var(--accent-secondary); }
#page-readers .readers-row.active td { color: #fff; }

#page-readers .readers-name-cell { display: flex; align-items: center; gap: 8px; }
#page-readers .readers-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--border-color); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex: none;
}
#page-readers img.readers-avatar { object-fit: cover; }

#page-readers .readers-detail-card { flex: 1; }
#page-readers .readers-detail-empty { color: var(--text-muted); font-size: 13px; }
#page-readers .readers-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
#page-readers .readers-detail-meta { color: var(--text-muted); font-size: 13px; margin-bottom: 16px; }
#page-readers .readers-detail-form { margin-bottom: 20px; }

#page-readers .readers-label-section h4 { font-size: 13px; margin-bottom: 8px; color: var(--text-muted); }
#page-readers .readers-label-checkboxes { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
#page-readers .readers-label-checkbox-row { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }

#page-readers .label-admin-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#page-readers .label-admin-row { display: flex; align-items: center; gap: 6px; }
#page-readers #labelNameInput, #page-readers #labelColorInput {
  border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; font-family: inherit;
}
#page-readers #labelNameInput { width: 160px; }
#page-readers #labelColorInput { width: 140px; }

#page-readers .readers-scenario-section { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
#page-readers .readers-scenario-section h4 { font-size: 13px; margin-bottom: 6px; color: var(--text-muted); }
#page-readers .readers-scenario-progress { font-size: 13px; margin-bottom: 4px; }
#page-readers .readers-scenario-next { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
#page-readers .readers-scenario-pause-row { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 8px; cursor: pointer; }