/* =================================================================
   IFW GLOBAL PARTNERS — partners.css
   Extends the main site styles.css (same tokens, same components).
   Only adds: the login gate, playbook chapter-rail, reading
   progress, search overlay, and a few playbook block styles.
   ================================================================= */

/* ============ Login gate ============ */
.gate {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  position: relative; overflow: hidden; padding: var(--gut);
}
.gate__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.06); filter: saturate(1.02);
}
.gate__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 50% 30%, rgba(197,48,30,.18), transparent 68%),
    linear-gradient(180deg, rgba(14,11,9,.86), rgba(14,11,9,.78) 45%, rgba(14,11,9,.94));
}
.gate__card {
  position: relative; z-index: 2; width: min(100%, 430px);
  background: rgba(21,17,14,.74); backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.6rem, 5vw, 2.6rem);
  text-align: center; box-shadow: 0 40px 90px -40px rgba(0,0,0,.85);
  opacity: 0; transform: translateY(16px);
  animation: gateIn 1s var(--ease-out) .1s forwards;
}
@keyframes gateIn { to { opacity: 1; transform: none; } }
.gate__card .wordmark { font-size: 1.9rem; }
.gate__eyebrow { margin-top: 1.4rem; }
.gate__title {
  font-family: var(--serif); font-size: clamp(1.7rem, 4.6vw, 2.3rem);
  line-height: 1.05; margin-top: 1rem;
}
.gate__sub { margin-top: .8rem; color: var(--cream-2); font-size: .96rem; }
.gate__form { display: grid; gap: 1rem; margin-top: 1.8rem; text-align: left; }
.gate__form label {
  display: grid; gap: .4rem; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
}
.gate__form .pw { position: relative; }
.gate__form .pw input { width: 100%; }
.gate__pw-toggle {
  position: absolute; right: .5rem; bottom: .5rem; padding: .35rem .5rem;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-3);
}
.gate__pw-toggle:hover { color: var(--gold-2); }
.gate__status { min-height: 1.1rem; font-size: .9rem; text-align: center; }
.gate__status.is-error {
  color: var(--accent-ink); background: rgba(197,48,30,.16);
  border: 1px solid rgba(197,48,30,.4); border-radius: 2px; padding: .6rem .8rem;
  animation: gateShake .4s var(--ease-soft);
}
@keyframes gateShake { 0%,100%{transform:none} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.gate__foot {
  margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--cream-3);
}
.gate__foot a { color: var(--gold-2); }
.gate__lang { position: fixed; top: 1.2rem; right: 1.2rem; z-index: 3; }

/* tiny EN/ES segmented toggle (used on gate + nav) */
.lang-seg { display: inline-flex; gap: .1rem; padding: .2rem; border: 1px solid var(--line-2); border-radius: 999px; }
.lang-seg button {
  font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream-3); padding: .32rem .6rem; border-radius: 999px; transition: color .3s var(--ease-out), background .3s var(--ease-out);
}
.lang-seg button[aria-pressed="true"] { color: var(--cream); background: rgba(242,235,218,.1); }
.lang-seg button:hover { color: var(--cream); }

/* ============ Playbook nav utilities ============ */
.nav__util { display: none; align-items: center; gap: 1rem; }
@media (min-width: 960px) { .nav__util { display: flex; } }
.nav__logout {
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream-2); display: inline-flex; align-items: center; gap: .45rem; transition: color .3s var(--ease-out);
}
.nav__logout:hover { color: var(--accent-ink); }
.nav__search-btn { color: var(--cream-2); display: inline-flex; padding: .3rem; transition: color .3s var(--ease-out); }
.nav__search-btn:hover { color: var(--gold-2); }
.nav__search-btn svg { width: 18px; height: 18px; }

/* mobile menu: scrollable + denser for the long (19-chapter) playbook */
body[data-playbook] .menu {
  place-items: start center;
  align-content: start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 5rem 1.2rem 3rem;
}
body[data-playbook] .menu nav { gap: .45rem; }
body[data-playbook] .menu a { font-size: 1.4rem; line-height: 1.2; }

/* ============ Reading progress bar ============ */
.pb-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--gold-2));
  z-index: 101; transition: width .12s linear;
}

