/* Hope look for the embedded widgets (2026-10-12): explainer decks, the
   apostles board / map / timeline and the Paul map. They sit inside parchment
   ARTICLE pages, which stay parchment, so every rule here is scoped to the
   widget's own root class and the tokens are set on those roots. Loaded after
   explainers.css / apostles.css / paul-map.css wherever those are linked.
   Keep a "-widget" (or .explainer) root class: honesty.js strips spans
   elsewhere. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/plusjakartasans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/plusjakartasans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.explainer, .apostles-widget, .apostles-map-widget, .apostles-timeline-widget, .paulmap-widget {
  --hw-surface: #ffffff;
  --hw-surface-2: #f8f9fc;
  --hw-border: #e6e9f2;
  --hw-border-strong: #d6dbe7;
  --hw-text: #232d42;
  --hw-body: #374151;
  --hw-muted: #4b5563;
  --hw-primary: #3a57e8;
  --hw-primary-hover: #2d47cc;
  --hw-primary-soft: #eef1fd;
  --hw-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --hw-shadow: 0 10px 30px rgba(17, 38, 146, 0.08);
}

/* ---- Shared frame ------------------------------------------------------- */
.apostles-widget, .apostles-map-widget, .apostles-timeline-widget, .paulmap-widget {
  background: var(--hw-surface) !important;
  border: 1px solid var(--hw-border) !important;
  border-radius: 16px;
  box-shadow: var(--hw-shadow) !important;
  color: var(--hw-text);
  font-family: var(--hw-font);
}
:is(.apostles-widget, .apostles-map-widget, .apostles-timeline-widget, .paulmap-widget, .explainer) * {
  font-family: var(--hw-font) !important;
  font-style: normal;
}
:is(.apostles-widget, .apostles-map-widget, .apostles-timeline-widget, .paulmap-widget, .explainer) :is(h3, h4) {
  font-family: var(--hw-font) !important;
  color: var(--hw-text) !important;
  font-variant: normal !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}
:is(.apostles-widget, .apostles-map-widget, .apostles-timeline-widget, .paulmap-widget, .explainer) :is(button, [tabindex]):focus-visible {
  outline: 3px solid var(--hw-primary) !important;
  outline-offset: 2px;
}

/* Heading block: centred text that really sits under the title. */
.apostles-head, .paulmap-head { text-align: center; }
:is(.apostles-kicker, .paulmap-kicker) {
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--hw-primary); text-transform: uppercase;
}
:is(.apostles-title, .paulmap-title) { font-weight: 800 !important; font-size: clamp(24px, 3.2vw, 32px) !important; line-height: 1.2; }
.apostles-widget .apostles-intro, :is(.apostles-widget, .apostles-map-widget, .apostles-timeline-widget) .apostles-disclaimer, .paulmap-widget .paulmap-disclaimer {
  margin-left: auto !important; margin-right: auto !important; text-align: center !important;
  text-indent: 0 !important; float: none !important;
}
.apostles-widget .apostles-intro { font-size: 17px; line-height: 1.6; color: var(--hw-body); }
:is(.apostles-disclaimer, .paulmap-disclaimer) { font-size: 15px; line-height: 1.55; color: var(--hw-muted); }
:is(.apostles-disclaimer, .paulmap-disclaimer) em { font-weight: 700; color: var(--hw-text); }

/* ---- Apostles board ------------------------------------------------------- */
.apostle-card {
  background: var(--hw-surface) !important; border: 1px solid var(--hw-border-strong); border-radius: 12px;
  color: var(--hw-text); min-height: 44px;
}
.apostle-card:hover { box-shadow: 0 6px 16px rgba(17, 38, 146, 0.1); }
.apostle-card.is-active { background: var(--hw-primary-soft) !important; border-color: var(--hw-primary); box-shadow: 0 0 0 2px var(--hw-primary); }
:is(.apostle-emblem, .apostle-detail-emblem, .apt-emblem, .apm-chip-dot) {
  background: var(--hw-primary-soft) !important; color: var(--hw-primary) !important;
  border: 1px solid #cfd7fa !important; box-shadow: none !important; font-weight: 800;
}
.apostle-card.is-active .apostle-emblem { background: var(--hw-primary) !important; color: #fff !important; border-color: var(--hw-primary) !important; }
.apostle-card-name { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--hw-text); }
.apostle-card-epithet { font-size: 14px; color: var(--hw-muted); }
.apostle-card-tag {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: #8a5a00; background: #fdf1d9;
}

