/* Shared horizontal-timeline visualizer — powers "Doctrine Over Time"
   (/doctrine) and "Apostolic Succession" (/succession). Parchment + gold,
   matches the site. Lanes run left→right in time; nodes are colour-coded
   events; the whole track scrolls sideways inside its own box on mobile. */

:root {
  --tl-introduce: #55708c;
  --tl-develop: #4a7a3c;
  --tl-reaffirm: #a8823f;
  --tl-drop: #c0792e;
  --tl-reverse: #8f2d2d;
}

.tl-controls { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 4px 0 14px; }
.tl-seg { display: inline-flex; border: 1px solid #cdb987; border-radius: 10px; overflow: hidden; background: #fbf6ea; }
.tl-seg button { font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700; padding: 10px 20px; border: 0; background: transparent; color: #7d7358; cursor: pointer; letter-spacing: 0.02em; }
.tl-seg button.on { background: linear-gradient(180deg, #b3903f, #8a6c2b); color: #fbf6ea; }
.tl-pick { position: relative; }
.tl-pick label { display: block; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #7d7358; font-weight: 700; margin: 0 0 4px; }
.tl-pick select { font-family: 'Cormorant Garamond', serif; font-size: 18px; padding: 9px 36px 9px 14px; border: 1px solid #cdb987; border-radius: 9px; background: #fbf6ea; color: #3b3630; cursor: pointer; -webkit-appearance: none; appearance: none; min-width: 250px; }
.tl-pick::after { content: "▾"; position: absolute; right: 13px; bottom: 11px; color: #a8823f; pointer-events: none; }

.tl-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; font-size: 14px; color: #7d7358; }
.tl-legend span { display: inline-flex; align-items: center; gap: 7px; }
.tl-ldot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fbf6ea; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }

.tl-scroll { overflow-x: auto; border: 1px solid #cdb987; border-radius: 14px; background: linear-gradient(180deg, #f6efdd, #efe6cf); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.tl-grid { min-width: 920px; padding: 8px 40px 14px 0; }
.tl-axis { display: flex; height: 34px; position: relative; border-bottom: 1px solid #cdb987; margin-bottom: 4px; }
.tl-axis .lbl { flex: 0 0 var(--tl-labw, 210px); }
.tl-axis .track { position: relative; flex: 1; }
.tl-tick { position: absolute; top: 7px; font-size: 12.5px; color: #7d7358; transform: translateX(-50%); letter-spacing: 0.02em; white-space: nowrap; }
.tl-tick::after { content: ""; position: absolute; left: 50%; top: 18px; height: 8px; width: 1px; background: #cdb987; }

.tl-lane { display: flex; align-items: center; min-height: 62px; }
.tl-lane:nth-child(even) { background: rgba(168, 130, 63, 0.05); }
.tl-lane .lbl { flex: 0 0 var(--tl-labw, 210px); padding: 8px 12px 8px 18px; font-size: 17px; line-height: 1.25; color: #3b3630; }
.tl-lane .lbl small { display: block; font-size: 13px; color: #7d7358; margin-top: 3px; letter-spacing: 0.02em; }
.tl-lane .track { position: relative; flex: 1; height: 62px; }
.tl-baseline { position: absolute; top: 50%; height: 3px; border-radius: 2px; transform: translateY(-50%); }
.tl-since { position: absolute; top: 50%; left: 6px; transform: translateY(-50%); font-size: 12.5px; color: #7d7358; background: rgba(251, 246, 234, 0.85); border: 1px solid #cdb987; border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
.tl-node { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 19px; height: 19px; border-radius: 50%; border: 2.5px solid #fbf6ea; cursor: pointer; padding: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); transition: transform 0.1s ease; }
.tl-node:hover, .tl-node.sel { transform: translate(-50%, -50%) scale(1.28); }
.tl-node.sel { box-shadow: 0 0 0 3px rgba(122, 94, 38, 0.35), 0 1px 4px rgba(0, 0, 0, 0.35); }
.tl-node:focus-visible { outline: 2px solid #7a5e26; outline-offset: 2px; }
.n-introduce { background: var(--tl-introduce); }
.n-develop { background: var(--tl-develop); }
.n-reaffirm { background: var(--tl-reaffirm); }
.n-drop { background: var(--tl-drop); }
.n-reverse { background: var(--tl-reverse); }

.tl-detail { margin-top: 18px; border: 1px solid #cdb987; border-radius: 12px; background: #fbf6ea; padding: 20px 22px; min-height: 68px; }
.tl-detail .empty { color: #7d7358; font-style: italic; font-size: 16.5px; margin: 0; }
.tl-detail .d-tag { display: inline-block; font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fbf6ea; padding: 4px 11px; border-radius: 999px; margin-bottom: 9px; }
.tl-detail h4 { margin: 0 0 5px; font-family: 'Cinzel', serif; font-size: 21px; color: #3b3630; font-weight: 700; }
.tl-detail .d-when { font-size: 14.5px; color: #7d7358; margin: 0 0 9px; letter-spacing: 0.03em; }
.tl-detail p.d-body { margin: 0 0 9px; font-size: 18px; line-height: 1.6; color: #4a4335; }
.tl-detail .d-src { font-size: 14px; color: #7d7358; border-top: 1px dashed #cdb987; padding-top: 9px; margin: 9px 0 0; }
.tl-detail .d-src b { color: #7a5e26; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .tl-node { transition: none; } }