/* Hope look for /traditions (The Family Tree of Christianity). Builds on
   hope-guides.css. Family colour stays on the card top bar, the lineage lines
   and the phone card edge; the legend names every family in text. Card
   positions are hand-laid in traditions-data.js and measured by traditions.js,
   so sizes here stay close to the originals to keep the poster layout intact.
   The drawer and methods modal sit outside <main>, so they get the Hope font. */

body.hope-guide .tr-page { color: var(--hg-text); font-family: var(--hg-font); }

/* Hero as one white card */
body.hope-guide .tr-hero { max-width: 860px; background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius); box-shadow: var(--hg-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; padding: 28px 32px; }
body.hope-guide .tr-hero-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--hg-primary); }
body.hope-guide .tr-hero-title { font-weight: 800; font-size: clamp(30px, 4.4vw, 42px); letter-spacing: -0.01em; line-height: 1.12; background: none; -webkit-text-fill-color: currentColor; text-shadow: none; color: var(--hg-text) !important; }
body.hope-guide .tr-hero-sub { font-size: 18px; font-style: normal; font-weight: 600; color: var(--hg-body); }
body.hope-guide .tr-flourish { display: none; }

/* Search */
body.hope-guide .tr-search-wrap { margin-top: 20px; max-width: 520px; background: var(--hg-surface); border: 1px solid var(--hg-border-strong); border-radius: 12px; box-shadow: none; }
body.hope-guide .tr-search-wrap:focus-within { border-color: var(--hg-primary); box-shadow: 0 0 0 3px var(--hg-primary-soft); }
body.hope-guide .tr-search-wrap i { color: var(--hg-faint); }
body.hope-guide .tr-search { font-size: 16px; color: var(--hg-text); min-height: 44px; }
body.hope-guide .tr-search::placeholder { color: var(--hg-faint); }
body.hope-guide .tr-search-clear { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; color: var(--hg-faint); border-radius: 10px; }
body.hope-guide .tr-hint { font-size: 15px; color: var(--hg-muted); }
body.hope-guide .tr-hint b { color: var(--hg-text); font-weight: 700; }

/* Legend: labelled key */
body.hope-guide .tr-legend { background: var(--hg-surface); border: 1px solid var(--hg-border); box-shadow: var(--hg-shadow-sm); border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--hg-text); }
body.hope-guide .tr-legend .dot { width: 18px; height: 6px; box-shadow: none; }
body.hope-guide .tr-methodology-btn { min-height: 44px; font-size: 14.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-primary); border-bottom: 0; }
body.hope-guide .tr-methodology-btn:hover { color: var(--hg-primary-hover); }

