/* THEO — overrides on top of the Gold Ark copy.
   Colour rule: Z:\Theo\THEO-APP-RULES.md
   - Background: deep warm charcoal (not navy) — set in shell.css / timeline.css.
   - Gold is ONLY for the 25 Quranic prophets (restored below).
   - Figure colours come from theoColorFor() in config.js. */

/* Top bar: one thin row. Tab rows hidden; view name sits next to THEO. */
html body .zone-a,
html body[data-tab-mode] .zone-a { height: 40px !important; }
html body .zone-a-row2,
html body .zone-a-row3,
html body #tabRow1,
html body #tabRow2 { display: none !important; }
html body .zone-a-row1 { height: 40px; justify-content: flex-start; gap: 18px; }
html body .zone-a-row1 .row1-right { margin-left: auto; }
html body .za-logo { color: #E2DCCB; font-size: 18px; line-height: 28px; }
.theo-view-title {
  font-family: 'Marcellus', Georgia, serif;
  font-size: 15px;
  letter-spacing: .18em;
  color: #E2DCCB;
  padding-left: 18px;
  border-left: 1px solid rgba(226,220,203,.25);
  display: flex;
  align-items: center;
  gap: 10px;
}
/* THEO | TIMELINE · BOOKS — view switch. Ivory furniture, never gold. */
.theo-view-title .theo-nav-btn {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font: inherit; letter-spacing: inherit;
  color: rgba(226,220,203,.5);
  border-bottom: 1px solid transparent;
}
.theo-view-title .theo-nav-btn:hover { color: #E2DCCB; }
.theo-view-title .theo-nav-btn.active { color: #E2DCCB; border-bottom-color: rgba(226,220,203,.6); }
.theo-view-title .theo-nav-count { font-size: 11px; letter-spacing: .1em; margin-left: 8px; opacity: .75; }
.theo-view-title .theo-nav-sep { color: rgba(226,220,203,.4); }

/* "Books (N)" on the TIMELINE info card — opens BOOKS on that person. Ivory, never gold. */
html body.tl-mounted #zoneC .theo-books-link {
  display: inline-block;
  margin: 0 0 10px;
  font-family: 'Marcellus', Georgia, serif;
  font-size: var(--fs-3, 12px);
  letter-spacing: .1em;
  color: #E2DCCB;
  text-decoration: none;
  border-bottom: 1px dotted rgba(226,220,203,.5);
  cursor: pointer;
}
html body.tl-mounted #zoneC .theo-books-link:hover { border-bottom-style: solid; }

/* Gold restored ONLY for Quranic prophets. */
html body.tl-mounted #zoneC .tl-row.prophet-row {
  background: linear-gradient(90deg, rgba(212,175,55,.10) 0%, transparent 100%) !important;
  box-shadow: inset 3px 0 0 #D4AF37 !important;
}
html body.tl-mounted #zoneC .tl-row.prophet-row .tc-famous { color: #D4AF37 !important; }
html body.tl-mounted #zoneC .tc-name.is-sacred .tc-famous { color: rgba(212,175,55,.85); }

/* Layered filters (CIVILISATION → TYPE → TRADITION). */
.dd-panel .theo-dd-group {
  padding: 10px 14px 4px;
  font: 600 11px/1 'Marcellus', Georgia, serif;
  letter-spacing: .16em;
  border-top: 1px solid rgba(226,220,203,.12);
}
.dd-panel .theo-dd-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
/* "Common" — pinned first, bordered, ticked by default. */
.dd-panel .dd-item.theo-dd-common {
  margin: 6px 8px 8px;
  border: 1px solid rgba(212,175,55,.6);
  border-radius: 4px;
  font-weight: 600;
}

/* Narrators are on by default — no add/remove button. */
html body #tlNarrPill { display: none !important; }

/* ═══ THE-O BRAND (7 Nov 2026) — Z:\Theo\the-o_brand-kit ═══
   Marcellus = logo, headings, navigation (capitals, tracked). Source Sans 3 = text.
   Icons: brand kit line icons (24px grid, 1.75 stroke), ivory on dark. */
html body { font-synthesis-weight: none; }

/* Icons — drawn from assets/brand/icons/*.svg in the current text colour */
.to-ic {
  display: inline-block; width: 16px; height: 16px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--to-ic) center / contain no-repeat;
          mask: var(--to-ic) center / contain no-repeat;
  vertical-align: -3px;
}
.to-ic-back     { --to-ic: url(assets/brand/icons/back.svg); }
.to-ic-fwd      { --to-ic: url(assets/brand/icons/back.svg); transform: scaleX(-1); }
.to-ic-info     { --to-ic: url(assets/brand/icons/info.svg); }
.to-ic-bookmark { --to-ic: url(assets/brand/icons/bookmark.svg); width: 14px; height: 14px; vertical-align: -2px; }

