/* Fideograph Harmony Tool — harmony-tool.css v1.0.0 */

:root {
  --fht-ink:    #1A1510;
  --fht-ink2:   #2E2A1E;
  --fht-ink3:   #48432E;
  --fht-ink4:   #6B5F4A;
  --fht-ink5:   #9C9080;
  --fht-parch:  #FAF6ED;
  --fht-parch2: #F4EDD8;
  --fht-parch3: #EDE5CC;
  --fht-border: #DDD5B8;
  --fht-gold:   #C9A84C;
  --fht-gold-d: #B8922A;
  --fht-teal:   #1D8A6A;
  --fht-blue:   #185FA5;
}

/* ── Base ─────────────────────────────────────────────── */
.fht-wrap, .fht-article-wrap { background: var(--fht-parch); color: var(--fht-ink); }

/* ── Masthead ─────────────────────────────────────────── */
.fht-masthead {
  background: #1c1810;
  padding: 64px 32px 56px;
  text-align: center;
  position: relative; overflow: hidden;
}
.fht-masthead::before {
  content: '✦';
  position: absolute; right: 40px; top: 40px;
  font-size: 100px; color: rgba(201,168,76,.06); line-height: 1;
}
.fht-masthead--article { padding: 48px 32px 36px; }
.fht-masthead__inner { position: relative; max-width: 760px; margin: 0 auto; }
.fht-masthead__eyebrow {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(201,168,76,.45); margin-bottom: 12px;
}
.fht-masthead__eyebrow a { color: rgba(201,168,76,.45); text-decoration: none; }
.fht-masthead__eyebrow a:hover { color: var(--fht-gold); }
.fht-masthead__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(26px,4vw,46px); font-weight: 700;
  color: #fff; margin-bottom: 14px; line-height: 1.15;
}
.fht-masthead__title em { font-style: italic; color: var(--fht-gold); }
.fht-masthead__title--passage {
  font-size: clamp(22px,3vw,38px); letter-spacing: .02em;
}
.fht-masthead__sub {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.1rem; font-style: italic;
  color: rgba(250,246,237,.5); margin-bottom: 20px; line-height: 1.7;
}
.fht-masthead__meta, .fht-masthead__meta-counts {
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(201,168,76,.55);
}
.fht-masthead__meta-counts span { color: rgba(201,168,76,.25); }

/* ── Filter bar ───────────────────────────────────────── */
.fht-filter-bar {
  display: flex; overflow-x: auto; flex-wrap: nowrap;
  background: #2e2a1e;
  border-bottom: 1px solid rgba(201,168,76,.08);
  padding: 0 12px; scrollbar-width: none;
}
.fht-filter-bar::-webkit-scrollbar { display: none; }
.fht-filter-pill {
  flex-shrink: 0; padding: 11px 16px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(250,246,237,.4); cursor: pointer;
  border: none; background: none;
  border-bottom: 2px solid transparent;
  transition: all .15s; white-space: nowrap;
}
.fht-filter-pill:hover { color: rgba(250,246,237,.7); }
.fht-filter-pill.active { color: var(--fht-gold); border-bottom-color: var(--fht-gold); }

/* ── Index layout ─────────────────────────────────────── */
.fht-index-layout {
  display: grid; grid-template-columns: 220px 1fr;
  max-width: 1320px; margin: 0 auto; align-items: start;
}
@media(max-width:860px) {
  .fht-index-layout { grid-template-columns: 1fr; }
  .fht-sidebar { border-right: none; border-bottom: 1px solid var(--fht-border); }
}

/* ── Sidebar ──────────────────────────────────────────── */
.fht-sidebar {
  position: sticky; top: 130px;
  max-height: calc(100vh - 130px);
  overflow-y: auto; padding: 20px 16px;
  border-right: 1px solid var(--fht-border);
  background: var(--fht-parch);
}
.fht-sidebar__group { margin-bottom: 20px; }
.fht-sidebar__label {
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--fht-ink5); font-weight: 700; margin-bottom: 8px; display: block;
}
.fht-search-box {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--fht-border); border-radius: 4px;
  font-size: 13px; background: #fff; color: var(--fht-ink);
  outline: none; box-sizing: border-box;
}
.fht-search-box:focus { border-color: var(--fht-gold); }
.fht-era-label {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 12.5px; color: var(--fht-ink3); margin-bottom: 5px; cursor: pointer;
}
.fht-stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 6px;
}
.fht-stat {
  background: #fff; border: 1px solid var(--fht-border);
  border-radius: 5px; padding: 8px 4px; text-align: center;
}
.fht-stat__n { display: block; font-family: Georgia,serif; font-size: 20px; font-weight: 700; color: var(--fht-gold-d); line-height: 1; }
.fht-stat__l { display: block; font-size: 9px; color: var(--fht-ink5); margin-top: 2px; text-transform: uppercase; letter-spacing: .05em; }

