/* Jethro Justice — My Case Dates: page-specific styles.

   Loaded alongside assets/site.css (linked by shell() on every page), which already supplies
   the 720px tool shell, .field, .radiolist, .btn and .callout this page reuses. This file
   only adds what My Case Dates needs on top of that. Tap targets stay >= 40px throughout —
   see the note on Release 8's 31px <summary> in docs/releases/RELEASE_10.md. */

.dates-tool { padding-top: 8px; }

.dates-intro { font-size: 17px; color: var(--ink-soft); }
.dates-privacy { font-size: 14px; color: var(--ink-soft); margin-bottom: 28px; }

.dates-notice {
  border: 1px solid var(--gold);
  background: var(--warn-bg);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  margin: 0 0 24px;
}

.dates-scheduling, .dates-entry, .dates-views {
  margin: 0 0 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.dates-branch { margin-top: 16px; }
.dates-branch h2 { margin-top: 0; }

.dates-checklist { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.dates-checklist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  background: #fff;
}
.dates-checklist-item span { font-size: 16px; }
.dates-checklist-add {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--navy-soft);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}
.dates-checklist-add:hover { border-color: var(--navy-soft); background: var(--bg-alt); }

.dates-bucket-option { align-items: flex-start; }
.dates-bucket-hint {
  display: block;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.field-error {
  color: #8a1c1c;
  background: #fdecec;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 15px;
  margin: 0 0 16px;
}

.dates-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.dates-tab {
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--ink-soft);
  padding: 10px 8px;
  min-height: 40px;
  cursor: pointer;
}
.dates-tab[aria-pressed="true"] { color: var(--navy); border-bottom-color: var(--gold); }
.dates-tab:hover { color: var(--navy); }

.dates-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dates-entry-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.dates-entry-main { min-width: 0; }
.dates-entry-date { font-weight: 700; font-size: 16px; margin: 0 0 4px; color: var(--navy); }
.dates-entry-label { font-size: 17px; margin: 0 0 4px; overflow-wrap: break-word; }
.dates-entry-direction { font-size: 15px; color: var(--ink-soft); margin: 0 0 8px; overflow-wrap: break-word; }
.dates-entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; }
.dates-entry-bucket {
  display: inline-block;
  border: 1px solid var(--navy-soft);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--navy-soft);
  font-weight: 600;
}
.dates-entry-side { flex: 0 0 auto; }
.dates-entry-remove {
  min-height: 40px;
  min-width: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 15px;
  padding: 0 12px;
}
.dates-entry-remove:hover { border-color: #b33; color: #b33; }

.dates-group { margin: 0 0 28px; }
.dates-group:last-child { margin-bottom: 0; }
.dates-group h3 { margin: 0 0 6px; font-size: 18px; }
.dates-group-def { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; }

.dates-empty { color: var(--ink-soft); font-style: italic; padding: 12px 0; margin: 0; }

.dates-export { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 480px) {
  .dates-checklist-item { flex-direction: column; align-items: flex-start; }
  .dates-entry-row { flex-direction: column; }
  .dates-entry-side { align-self: flex-start; }
}

@media print {
  .dates-entry-row, .dates-group { break-inside: avoid; page-break-inside: avoid; }
}

/* The explainer links are standalone navigation, not links inside a sentence, so they
   carry the site's 40px minimum like every other control. Measured at 375x812 before
   this rule: 20px in the scheduling-order branch and 23px in .dates-entry-meta.
   Batch A11 raised the header and footer nav anchors the same way, with padding rather
   than a font-size change — 17px body text is a standing constraint here. */
.dates-explainer-link {
  display: inline-block;
  min-height: 40px;
  padding: 10px 0;
  line-height: 20px;
}