/* "Doctrine Over Time" (/doctrine): compare view, 2026-10-24. Shared pieces
   from guide-teach.css. Older timeline styles (doctrine.css / timeline.css)
   are still used by other pages and are not loaded here. */

.dv-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin: 0 0 12px; }
#dv-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; }
.dv-pick { display: flex; flex-direction: column; min-width: 0; }
.dv-pick .gt-select { min-width: min(340px, 100%); }
.dv-legend { margin: 0 0 18px; border: 1px solid var(--hg-border); border-radius: 12px; background: var(--hg-surface); }
.dv-legend > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 8px 14px; font-weight: 700; color: var(--hg-primary); }
.dv-legend ul { list-style: none; margin: 0; padding: 4px 14px 0; display: grid; gap: 8px; }
.dv-legend li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--hg-body); }
.dv-legend li .gt-tag { justify-self: start; }
.dv-legend p { margin: 10px 14px 12px; font-size: 15px; line-height: 1.55; color: var(--hg-body); }
@media (max-width: 560px) { .dv-legend li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

.dv-view { min-width: 0; }
.dv-q { margin: 6px 0 16px; padding: 18px 22px; background: var(--hg-surface); border: 1px solid var(--hg-border); border-left: 5px solid var(--hg-primary); border-radius: 14px; }
.dv-q-k, .dv-k { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hg-primary); }
.dv-k { color: var(--hg-faint); margin-top: 0; }
.dv-q-h { font-size: clamp(22px, 2.8vw, 30px) !important; font-weight: 800 !important; line-height: 1.25; margin: 0; }
.dv-q-h:focus { outline: none; }
.dv-q-topic, .dv-q-note { margin: 8px 0 0; font-size: 15px; color: var(--hg-muted); }
.dv-mode { margin: 0 0 14px; }
.dv-group-h { font-size: 19px !important; font-weight: 800 !important; margin: 22px 0 10px; }

/* rows: one per tradition (or per topic in tradition view) */
.dv-rows { display: grid; gap: 14px; }
.dv-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 20px; background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: 14px; box-shadow: var(--hg-shadow-sm); }
@media (min-width: 900px) {
  .dv-row { grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1.35fr); gap: 22px; }
  .dv-history { grid-column: 1 / -1; }
}
.dv-row--gap { background: var(--hg-surface-2); box-shadow: none; border-style: dashed; }
.dv-row-name h3 { font-size: 18px !important; font-weight: 800 !important; margin: 0 0 4px; line-height: 1.3; }
.dv-row-sub { margin: 0 0 6px; font-size: 13.5px; color: var(--hg-faint); }
.dv-row-origin { margin: 4px 0 8px; font-size: 14px; line-height: 1.45; color: var(--hg-muted); }
.dv-pos { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--hg-text); }
.dv-gap { margin: 0; font-size: 15px; line-height: 1.55; color: var(--hg-muted); }
.dv-gap .gt-tag { margin-right: 6px; }
.dv-more { margin-top: 10px; }
.dv-k-inline { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hg-faint); margin-right: 4px; }