/* ── Article grid ─────────────────────────────────────── */
.fht-grid-area { padding: 24px 28px 80px; }
#fht-article-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px;
}

/* ── Harmony card ─────────────────────────────────────── */
.fht-card {
  background: #fff; border: 1px solid var(--fht-border);
  border-radius: 10px; padding: 20px;
  transition: box-shadow .2s, transform .15s;
}
.fht-card:hover { box-shadow: 0 4px 18px rgba(26,21,16,.1); transform: translateY(-2px); }
.fht-card--hidden { display: none; }
.fht-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fht-card__doctrine { font-size: 9px; font-weight: 700; letter-spacing: .14em; color: var(--fht-gold-d); }
.fht-card__status { font-size: 9px; font-weight: 700; letter-spacing: .06em; padding: 2px 7px; border-radius: 99px; text-transform: uppercase; }
.fht-card__status--complete { background: #DCFCE7; color: #166534; }
.fht-card__status--review   { background: #FEF3C7; color: #92400E; }
.fht-card__status--draft    { background: rgba(26,21,16,.06); color: var(--fht-ink4); }
.fht-card__passage { font-family: 'Playfair Display',Georgia,serif; font-size: 18px; font-weight: 700; color: var(--fht-ink); margin: 0 0 8px; line-height: 1.25; }
.fht-card__firstline { font-family: 'EB Garamond',Georgia,serif; font-size: 13.5px; font-style: italic; color: var(--fht-ink3); line-height: 1.6; margin-bottom: 12px; }
.fht-card__witnesses { display: flex; gap: 12px; margin-bottom: 10px; }
.fht-card__wcount { display: flex; align-items: baseline; gap: 4px; }
.fht-card__wn { font-family: Georgia,serif; font-size: 18px; font-weight: 700; color: var(--fht-gold-d); line-height: 1; }
.fht-card__wl { font-size: 10px; color: var(--fht-ink5); text-transform: uppercase; letter-spacing: .04em; }
.fht-card__centuries { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.fht-card__cdot { font-size: 8px; color: var(--fht-gold); }
.fht-card__crange { font-size: 10px; color: var(--fht-ink5); letter-spacing: .06em; margin-left: 4px; }
.fht-card__periods { display: flex; gap: 5px; margin-bottom: 14px; }
.fht-card__pdot { font-size: 13px; }
.fht-card__pdot.empty { color: var(--fht-parch3); }
.fht-card__link { font-size: 12px; color: var(--fht-gold-d); text-decoration: none; letter-spacing: .04em; }
.fht-card__link:hover { color: #8B3000; }

/* ── Empty state ──────────────────────────────────────── */
.fht-empty { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--fht-ink4); }
.fht-empty__icon { font-size: 28px; opacity: .2; margin-bottom: 10px; }
.fht-empty__text { font-size: 14px; line-height: 1.7; }
.fht-empty__text a { color: var(--fht-gold-d); }

/* ── Article wrapper ──────────────────────────────────── */
.fht-article-wrap { }

/* ── Theme integration — harmony single pages ─────────── */
/* Suppress theme's default post title/header on harmony articles */
.single-fg_harmony .fg-post-header,
.single-fg_harmony .entry-header,
.single-fg_harmony .post-header,
.single-fg_harmony h1.entry-title,
.single-fg_harmony .page-header,
.single-fg_harmony .fg-page-title {
  display: none !important;
}
/* Remove theme content area padding so masthead goes edge-to-edge */
.single-fg_harmony .fg-content,
.single-fg_harmony .entry-content,
.single-fg_harmony .site-content,
.single-fg_harmony main > .container,
.single-fg_harmony #content > .wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Witness overview bar */
.fht-overview-bar {
  position: sticky; top: 60px; z-index: 80;
  background: #2e2a1e;
  display: flex; overflow-x: auto; flex-wrap: nowrap;
  border-bottom: 1px solid rgba(201,168,76,.1); scrollbar-width: none;
}
/* When WP admin bar is showing (logged in), push down by 32px */
.admin-bar .fht-overview-bar { top: 92px; }
.fht-overview-bar::-webkit-scrollbar { display: none; }
.fht-overview-pill {
  flex-shrink: 0; padding: 11px 20px;
  font-size: 12px; color: rgba(250,246,237,.5);
  text-decoration: none; border-bottom: 2px solid transparent;
  white-space: nowrap; transition: all .15s;
}
.fht-overview-pill:hover { color: #fff; }
.fht-overview-pill.active { color: var(--fht-gold); border-bottom-color: var(--fht-gold); }

/* Article intro */
.fht-article-intro {
  font-family: 'EB Garamond',Georgia,serif;
  font-size: 1.1rem; color: var(--fht-ink2); line-height: 1.8;
  max-width: 800px; margin: 0 auto;
  padding: 28px 32px 0;
}

/* ── Three-witness grid ───────────────────────────────── */
.fht-three-witness {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 0;
  margin: 28px 32px;
  background: #fff;
  border: 1px solid var(--fht-border);
  border-radius: 10px;
  overflow: hidden;
}
@media(max-width:900px) {
  .fht-three-witness { grid-template-columns: 1fr; margin: 20px 16px; }
  .fht-col { border-right: none !important; border-bottom: 1px solid var(--fht-border); }
}

/* Columns */
.fht-col { display: flex; flex-direction: column; }
.fht-col--scripture  { border-right: 1px solid var(--fht-border); }
.fht-col--tradition  { border-right: 1px solid var(--fht-border); }
.fht-col--magisterium {}

.fht-col__header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--fht-parch2);
  border-bottom: 1px solid var(--fht-border);
  /* Not sticky — too many stacked sticky elements cause overlap with site nav + overview bar */
  z-index: 10;
}
.fht-col__icon { font-size: 14px; color: var(--fht-gold); flex-shrink: 0; }
.fht-col__title { font-family: 'Playfair Display',Georgia,serif; font-size: 14px; font-weight: 700; color: var(--fht-ink); }
.fht-col__sub { font-size: 10px; color: var(--fht-ink5); letter-spacing: .06em; }

/* ── Scripture witness ────────────────────────────────── */
.fht-scripture { padding: 20px 18px; }
.fht-scripture__context { font-size: 12px; font-style: italic; color: var(--fht-ink5); margin-bottom: 12px; line-height: 1.6; }
.fht-scripture__text {
  font-family: 'EB Garamond',Georgia,serif;
  font-size: 1.15rem; font-style: italic; color: var(--fht-ink2);
  border-left: 3px solid var(--fht-gold);
  padding-left: 16px; margin: 0 0 8px; line-height: 1.8;
}
.fht-scripture__ref { font-size: 11px; color: var(--fht-ink5); letter-spacing: .08em; }
.fht-scripture__reading { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--fht-border); }
.fht-scripture__reading-label {
  font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fht-gold-d); margin-bottom: 8px;
}
.fht-scripture__reading p { font-size: 13px; color: var(--fht-ink3); line-height: 1.7; margin-bottom: 8px; }