/* Top-right tiles: TOOLS · INFORMATION · VISITOR — The-O style (ivory, Marcellus, icons) */
html body .tools-btn,
html body .user-pill {
  font-family: 'Marcellus', Georgia, serif;
  font-size: 12.5px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  color: #E2DCCB;
  background: transparent;
  border: 1px solid rgba(226,220,203,.28);
  border-radius: 6px;
  height: 28px; padding: 0 12px 0 10px;
  display: inline-flex; align-items: center; gap: 7px;
  line-height: 1;
  transition: border-color .15s, background .15s, color .15s;
}
html body .tools-btn:hover,
html body .user-pill:hover,
html body .tools-btn.active,
html body .info-btn.active {
  color: #F4EFE3; border-color: rgba(226,220,203,.6); background: rgba(226,220,203,.08);
}
html body .tools-btn::before,
html body .user-pill::before {
  content: ''; width: 15px; height: 15px; flex: 0 0 auto;
  background-color: currentColor; opacity: .85;
  -webkit-mask: var(--to-ic) center / contain no-repeat;
          mask: var(--to-ic) center / contain no-repeat;
}
html body #toolsBtn  { --to-ic: url(assets/brand/icons/settings.svg); }
html body #infoBtn   { --to-ic: url(assets/brand/icons/info.svg); }
html body #userPill  { --to-ic: url(assets/brand/icons/account.svg); }
html body .menu-dropdown { border-radius: 6px; border-color: rgba(226,220,203,.28); }

/* Nav: TIMELINE · BOOKS · LINKS with their icons */
.theo-view-title { letter-spacing: .14em; }
.theo-view-title .theo-nav-btn { display: inline-flex; align-items: center; gap: 7px; }
.theo-view-title .theo-nav-btn::before {
  content: ''; width: 15px; height: 15px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--to-ic) center / contain no-repeat;
          mask: var(--to-ic) center / contain no-repeat;
}
.theo-nav-btn[data-theo-view="TIMELINE"] { --to-ic: url(assets/brand/icons/timeline.svg); }
.theo-nav-btn[data-theo-view="YEAR"]     { --to-ic: url(assets/brand/icons/calendar.svg); }
.theo-nav-btn[data-theo-view="BOOKS"]    { --to-ic: url(assets/brand/icons/books.svg); }
.theo-nav-btn[data-theo-view="FREELIB"]  { --to-ic: url(assets/brand/icons/links.svg); }

/* Search box icon */
html body .zb-search { position: relative; }
html body .zb-search::before {
  content: ''; position: absolute; left: 14px; top: 50%; width: 15px; height: 15px;
  transform: translateY(-50%); pointer-events: none; z-index: 1;
  background-image: none; background-color: rgba(226,220,203,.7);
  -webkit-mask: url(assets/brand/icons/search.svg) center / contain no-repeat;
          mask: url(assets/brand/icons/search.svg) center / contain no-repeat;
}

/* Bottom bar: play / pause / speed icons (text glyphs hidden) */
html body #zdAnimateIcon {
  font-size: 0; display: inline-block; width: 15px; height: 15px; vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: url(assets/brand/icons/play.svg) center / contain no-repeat;
          mask: url(assets/brand/icons/play.svg) center / contain no-repeat;
}
html body #zdAnimate.zd-active #zdAnimateIcon {
  -webkit-mask-image: url(assets/brand/icons/pause.svg);
          mask-image: url(assets/brand/icons/pause.svg);
}
html body #zdSpeed { display: inline-flex; align-items: center; gap: 6px; }
html body #zdSpeed::before {
  content: ''; width: 15px; height: 15px; background-color: currentColor;
  -webkit-mask: url(assets/brand/icons/speed.svg) center / contain no-repeat;
          mask: url(assets/brand/icons/speed.svg) center / contain no-repeat;
}
html body .zd-nav, html body .zd-tip { display: inline-flex; align-items: center; justify-content: center; }
html body .zd-animate, html body .zd-speed { font-family: 'Marcellus', Georgia, serif; letter-spacing: .12em; }