/* to-scale strip */
.dv-strip { position: relative; height: 30px; margin: 8px 0 2px; }
.dv-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--hg-border-strong); border-radius: 2px; }
.dv-strip-span { position: absolute; right: 0; top: 8px; height: 4px; background: #c9d2fb; border-radius: 2px; }
.dv-strip-dot { position: absolute; top: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.dv-strip-dot--introduce { background: var(--hg-introduce); }
.dv-strip-dot--develop { background: var(--hg-develop); }
.dv-strip-dot--reaffirm { background: var(--hg-reaffirm); border-radius: 2px; }
.dv-strip-dot--drop { background: #fff; box-shadow: 0 0 0 2px var(--hg-drop); }
.dv-strip-dot--reverse { background: var(--hg-reverse); border-radius: 2px; transform: rotate(45deg); }
.dv-strip-tick { position: absolute; top: 15px; transform: translateX(-50%); font-size: 11.5px; color: var(--hg-faint); font-variant-numeric: tabular-nums; }
.dv-strip-tick::before { content: ""; position: absolute; top: -6px; left: 50%; width: 1px; height: 5px; background: var(--hg-border-strong); }

/* milestone cards */
.dv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dv-ev { min-width: 0; overflow-wrap: break-word; }
.dv-pcol .gt-src { display: block; }
.dv-pcol .gt-src-k { display: inline-block; margin: 0 6px 2px 0; }
.dv-pcol .gt-tag, .dv-pcol .gt-date { white-space: normal; }
.dv-list--key { position: relative; }
.dv-ev { padding: 12px 14px; border: 1px solid var(--hg-border); border-radius: 12px; background: var(--hg-surface); }
.dv-list--key .dv-ev { background: var(--hg-surface-2); }
.dv-ev--reverse { border-color: #f3c3be; }
.dv-ev-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 6px; }
.dv-ev-change { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--hg-text); }
.dv-ev-title { margin: 8px 0 0; font-size: 14.5px; font-weight: 700; color: var(--hg-muted); }
.dv-ev-body { margin: 6px 0 0; font-size: 14.5px; color: var(--hg-body); }
.dv-ev-detail { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--hg-body); }
.dv-ev-why { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--hg-muted); }
.dv-ev-more { margin: 8px 0 0; }
.dv-ev-more > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 36px; font-size: 14.5px; font-weight: 700; color: var(--hg-primary); }
.dv-ev .gt-qual { margin-top: 10px; }

/* before / after for real reversals */
.dv-rev { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch; margin: 10px 0 0; }
.dv-rev-side { padding: 10px 12px; border-radius: 10px; }
.dv-rev-before { background: #f4f4f5; border: 1px solid #d4d4d8; }
.dv-rev-after { background: #fff; border: 2px solid var(--hg-reverse); }
.dv-rev-k { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hg-muted); }
.dv-rev-side p:last-child { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--hg-text); }
.dv-rev-arrow { align-self: center; font-size: 22px; font-weight: 800; color: var(--hg-reverse); }
@media (max-width: 520px) { .dv-rev { grid-template-columns: minmax(0, 1fr); } .dv-rev-arrow { transform: rotate(90deg); justify-self: center; } }

/* full history */
.dv-history { padding: 14px 0 0; border-top: 1px solid var(--hg-border); }
.dv-era { font-size: 16px !important; font-weight: 800 !important; margin: 16px 0 8px; }
.dv-era small { font-weight: 600; color: var(--hg-faint); }
.dv-origin, .dv-since { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--hg-body); }
.dv-empty-note { margin: 14px 0 0; font-size: 14px; color: var(--hg-muted); font-style: italic; }

/* compare two */
.dv-pair-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0 0 12px; }
.dv-pair-pick { display: flex; flex-direction: column; min-width: 0; }
.dv-pair-pick .gt-select { width: 100%; font-size: 15px; }
.dv-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dv-pcol { min-width: 0; padding: 14px; background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: 14px; }
.dv-pcol h3 { font-size: 18px !important; font-weight: 800 !important; margin: 0; }
.dv-pcol .dv-k { margin-top: 12px; }
.dv-pcol .dv-pos { font-size: 15.5px; }
.dv-pcol-all { margin-top: 12px; }
.dv-pcol-all > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 700; color: var(--hg-primary); }
@media (max-width: 560px) {
  .dv-pair, .dv-pair-picks { gap: 8px; }
  .dv-pcol { padding: 10px; }
  .dv-pcol .dv-ev { padding: 10px; }
  .dv-pcol .dv-ev-change { font-size: 15px; }
  .dv-pcol .dv-rev { grid-template-columns: minmax(0, 1fr); }
  .dv-pcol .dv-rev-arrow { transform: rotate(90deg); justify-self: center; }
  .dv-q { padding: 14px 16px; }
  .dv-row { padding: 14px; }
}
@media (max-width: 380px) { .dv-pair { grid-template-columns: minmax(0, 1fr); } }