/* ============ Playbook hero ============ */
.pb-hero {
  position: relative; min-height: 78vh; min-height: 78svh; display: flex; align-items: flex-end;
  overflow: hidden; padding-top: clamp(6rem, 14vh, 9rem); padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.pb-hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transform: scale(1.06); animation: kenburns 12s linear forwards; }
.pb-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14,11,9,.5) 0%, rgba(14,11,9,.35) 40%, rgba(14,11,9,.92) 100%); }
.pb-hero__inner { position: relative; z-index: 2; width: 100%; }
.pb-hero__edition { margin-top: 1.1rem; font-size: .9rem; color: var(--cream-2); }
.pb-hero__edition strong { color: var(--gold-2); font-weight: 600; }

/* ============ Chapter rail (desktop dot-index, scroll-spy) ============ */
.pb-rail { position: fixed; top: 50%; left: clamp(1rem, 2vw, 1.8rem); transform: translateY(-50%); z-index: 90; display: none; }
@media (min-width: 1200px) { .pb-rail { display: block; } }
.pb-rail ol { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.pb-rail a { display: inline-flex; align-items: center; gap: .7rem; padding: .15rem 0; color: var(--cream-3); }
.pb-rail .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); flex: none; transition: background .35s var(--ease-out), transform .35s var(--ease-out); }
.pb-rail .lab { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateX(-6px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); white-space: nowrap; }
.pb-rail a:hover .lab { opacity: 1; transform: none; color: var(--cream-2); }
.pb-rail a.is-active .dot { background: var(--accent); transform: scale(1.35); box-shadow: 0 0 0 4px rgba(197,48,30,.18); }
.pb-rail a.is-active .lab { opacity: 1; transform: none; color: var(--cream); }

/* ============ Playbook sections ============ */
.pb-section { scroll-margin-top: 90px; }
.pb-section__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); }
.pb-section__media img { width: 100%; height: 100%; object-fit: cover; }
.pb-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 960px) { .pb-split { grid-template-columns: 1fr 1.1fr; } .pb-split--rev .pb-section__media { order: 2; } }

.pb-prose { margin-top: 1.6rem; max-width: 42rem; }
.pb-prose p { color: var(--cream-2); margin-top: 1.2rem; font-size: 1.05rem; }
.pb-prose p:first-child { margin-top: 0; }
.pb-prose strong { color: var(--cream); font-weight: 600; }
.pb-prose em { font-style: italic; color: var(--gold-2); }
.pb-prose h3 { font-family: var(--serif); font-size: 1.5rem; margin-top: 2rem; }
.pb-prose ul { margin-top: 1.1rem; padding-left: 1.2rem; }
.pb-prose li { margin-top: .5rem; color: var(--cream-2); }
.pb-prose li::marker { color: var(--accent); }
.pb-prose a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.pb-prose code { font-family: ui-monospace, Menlo, monospace; font-size: .85em; color: var(--gold-2); background: var(--bg-3); padding: .1em .4em; border-radius: 3px; }

/* checklist */
.pb-checklist { margin-top: 2rem; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 2rem); }
.pb-checklist h4 { font-family: var(--serif); font-size: 1.25rem; margin-bottom: 1.1rem; }
.pb-checklist ul { list-style: none; display: grid; gap: .8rem; }
.pb-checklist li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .7rem; color: var(--cream-2); font-size: .98rem; }
.pb-checklist li .tick { color: var(--gold); display: inline-flex; }
.pb-checklist li .tick svg { width: 17px; height: 17px; }

/* callout (mirrors site concept__og) */
.pb-callout { margin-top: 2rem; font-size: 1rem; color: var(--cream-2); background: var(--bg-3); border: 1px solid var(--line); border-left: 2px solid var(--gold); border-radius: var(--radius); padding: 1.2rem 1.4rem; max-width: 46rem; }
.pb-callout .tag { display: inline-block; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--gold); margin-right: .6rem; }

/* big pull-quote */
.pb-quote { margin: clamp(2.5rem,6vw,4rem) auto 0; max-width: 40rem; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.25; color: var(--cream); }
.pb-quote::before { content: ""; display: block; width: 48px; height: 1px; background: var(--accent); margin: 0 auto 1.6rem; }

