.reader-basics {
  margin: 0 0 26px;
  padding: 16px;
  border: 1px solid var(--rich-line, #dce4ec);
  border-radius: 9px;
  background: #f6f9fc;
}
.reader-basics h3 { margin: 0 0 12px; font-size: 16px; }
.reader-basic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.reader-basic-fact {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  min-height: 64px;
  padding: 8px 9px 8px 36px;
  border: 1px solid #dce4ec;
  border-radius: 6px;
  background: #fff;
  line-height: 1.5;
}
.reader-basic-fact dt > svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: #355679; }
.reader-basic-fact dt { font-size: 12px; color: #4c5d70; }
.reader-basic-fact dd { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: #263e55; }

.reader-candidates [hidden] { display: none !important; }
.reader-candidate-intro { margin: 0 0 14px; }
.reader-candidate-map { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; }
.reader-candidate-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px 18px;
  padding: 15px;
  border: 1px solid #dce4ec;
  border-radius: 8px;
  background: #f6f9fc;
}
.reader-candidate-filters label,
.reader-candidate-filters legend { color: #314b64; font-size: 13px; font-weight: 700; }
.reader-candidate-filters label { display: grid; gap: 4px; }
.reader-candidate-filters select,
.reader-candidate-buttons button {
  min-height: 44px;
  color: #314b64;
  background: #fff;
  border: 1px solid #bfcddd;
  border-radius: 5px;
  padding: 5px 9px;
  font: inherit;
  font-size: 13px;
}
.reader-candidate-filters select { width: 100%; }
.reader-candidate-filters fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }
.reader-candidate-filters legend { padding: 0 0 4px; }
.reader-candidate-buttons { display: flex; gap: 5px; }
.reader-candidate-buttons button { min-width: 44px; cursor: pointer; }
.reader-candidate-origin-control { grid-column: 1 / -1; }
.reader-candidate-origin-control button { flex: 1; }
.reader-candidate-origin-status { margin: 6px 0 0; color: #4c5d70; font-size: 12px; }
.reader-candidate-buttons button[aria-pressed="true"] { background: #355679; border-color: #355679; color: #fff; font-weight: 700; }
.reader-candidate-count { margin: 12px 0 6px; font-size: 13px; color: #4c5d70; }
.reader-candidate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.reader-candidate-card { display: grid; gap: 8px; padding: 13px; border: 1px solid #dce4ec; border-radius: 8px; background: #fff; }
.reader-candidate-card h3 { margin: 0; font-size: 16px; line-height: 1.45; }
.reader-candidate-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 10px; }
.reader-candidate-card h3 a { color: #244362; text-decoration: none; }
.reader-candidate-card h3 a:hover { color: #426e99; }
.reader-candidate-thumbnail {
  display: block;
  width: clamp(64px,22vw,88px);
  aspect-ratio: 22 / 15;
  overflow: hidden;
  border-radius: 5px;
  background: #eef3f8;
}
.reader-candidate-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reader-candidate-card h3 .icon { width: 14px; height: 14px; vertical-align: middle; }
.reader-candidate-meta, .reader-candidate-course { margin: 0 0 3px; color: #4c5d70; font-size: 12px; }
.reader-candidate-course { margin: 4px 0 0; }
.reader-candidate-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 12px; }
.reader-candidate-bottom p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: 0; font-size: 12px; color: #4c5d70; }
.reader-candidate-bottom strong { font-size: 22px; line-height: 1.25; color: #263e55; font-variant-numeric: tabular-nums; }
.reader-candidate-distance { white-space: nowrap; }
.reader-candidate-bottom .button { min-height: 44px; padding: 5px 10px; font-size: 12px; }
.reader-candidate-note, .reader-candidate-empty { font-size: 13px; color: #4c5d70; margin: 12px 0 0; }
@media (max-width: 780px) {
  .reader-basic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reader-candidate-filters { grid-template-columns: 1fr; gap: 9px; }
  .reader-candidate-grid { grid-template-columns: 1fr; }
  .reader-candidate-buttons button { flex: 1; }
}
@media (max-width: 360px) {
  .reader-basics { padding: 11px; }
  .reader-basic-fact { padding: 7px 6px 7px 28px; }
  .reader-basic-fact dt > svg { left: 6px; width: 16px; height: 16px; }
}