.apostle-detail-card { background: var(--hw-surface-2); border: 1px solid var(--hw-border); border-radius: 14px; box-shadow: none; }
.apostle-detail-name { font-size: 22px; font-weight: 800; }
.apostle-detail-epithet { font-size: 15px; color: var(--hw-muted); }
.apostle-detail-epithet span { color: var(--hw-muted); }
.apostle-detail-role { font-size: 16.5px; line-height: 1.6; color: var(--hw-body); }
.apostle-detail-facts > div { border-bottom-color: var(--hw-border); }
.apostle-detail-facts dt { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--hw-primary); }
.apostle-detail-facts dd { font-size: 15.5px; line-height: 1.5; color: var(--hw-body); }
.apostle-detail-note {
  font-size: 15px; line-height: 1.55; color: var(--hw-body);
  background: #fdf1d9; border-left: 4px solid #c88a12; border-radius: 8px;
}
.apostle-detail-note strong { color: #6b4500; }

/* ---- Apostles map ---------------------------------------------------------- */
.apm-map { border: 1px solid var(--hw-border) !important; border-radius: 12px; }
.apm-map .leaflet-bar a { color: var(--hw-text); background: #fff; }
.apm-map .leaflet-tooltip { font-size: 14px; color: var(--hw-text); }
.apm-map .apm-death-tip { font-size: 14px; font-weight: 700; }
.apm-caption { font-size: 16px; line-height: 1.55; color: var(--hw-body); font-style: normal; }
.apm-caption strong { color: var(--hw-text); font-weight: 800; }
.apm-chip {
  min-height: 44px; font-size: 15px; font-weight: 600; color: var(--hw-text);
  background: var(--hw-surface); border: 1px solid var(--hw-border-strong); border-radius: 999px;
}
.apm-chip.is-active { background: var(--hw-primary-soft); border-color: var(--hw-primary); color: var(--hw-primary); box-shadow: 0 0 0 1px var(--hw-primary); }
.apm-fallback { font-size: 15px; color: var(--hw-muted); }

/* ---- Apostles timeline ----------------------------------------------------- */
.apt-entry { min-height: 44px; border-radius: 10px; }
.apt-entry:hover { background: var(--hw-surface-2); }
.apt-entry.is-active { background: var(--hw-primary-soft); box-shadow: inset 0 0 0 1px var(--hw-primary); }
.apt-year { font-size: 14px; font-weight: 700; color: var(--hw-muted); }
.apt-name { font-size: 15.5px; font-weight: 700; color: var(--hw-text); }
.apt-place { font-size: 14px; color: var(--hw-muted); }
.apt-anchor .apt-body strong { font-size: 15px; font-weight: 800; color: var(--hw-text); }
.apt-anchor .apt-body span { font-size: 14.5px; color: var(--hw-muted); }

/* ---- Paul map ---------------------------------------------------------------- */
.paulmap-tab {
  min-height: 44px; font-size: 15px; font-weight: 600; color: var(--hw-text);
  background: var(--hw-surface); border: 1px solid var(--hw-border-strong);
}
.paulmap-tab-years { font-size: 13.5px; color: var(--hw-muted); }
.paulmap-tab.is-active { background: var(--hw-primary-soft); }
.paulmap-map { border: 1px solid var(--hw-border) !important; border-radius: 12px; }
.paulmap-map .leaflet-bar a { color: var(--hw-text); background: #fff; }
.paulmap-map .leaflet-tooltip { font-size: 14px; color: var(--hw-text); background: #fff; border-color: var(--hw-border-strong); }
.paulmap-years { font-size: 14px; font-weight: 800; letter-spacing: 0.02em; }
.paulmap-summary { font-size: 16.5px; line-height: 1.6; color: var(--hw-body); }
.paulmap-refs { font-size: 15px; color: var(--hw-muted); }
.paulmap-stops { background: var(--hw-surface-2); border: 1px solid var(--hw-border); border-radius: 12px; }
.paulmap-stops li { font-size: 15.5px; color: var(--hw-body); }
.paulmap-stop-num { font-size: 13px; width: 1.6rem; height: 1.6rem; }
.paulmap-num-icon span { font-size: 13px; }
.paulmap-foot { font-size: 15px; color: var(--hw-muted); }
.paulmap-fallback { font-size: 15px; color: var(--hw-muted); }

/* Phones: chips and journey tabs become one swipeable row instead of a tall stack. */
@media (max-width: 640px) {
  .apostles-widget, .apostles-map-widget, .apostles-timeline-widget, .paulmap-widget { padding: 1.1rem 0.9rem 1.2rem !important; }
  .apm-legend, .paulmap-tabs {
    flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 6px; scroll-snap-type: x proximity;
  }
  .apm-chip, .paulmap-tab { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
  .apostle-card-epithet { font-size: 13.5px; }
}

/* ---- Explainer decks (embedded in articles and on /explainers/<id>) -------- */
.explainer {
  background: var(--hw-surface) !important;
  border: 1px solid var(--hw-border) !important;
  border-radius: 16px;
  box-shadow: var(--hw-shadow) !important;
  font-family: var(--hw-font);
  /* clip, not hidden: lets the nav bar stick to the bottom of the screen */
  overflow: clip;
}
.explainer .exp-progress { background: var(--hw-primary-soft); }
.explainer .exp-progress-bar { background: var(--hw-primary); }
.explainer .exp-kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--hw-primary); }
.explainer .exp-title { font-size: 28px !important; font-weight: 800 !important; line-height: 1.2; }
.explainer .exp-rule { background: var(--hw-primary); }
.explainer .exp-bullets li { font-size: 17.5px; line-height: 1.6; color: var(--hw-body); }
.explainer .exp-bullets li::before { content: ""; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--hw-primary); }
.explainer .exp-lead { font-size: 18px; line-height: 1.6; color: var(--hw-body); }
.explainer .exp-callout { font-size: 15.5px; line-height: 1.55; border-left-width: 4px; border-radius: 8px; }
.explainer .exp-callout-label { font-size: 12.5px; letter-spacing: 0.08em; font-weight: 800; }
.explainer .exp-callout.exp-fact { background: #e2f5ec; border-color: #11744a; color: #173d2c; }
.explainer .exp-callout.exp-fact .exp-callout-label { color: #11744a; }
.explainer .exp-callout.exp-myth { background: #fde8e6; border-color: #b42318; color: #5c1a14; }
.explainer .exp-callout.exp-myth .exp-callout-label { color: #b42318; }
.explainer .exp-callout.exp-key { background: var(--hw-primary-soft); border-color: var(--hw-primary); color: #1f2a5c; }
.explainer .exp-callout.exp-key .exp-callout-label { color: #2440c4; }
.explainer .exp-source { font-size: 14px; color: var(--hw-muted); }
.explainer .exp-cover-pre { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--hw-primary); }
.explainer .exp-cover-title { font-size: 34px !important; font-weight: 800 !important; line-height: 1.15; }
.explainer .exp-cover-sub { font-size: 17px; line-height: 1.55; color: var(--hw-muted); }
.explainer .exp-cover-hint { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--hw-primary); }
.explainer .exp-counter { font-size: 13px; font-weight: 700; color: var(--hw-muted); }

/* Nav: 44px arrows and 44px dot targets (the visible dot stays small). */
.explainer .exp-nav {
  position: sticky; bottom: 0; z-index: 2;
  background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--hw-border); padding: 8px 12px;
}
.explainer :is(.exp-prev, .exp-next) {
  width: 44px; height: 44px; border: 1px solid var(--hw-border-strong); color: var(--hw-text); background: #fff;
}
.explainer .exp-next { background: var(--hw-primary); border-color: var(--hw-primary); color: #fff; }
.explainer :is(.exp-prev, .exp-next):hover:not(:disabled) { background: var(--hw-primary-hover); border-color: var(--hw-primary-hover); color: #fff; }
.explainer .exp-dots { gap: 0; }
.explainer .exp-dot {
  position: relative; width: 44px; height: 44px; min-height: 44px; background: transparent !important; transform: none !important;
}
.explainer .exp-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: #c3cad9; transition: background 0.15s, transform 0.15s;
}
.explainer .exp-dot:hover::after { background: #8e98ad; }
.explainer .exp-dot.is-active::after { background: var(--hw-primary); transform: scale(1.35); }
@media (max-width: 560px) {
  /* Many slides: dots keep 44px targets in one swipeable row; arrows stay put. */
  .explainer .exp-dots { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .explainer .exp-dot { flex: 0 0 44px; }
  .explainer .exp-title { font-size: 23px !important; }
  .explainer .exp-cover-title { font-size: 27px !important; }
  .explainer .exp-bullets li { font-size: 16.5px; }
  .explainer .exp-slide { padding: 20px 18px; }
}