/* Poster panel: plain white surface */
body.hope-guide .tr-canvas-sizer::before { background: var(--hg-surface); border: 1px solid var(--hg-border); box-shadow: var(--hg-shadow); }
body.hope-guide .tr-band--tint { background: var(--hg-surface-2); }
body.hope-guide .tr-era-name { font-size: 13.5px; font-weight: 800; letter-spacing: 0; color: var(--hg-text); }
body.hope-guide .tr-era-range { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--hg-faint); }
body.hope-guide .tr-rail { background: var(--hg-border-strong); }
body.hope-guide .tr-rail-tick { background: var(--hg-surface); border-color: var(--hg-faint); }
body.hope-guide .tr-rail-arrow { border-top-color: var(--hg-faint); }
body.hope-guide .tr-conn-glow { stroke: #fff; }
body.hope-guide .tr-conn-glow.lit { stroke: #fff; }

/* Cards */
body.hope-guide .tr-card { background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm); box-shadow: var(--hg-shadow-sm); }
body.hope-guide .tr-card::after { display: none; }
body.hope-guide .tr-card:hover { border-color: var(--hg-primary); box-shadow: 0 8px 22px rgba(58, 87, 232, 0.14); }
body.hope-guide .tr-card-fam { height: 5px; background: var(--fc, var(--hg-primary)); border-radius: 12px 12px 0 0; }
body.hope-guide .tr-card-ord { font-size: 12px; font-weight: 700; color: var(--hg-faint); opacity: 1; }
body.hope-guide .tr-card-medallion { background: var(--hg-surface-2); box-shadow: inset 0 0 0 2px var(--fc, var(--hg-border-strong)); }
body.hope-guide .tr-card-name { font-size: 16px !important; font-weight: 800; line-height: 1.25; color: var(--hg-text) !important; }
body.hope-guide .tr-card-date { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-muted); }
body.hope-guide .tr-card-desc { font-size: 14px; line-height: 1.45; color: var(--hg-body); }
body.hope-guide .tr-card-explore { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-primary); }
body.hope-guide .tr-card--event { background: var(--hg-surface-2); border-color: var(--hg-border-strong); box-shadow: var(--hg-shadow-sm); }
body.hope-guide .tr-card--event .tr-card-name { font-style: normal; color: var(--hg-text) !important; }
body.hope-guide .tr-card--event .tr-card-medallion { color: var(--hg-text); background: var(--hg-surface); box-shadow: inset 0 0 0 2px var(--hg-text); }
body.hope-guide .tr-card--outside { background: #fbf7f5; border-color: #ead9d2; box-shadow: var(--hg-shadow-sm); }
body.hope-guide .tr-card--outside .tr-card-name { color: var(--hg-text) !important; }
body.hope-guide .tr-card--outside .tr-card-date { color: var(--hg-muted); }
body.hope-guide .tr-card-tag { font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #7a3b2b; background: #f6e7e1; border-color: #ead0c6; border-radius: 999px; }
body.hope-guide .tr-card.lit { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc, #3a57e8) 55%, transparent), var(--hg-shadow-sm); }
body.hope-guide .tr-card.selected { box-shadow: 0 0 0 3px var(--hg-primary), 0 10px 26px rgba(58, 87, 232, 0.18); }
body.hope-guide .tr-card.dim { opacity: 0.32; }
body.hope-guide .tr-card:focus-visible { outline: 3px solid var(--hg-primary) !important; outline-offset: 3px; }
body.hope-guide .tr-divider .rule { border-top-color: var(--hg-border-strong); }
body.hope-guide .tr-divider p { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-muted); background: var(--hg-surface); border-color: var(--hg-border); }

body.hope-guide .tr-note { max-width: 560px; text-align: left; background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm); box-shadow: var(--hg-shadow-sm); padding: 16px 20px; }
body.hope-guide .tr-note b { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hg-primary); }
body.hope-guide .tr-note p { font-size: 15.5px; color: var(--hg-muted); }

/* Phone timeline */
body.hope-guide .tr-timeline::before { background: var(--hg-border-strong); }
body.hope-guide .tr-tl-dot { background: var(--hg-surface); box-shadow: inset 0 0 0 2px currentColor, 0 0 0 4px var(--hg-bg); }
body.hope-guide .tr-tl-card { min-height: 44px; background: var(--hg-surface); border: 1px solid var(--hg-border); border-left: 4px solid var(--fc, var(--hg-primary)); border-radius: var(--hg-radius-sm); box-shadow: var(--hg-shadow-sm); padding: 14px 16px; }
body.hope-guide .tr-tl-card--outside { background: #fbf7f5; }
body.hope-guide .tr-tl-name { font-size: 17px !important; font-weight: 800; color: var(--hg-text) !important; }
body.hope-guide .tr-tl-card--outside .tr-tl-name { color: var(--hg-text) !important; }
body.hope-guide .tr-tl-date { font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-muted); }
body.hope-guide .tr-tl-desc { font-size: 15.5px; line-height: 1.5; color: var(--hg-body); }
body.hope-guide .tr-tl-era { border-bottom-color: var(--hg-border-strong); border-bottom-style: solid; }
body.hope-guide .tr-tl-era-name { font-size: 15px; font-weight: 800; letter-spacing: 0; color: var(--hg-text); }
body.hope-guide .tr-tl-era-range { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--hg-faint); }
body.hope-guide .tr-tl-divider .rule { border-top-color: var(--hg-border-strong); }
body.hope-guide .tr-tl-divider p { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-muted); }