/* Entry screen — The-O */
html body .entry-door { background: radial-gradient(ellipse at center, #241e18 0%, #14110e 75%); }
html body .entry-logo { width: 300px; filter: none; margin-bottom: 26px; }
html body .entry-stats-l1, html body .entry-stats-l2 { color: #9a948a; }
html body .entry-tagline {
  font-family: 'Marcellus', Georgia, serif; font-weight: 400;
  font-size: 1.75rem; letter-spacing: .02em; color: #E2DCCB;
}
html body .entry-disclosure { color: #9a948a; }
html body .entry-buttons .btn {
  font-family: 'Marcellus', Georgia, serif; font-weight: 400;
  letter-spacing: .14em; border-radius: 6px;
}
html body .entry-buttons .btn-primary { background: #E2DCCB; color: #14110e; border-color: #E2DCCB; }
html body .entry-buttons .btn-primary:hover { background: #F4EFE3; }
html body .entry-buttons .btn-secondary { background: transparent; color: #E2DCCB; border-color: rgba(226,220,203,.45); }
html body .entry-buttons .btn-secondary:hover { border-color: #E2DCCB; background: rgba(226,220,203,.08); }

/* Sign-in box (built by gate.js) — The-O colours: charcoal + ivory, no gold, no navy */
#gaAuthModal .ga-auth-box { background: #201b16 !important; border-color: rgba(226,220,203,.35) !important; }
#gaAuthModal .ga-auth-title { color: #E2DCCB !important; font-family: 'Marcellus', Georgia, serif !important; font-weight: 400 !important; }
#gaAuthModal .ga-auth-tab { font-family: 'Marcellus', Georgia, serif !important; color: #9a948a !important; }
#gaAuthModal .ga-auth-tab.active { color: #E2DCCB !important; border-bottom-color: #E2DCCB !important; }
#gaAuthModal .ga-auth-close:hover { color: #E2DCCB !important; }
#gaAuthModal .ga-auth-or span { background: #201b16 !important; }
#gaAuthModal .ga-auth-input { background: #14110e !important; border-color: rgba(226,220,203,.2) !important; }
#gaAuthModal .ga-auth-input:focus { border-color: #E2DCCB !important; }
#gaAuthModal .ga-auth-submit { background: #E2DCCB !important; color: #14110e !important; font-family: 'Marcellus', Georgia, serif !important; font-weight: 400 !important; letter-spacing: .12em !important; }
#gaAuthModal .ga-auth-submit:hover { background: #F4EFE3 !important; }
#gaAuthModal .ga-auth-error { color: #e8a598 !important; }
#gaAuthModal .theo-auth-note { font-family: 'Source Sans 3', sans-serif; font-size: 13px; color: #9a948a; text-align: center; margin: -8px 0 18px; line-height: 1.4; }
.ga-hdr-btn, .ga-auth-tab, .ga-auth-submit, .one-correction-btn { font-family: 'Marcellus', Georgia, serif !important; }

/* ═══ 7 Nov 2026 (b) — information panel, shared symbols ═══ */
.to-ic-bookmark-on { --to-ic: url(assets/brand/icons/bookmark-on.svg); width: 14px; height: 14px; vertical-align: -2px; }
#favToggleBtn .to-ic { width: 18px; height: 18px; }

/* Time spine: BCE on years before year 1 */
body.tl-mounted #zoneC .tl-bce { font-size: 8px; font-weight: 600; letter-spacing: .04em; opacity: .8; }

/* Card credit links: ivory, underlined (not browser blue) */
body.tl-mounted #zoneC .info-panel a:not([class]),
body.tl-mounted #zoneC #infoScroll a:not([class]) { color: #E2DCCB; text-decoration: underline; text-decoration-color: rgba(226,220,203,.4); }

/* Entry screen: two lines only */
html body .entry-tagline { margin-top: 6px; }

/* INFORMATION panel — The-O: charcoal + ivory, Marcellus headings, no navy, no gold */
#information-panel { background: #201b16; border-left: 1px solid rgba(226,220,203,.22); color: #E2DCCB; }
#information-panel .info-sidebar { background: #14110e; border-right: 1px solid rgba(226,220,203,.12); }
#information-panel .info-sidebar-title { font-family: 'Marcellus', Georgia, serif; color: #E2DCCB; letter-spacing: .16em; }
#information-panel .info-nav-btn { font-family: 'Marcellus', Georgia, serif; font-size: 13.5px; letter-spacing: .04em; color: #9a948a; }
#information-panel .info-nav-btn:hover { color: #E2DCCB; }
#information-panel .info-nav-btn.active { color: #E2DCCB; border-left-color: #E2DCCB; background: rgba(226,220,203,.08); }
#information-panel .info-nav hr { border-top-color: rgba(226,220,203,.12); }
#information-panel .info-close:hover { color: #E2DCCB; }
#information-panel .info-content { font-family: 'Source Sans 3', sans-serif; font-size: 14.5px; line-height: 1.6; color: #E2DCCB; }
#information-panel .info-content h2 { font-family: 'Marcellus', Georgia, serif; font-size: 24px; letter-spacing: .04em; color: #E2DCCB; font-weight: 400; }
#information-panel .info-view-body h3 { font-family: 'Marcellus', Georgia, serif; font-size: 16px; font-weight: 400; letter-spacing: .06em; color: #E2DCCB; margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(226,220,203,.12); }
#information-panel .info-view-body p { color: #c9c3b4; }
#information-panel .info-view-body b, #information-panel .info-view-body strong { color: #E2DCCB; font-weight: 600; }
#information-panel .info-lede { color: #9a948a; font-size: 15px; }
#information-panel a { color: #E2DCCB; text-decoration: underline; text-decoration-color: rgba(226,220,203,.4); }
#information-panel .info-stats td { border-bottom-color: rgba(226,220,203,.1); color: #c9c3b4; }
#information-panel .info-stat { color: #E2DCCB; }
#information-panel .info-src { color: #9a948a; }

.isym-row { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 10px; }
.isym-s { flex: 0 0 150px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; min-height: 22px; text-align: right; }
.isym-t { flex: 1; min-width: 0; color: #c9c3b4; padding-top: 1px; }
.isym-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.isym-edge { display: inline-block; width: 4px; height: 22px; border-radius: 1px; }
.isym-box { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid rgba(226,220,203,.45); border-radius: 3px; color: #E2DCCB; }
.isym-ic { width: 18px; height: 18px; color: #E2DCCB; }
.isym-tri { color: rgba(226,220,203,.55); font-size: 15px; }
.isym-emo { font-size: 15px; }
.isym-opus { color: #E2DCCB; font-size: 15px; }
.isym-ext { color: #E2DCCB; font-size: 15px; }
.isym-yr { font: 600 13px/1 'Source Sans 3', sans-serif; white-space: nowrap; }
.isym-yr small { font-size: 9px; opacity: .8; }
.isym-line { flex: 0 0 auto; }
.isym-read { display: inline-block; font: 600 11px/1.3 'Marcellus', Georgia, serif; letter-spacing: .06em; color: #E2DCCB; border: 1px solid rgba(226,220,203,.6); border-radius: 2px; background: rgba(226,220,203,.08); padding: 1px 8px; white-space: nowrap; }
.isym-readtxt { font: 12px/1.2 'Crimson Pro', Georgia, serif; color: #E2DCCB; white-space: nowrap; }
.isym-nolink { font: italic 11px/1.2 'Crimson Pro', Georgia, serif; color: #6f685d; white-space: nowrap; }
.isym-tag { display: inline-block; font: 13px/1.2 'Marcellus', Georgia, serif; letter-spacing: .04em; padding: 3px 9px; border: 1px solid rgba(226,220,203,.3); border-radius: 2px; color: #E2DCCB; white-space: nowrap; }
.isym-chip { display: inline-block; font: 12px/1.2 'Source Sans 3', sans-serif; letter-spacing: .08em; padding: 4px 10px; border: 1px solid rgba(226,220,203,.35); border-radius: 14px; color: #E2DCCB; white-space: nowrap; }
.isym-small { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 11px; letter-spacing: .12em; color: #E2DCCB; }
.isym-logo { width: 22px; height: 22px; }
@media (max-width: 600px) { .isym-s { flex-basis: 96px; } }
html body .entry-inner { max-width: 880px; }

/* ═══ ERA BANDS (7 Nov 2026, Gold Ark style) — theo-eras.js ═══
   Right side only. Soft glow from the right; tag (name + years) at the top right, kept in view
   while its band scrolls by. World eras neutral ivory; one civilisation = pale civilisation colour. */
.te-band { position: absolute; right: 0; z-index: 0; pointer-events: auto; }
.te-tag { position: sticky; top: 8px; text-align: right; padding: 8px 10px 0 4px; pointer-events: none; }
.te-tag-name { font-family: 'Marcellus', Georgia, serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.25; }
.te-tag-yrs { font-family: 'Source Sans 3', sans-serif; font-size: 11px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
#tlScale .te-tag { padding: 6px 6px 0 4px; }
#tlScale .te-tag-name { font-size: 9.5px; letter-spacing: .1em; }
#tlScale .te-tag-yrs { font-size: 9.5px; }
#tlScale .te-band { z-index: auto; }
#bv-canvas .te-tag { padding-right: 24px; }

/* Era card */
#teCard {
  position: fixed; z-index: 10050; width: 300px; max-width: calc(100vw - 16px);
  background: #1f1a15; border: 1px solid rgba(226,220,203,.35); border-radius: 4px;
  padding: 12px 14px 12px; box-shadow: 0 8px 28px rgba(0,0,0,.55);
  font-family: 'Source Sans 3', sans-serif; color: #E2DCCB;
}
#teCard[hidden] { display: none; }
#teCard .te-card-x { position: absolute; top: 4px; right: 8px; background: none; border: 0; color: #9a948a; font-size: 18px; cursor: pointer; line-height: 1; }
#teCard .te-card-x:hover { color: #E2DCCB; }
#teCard .te-card-kind { font: 600 9px/1.2 'Source Sans 3', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #9a948a; margin-bottom: 4px; }
#teCard .te-card-name { font-family: 'Marcellus', Georgia, serif; font-size: 16px; line-height: 1.25; padding-right: 14px; }
#teCard .te-card-yrs { font-size: 12.5px; font-weight: 600; margin: 3px 0 8px; font-variant-numeric: tabular-nums; }
#teCard .te-card-sum { font-size: 13px; line-height: 1.45; color: #d6d0c1; }
#teCard .te-card-note { font-size: 12px; line-height: 1.4; color: #9a948a; margin-top: 7px; font-style: italic; }
#teCard .te-card-src { display: inline-block; margin-top: 9px; font-size: 12px; color: #E2DCCB; text-decoration: underline; text-decoration-color: rgba(226,220,203,.4); }

/* ═══ FIGURE CIVILISATIONS + FAITH BIO TABS (7 Nov 2026) ═══ */
body.tl-mounted #zoneC .i-civ-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 10px; }
body.tl-mounted #zoneC .i-civ-chip {
  font: 600 10.5px/1.2 'Source Sans 3', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid; border-radius: 10px; padding: 2px 8px; background: rgba(20,17,14,.4);
}
body.tl-mounted #zoneC .i-fb-src { margin-top: 8px; font-size: 11.5px; color: var(--ip-muted, #9a948a); font-style: italic; line-height: 1.45; }
body.tl-mounted #zoneC .i-fb-sum { margin-top: 14px; border-top: 1px solid rgba(226,220,203,.12); padding-top: 8px; }
body.tl-mounted #zoneC .i-fb-sum > summary {
  cursor: pointer; font: 600 11px/1.4 'Source Sans 3', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ip-muted, #9a948a); list-style: none;
}
body.tl-mounted #zoneC .i-fb-sum > summary::before { content: '▸ '; }
body.tl-mounted #zoneC .i-fb-sum[open] > summary::before { content: '▾ '; }
body.tl-mounted #zoneC .i-fb-sum > summary::-webkit-details-marker { display: none; }
/* 4- and 5-digit BCE years (e.g. 9970 BCE, 10000 BCE) fit the spine column */
body.tl-mounted #zoneC .tl-yr5 { font-size: 10.5px; letter-spacing: -.03em; }
body.tl-mounted #zoneC .tl-dob-chip, body.tl-mounted #zoneC .tl-dod-chip-silver { padding-left: 0; }

/* Entry screen (7 Nov 2026): line 2 = TOGETHER in the 11 ring colours of the logo (no gold) */
html body .entry-together {
  font-family: 'Marcellus', Georgia, serif; font-size: 2.1rem; letter-spacing: .32em; text-indent: .32em;
  display: block; width: fit-content; margin: 4px auto 2px; line-height: 1.2;
  background: linear-gradient(90deg, #80b68c, #88a6d3, #bea3d6, #e5a674, #e1928a, #80c6b6, #da96c8, #c6d17c, #aba8dc, #e9a0ad, #cbae90);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
html body .entry-tagline { white-space: normal; overflow-wrap: break-word; }
@media (max-width: 600px) {
  html body .entry-tagline { font-size: 1.35rem; }
  html body .entry-together { font-size: 1.6rem; letter-spacing: .26em; text-indent: .26em; }
}