/* ============ Resources (Spotify embeds + link cards) ============ */
.pb-spotify { margin-top: 1.8rem; }
.pb-spotify__label { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .7rem; }
.pb-spotify iframe { border-radius: 12px; display: block; }
.pb-playlists { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin-top: 2rem; }
@media (min-width: 760px) { .pb-playlists { grid-template-columns: repeat(2, 1fr); } }
.pb-playlist__label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); margin-bottom: .55rem; }
.pb-playlist iframe { border-radius: 12px; display: block; }
.pb-resources { display: grid; grid-template-columns: 1fr; gap: 1.2rem; margin-top: 2.2rem; }
@media (min-width: 640px) { .pb-resources { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pb-resources { grid-template-columns: repeat(3, 1fr); } }
.pb-resource {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .55s var(--ease-out), border-color .4s var(--ease-out), box-shadow .55s var(--ease-out);
}
.pb-resource:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: 0 30px 60px -34px rgba(0,0,0,.85); }
.pb-resource__media { aspect-ratio: 16/10; overflow: hidden; }
.pb-resource__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.pb-resource:hover .pb-resource__media img { transform: scale(1.06); }
.pb-resource__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.pb-resource__body h3 { font-family: var(--serif); font-size: 1.3rem; }
.pb-resource__body p { font-size: .92rem; color: var(--cream-3); flex: 1; }
.pb-resource__cta { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); display: inline-flex; align-items: center; gap: .4rem; }
.pb-resource__cta i { font-style: normal; transition: transform .4s var(--ease-out); }
.pb-resource:hover .pb-resource__cta i { transform: translateX(5px); }

/* run-of-show timeline 'time' label (extends site .tl-step) */
.tl-step__time { display: inline-block; margin-left: .6rem; font-size: .72rem; font-style: italic; color: var(--gold-2); font-family: var(--serif); }

/* stats: reuse site .stats/.stat — add suffix accent */
.stat .n .suf { color: var(--accent); font-style: normal; }

/* ============ Search overlay ============ */
.pb-search { position: fixed; inset: 0; z-index: 1200; display: none; padding: clamp(4rem,12vh,8rem) var(--gut) 2rem; background: rgba(8,6,5,.92); backdrop-filter: blur(8px); }
.pb-search.is-open { display: block; }
.pb-search__box { max-width: 620px; margin: 0 auto; }
.pb-search__input { width: 100%; font-family: var(--serif); font-size: clamp(1.4rem,4vw,2rem); color: var(--cream); background: transparent; border: 0; border-bottom: 1px solid var(--line-2); padding: .6rem .2rem; }
.pb-search__input:focus { outline: none; border-bottom-color: var(--gold); }
.pb-search__input::placeholder { color: var(--cream-3); }
.pb-search__results { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .3rem; max-height: 56vh; overflow-y: auto; }
.pb-search__hit { display: block; padding: .9rem 1rem; border: 1px solid transparent; border-radius: var(--radius); }
.pb-search__hit:hover, .pb-search__hit:focus-visible { background: var(--bg-3); border-color: var(--line); outline: none; }
.pb-search__hit .k { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.pb-search__hit .t { font-family: var(--serif); font-size: 1.2rem; color: var(--cream); margin-top: .2rem; }
.pb-search__hit .s { font-size: .9rem; color: var(--cream-3); margin-top: .25rem; }
.pb-search__hit mark { background: rgba(196,154,91,.3); color: var(--cream); border-radius: 2px; }
.pb-search__empty { color: var(--cream-3); font-style: italic; margin-top: 1.4rem; }
.pb-search__close { position: absolute; top: 1.4rem; right: 1.4rem; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; color: var(--cream); font-size: 1.3rem; }
.pb-search__close:hover { background: rgba(242,235,218,.1); }
.pb-search__hint { text-align: center; color: var(--cream-3); font-size: .8rem; margin-top: 1rem; }

/* draft badge */
.pb-badge { display: inline-block; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--gold); border: 1px solid var(--line-2); border-radius: 999px; padding: .25rem .6rem; margin-left: .7rem; vertical-align: middle; }

/* updated line */
.pb-updated { margin-top: 1.4rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-3); }