/* Drawer + methods modal (outside main) */
body.hope-guide .tr-scrim, body.hope-guide .tr-modal-scrim { background: rgba(17, 24, 39, 0.45); }
body.hope-guide .tr-drawer { background: var(--hg-surface); border-left: 0; box-shadow: -16px 0 46px rgba(17, 24, 39, 0.18); color: var(--hg-text); }
body.hope-guide :is(.tr-drawer, .tr-modal) * { font-family: var(--hg-font) !important; }
body.hope-guide :is(.tr-drawer, .tr-modal) :focus-visible { outline: 3px solid var(--hg-primary) !important; outline-offset: 2px; }
body.hope-guide .tr-drawer-head { background: none; border-bottom-color: var(--hg-border); padding: 22px 26px 18px; }
body.hope-guide :is(.tr-drawer-close, .tr-modal-close) { min-width: 44px; min-height: 44px; display: grid; place-items: center; top: 10px; right: 10px; border-radius: 10px; color: var(--hg-faint); }
body.hope-guide :is(.tr-drawer-close, .tr-modal-close):hover { color: var(--hg-text); background: var(--hg-surface-2); }
body.hope-guide .tr-drawer-medallion { background: var(--hg-surface-2); box-shadow: inset 0 0 0 2px var(--hg-border-strong); }
body.hope-guide .tr-drawer-name { font-size: 22px !important; font-weight: 800; color: var(--hg-text) !important; line-height: 1.25; letter-spacing: -0.01em; font-variant: normal; text-transform: none; padding-right: 40px; }
body.hope-guide .tr-drawer-meta { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--hg-muted); }
body.hope-guide .tr-drawer-summary { font-size: 16.5px; line-height: 1.65; color: var(--hg-body); }
body.hope-guide .tr-drawer-row { font-size: 15px; color: var(--hg-body); border-top-color: var(--hg-border); }
body.hope-guide .tr-drawer-row .k { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--hg-text); }
body.hope-guide .tr-drawer h3 { font-size: 14px !important; font-weight: 800; letter-spacing: 0.06em !important; text-transform: uppercase; color: var(--hg-text) !important; }
body.hope-guide .tr-drawer li { font-size: 15.5px; color: var(--hg-body); }
body.hope-guide .tr-callout { border-left-color: var(--hg-primary); background: var(--hg-primary-soft); border-radius: 0 10px 10px 0; }
body.hope-guide .tr-callout .lbl { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--hg-primary); }
body.hope-guide .tr-callout p { font-size: 15.5px; color: var(--hg-body); }
body.hope-guide .tr-callout--myth { border-left-color: var(--hg-reaffirm); background: var(--hg-reaffirm-bg); }
body.hope-guide .tr-callout--myth .lbl { color: var(--hg-reaffirm); }
body.hope-guide .tr-drawer-link { min-height: 44px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--hg-primary); background: var(--hg-primary-soft); border: 0; border-radius: 10px; }
body.hope-guide .tr-drawer-link:hover { background: #e2e7fc; color: var(--hg-primary-hover); }
body.hope-guide .tr-drawer-link i { color: var(--hg-primary); }
body.hope-guide .tr-drawer-trace { min-height: 44px; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; background: var(--hg-primary); color: #fff; border-radius: 10px; }
body.hope-guide .tr-drawer-trace:hover { background: var(--hg-primary-hover); }
body.hope-guide .tr-modal { background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius); box-shadow: 0 18px 50px rgba(17, 24, 39, 0.2); }
body.hope-guide .tr-modal-head { text-align: left; }
body.hope-guide .tr-modal h2 { font-size: 22px !important; font-weight: 800; color: var(--hg-text) !important; font-variant: normal; letter-spacing: -0.01em; text-transform: none; padding-right: 40px; }
body.hope-guide .tr-modal-body p { font-size: 16px; line-height: 1.6; color: var(--hg-body); }
body.hope-guide .tr-modal-body li { font-size: 15.5px; color: var(--hg-body); }

@media (max-width: 760px) {
  body.hope-guide .tr-hero { margin-left: 16px; margin-right: 16px; padding: 20px 18px; text-align: left; }
  body.hope-guide .tr-search-wrap { margin-left: 0; }
  body.hope-guide .tr-hint { text-align: left; padding: 0 16px; }
  body.hope-guide .tr-methodology-row { text-align: left; padding: 0 16px; }
  body.hope-guide .tr-note { margin-left: 16px; margin-right: 16px; }
  body.hope-guide .tr-drawer-row { flex-direction: column; gap: 2px; }
}