/* ── Father card ──────────────────────────────────────── */
.fht-father-card {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(221,213,184,.5);
}
.fht-father-card:last-child { border-bottom: none; }
.fht-father-card__header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.fht-father-card__dot { font-size: 12px; margin-top: 2px; flex-shrink: 0; }
.fht-father-card__meta { flex: 1; }
.fht-father-card__name {
  font-family: 'Playfair Display',Georgia,serif;
  font-size: 14px; font-weight: 700; color: var(--fht-ink);
}
.fht-father-card__name a { color: inherit; text-decoration: none; }
.fht-father-card__name a:hover { color: var(--fht-gold-d); }
.fht-father-card__date { font-size: 11px; color: var(--fht-ink5); display: flex; gap: 5px; align-items: center; margin-top: 1px; }
.fht-father-card__weight {
  font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 99px; background: rgba(201,168,76,.15); color: var(--fht-gold-d);
  flex-shrink: 0;
}
.fht-father-card__source { font-size: 11px; font-style: italic; color: var(--fht-ink5); margin-bottom: 10px; }
.fht-father-card__quote {
  font-family: 'EB Garamond',Georgia,serif;
  font-size: 1rem; font-style: italic; color: var(--fht-ink2);
  border-left: 2px solid var(--fht-gold);
  padding-left: 12px; margin: 0 0 10px; line-height: 1.7;
}
.fht-father-card__toggle-wrap { margin-bottom: 8px; }
.fht-father-card__toggle {
  font-size: 11px; color: var(--fht-gold-d); background: none; border: none;
  cursor: pointer; padding: 0; letter-spacing: .04em;
}
.fht-father-card__toggle:hover { color: #8B3000; }
.fht-father-card__interpretation {
  background: var(--fht-parch);
  border-left: 2px solid var(--fht-parch3);
  padding: 10px 12px; margin-top: 6px; border-radius: 0 4px 4px 0;
}
.fht-father-card__interpretation p { font-size: 13px; color: var(--fht-ink3); line-height: 1.7; margin-bottom: 6px; }
.fht-father-card__context-link { font-size: 11px; color: var(--fht-gold-d); text-decoration: none; }
.fht-father-card__context-link:hover { color: #8B3000; }

/* ── Council card ─────────────────────────────────────── */
.fht-council-card {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(221,213,184,.5);
}
.fht-council-card:last-child { border-bottom: none; }
.fht-council-card__header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.fht-council-card__icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.fht-council-card__meta { flex: 1; }
.fht-council-card__name { font-family: 'Playfair Display',Georgia,serif; font-size: 14px; font-weight: 700; color: var(--fht-ink); }
.fht-council-card__date { font-size: 11px; color: var(--fht-ink5); display: flex; gap: 5px; align-items: center; margin-top: 1px; }
.fht-council-card__ref { font-size: 11px; font-style: italic; color: var(--fht-ink5); margin-bottom: 10px; }
.fht-council-card__text {
  font-family: 'EB Garamond',Georgia,serif;
  font-size: 1rem; font-style: italic; color: var(--fht-ink2);
  border-left: 2px solid var(--fht-gold);
  padding-left: 12px; margin: 0 0 10px; line-height: 1.75;
}
.fht-council-card__toggle-wrap { margin-bottom: 8px; }
.fht-council-card__toggle {
  font-size: 11px; color: var(--fht-gold-d); background: none; border: none;
  cursor: pointer; padding: 0; letter-spacing: .04em;
}
.fht-council-card__note {
  background: var(--fht-parch);
  border-left: 2px solid var(--fht-parch3);
  padding: 10px 12px; margin-top: 6px; border-radius: 0 4px 4px 0;
}
.fht-council-card__note p { font-size: 13px; color: var(--fht-ink3); line-height: 1.7; margin-bottom: 6px; }
.fht-council-card__context-link { font-size: 11px; color: var(--fht-gold-d); text-decoration: none; }

/* ── Protestant contrast ──────────────────────────────── */
.fht-contrast {
  margin: 0 32px 28px;
  background: #fff;
  border: 1px solid var(--fht-border);
  border-radius: 10px; overflow: hidden;
}
@media(max-width:900px) { .fht-contrast { margin: 0 16px 20px; } }
.fht-contrast__inner { padding: 24px 28px; }
.fht-contrast__header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.fht-contrast__icon { font-size: 20px; color: var(--fht-ink4); flex-shrink: 0; margin-top: 2px; }
.fht-contrast__title {
  font-family: 'Playfair Display',Georgia,serif;
  font-size: 17px; font-weight: 700; color: var(--fht-ink);
}
.fht-contrast__source { font-size: 11px; color: var(--fht-ink5); margin-top: 2px; }
.fht-contrast__reading { font-family: 'EB Garamond',Georgia,serif; font-size: 1.05rem; color: var(--fht-ink2); line-height: 1.8; margin-bottom: 16px; }
.fht-contrast__basis { margin-bottom: 16px; }
.fht-contrast__basis-label {
  font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fht-ink5); margin-bottom: 6px;
}
.fht-contrast__basis p { font-size: 13px; color: var(--fht-ink3); line-height: 1.7; margin-bottom: 8px; }
.fht-contrast__observation {
  background: var(--fht-parch2);
  border-left: 3px solid var(--fht-border);
  padding: 12px 16px; border-radius: 0 6px 6px 0;
}
.fht-contrast__obs-label {
  font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fht-ink5); margin-bottom: 6px;
}
.fht-contrast__observation p { font-size: 13px; color: var(--fht-ink3); line-height: 1.7; margin-bottom: 0; }

/* ── Cross-links ──────────────────────────────────────── */
.fht-crosslinks {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 0 32px 60px; padding-top: 20px;
  border-top: 1px solid var(--fht-border);
}
.fht-crosslink { font-size: 13px; color: var(--fht-gold-d); text-decoration: none; letter-spacing: .03em; }
.fht-crosslink:hover { color: #8B3000; }