/* ==========================================================================
   Conversion Club — the Resources tab.

   Adapted from the "Conversion Club Resources" design handoff, rebuilt on the
   site's own tokens (styles.css) so the library looks like the rest of the
   club rather than a bolted-on page. Loaded only by /account.

   The locked state is the one piece with no equivalent in the handoff: a
   blurred ghost card standing in for content the server never sent.

   The handoff laid the seven chapters out as one continuous page. That came to
   roughly 9,700px, so it reads here as a side-tabbed handbook instead: a rail
   of chapters down the left, one chapter in the main column.
   ========================================================================== */

.ccr {
  margin-top: 4px;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.cc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------- the rail --
   Sticky, so the contents page stays with you through a long chapter. The
   offset clears the site's own sticky header. */
.ccr-side {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* Deliberately not a card. The header used to be a boxed title, a blurb and
   the plan line: 271px, which pushed chapters 06 and 07 off the bottom of the
   rail on any laptop shorter than 900px. A label and one line of plan is
   about 76px, so all seven fit down to a 720px window. */
.ccr-side__hd { padding: 0 2px; }
.ccr-side__eyebrow {
  display: block; margin: 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--slate-2);
}
.ccr-plan {
  margin: 9px 0 0; font-size: 12.5px; line-height: 17px; font-weight: 500;
  color: var(--cyan-text);
  background: rgba(9,197,237,0.07); border: 1px solid rgba(9,197,237,0.22);
  border-radius: 8px; padding: 8px 11px;
}

.ccr-sidenav { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.ccr-sitem {
  font: inherit; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: baseline; gap: 10px;
  padding: 11px 13px; border-radius: 11px;
  background: none; border: 1px solid transparent; color: var(--slate);
  transition: background .15s, border-color .15s, color .15s;
}
.ccr-sitem:hover { background: var(--paper); border-color: var(--border); color: var(--ink); }
.ccr-sitem:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.ccr-sitem.is-on {
  background: var(--paper); border-color: var(--border); color: var(--ink);
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(30,34,53,.04), 0 8px 24px -12px rgba(30,34,53,.06));
}
.ccr-sitem__n {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  color: var(--slate-3); font-variant-numeric: tabular-nums;
}
.ccr-sitem.is-on .ccr-sitem__n { color: var(--coral); }
.ccr-sitem__tx { min-width: 0; }
.ccr-sitem__t { display: block; font-size: 14.5px; font-weight: 600; line-height: 19px; }
.ccr-sitem__s {
  font-size: 12px; line-height: 17px; color: var(--slate-2); margin-top: 2px;
  /* Two lines of the chapter's own promise, then stop: the rail is a contents
     page, not a summary. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ccr-sitem__lk { display: inline-flex; color: var(--slate-3); align-self: center; }
.ccr-sitem.is-on .ccr-sitem__lk { color: var(--slate-2); }

/* The play library's categories, nested under its own rail entry. */
.ccr-subnav {
  display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 6px 19px; padding-left: 12px;
  border-left: 1px solid var(--border);
}
.ccr-subitem {
  font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 11px; border-radius: 8px;
  background: none; border: 0; color: var(--slate);
  transition: background .15s, color .15s;
}
.ccr-subitem:hover { background: var(--paper); color: var(--ink); }
.ccr-subitem:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.ccr-subitem.is-on { color: var(--ink); font-weight: 600; background: var(--paper); }
.ccr-subitem .ct {
  font-size: 11px; font-weight: 600; color: var(--slate-2);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- bands --
   scroll-margin keeps a chapter jump clear of the site's sticky header,
   which otherwise sits over the heading you just asked to see. */
.ccr-band { padding: 4px 0; scroll-margin-top: 96px; }
.ccr-head { max-width: 760px; }
.ccr-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--slate); display: inline-flex; align-items: center; gap: 11px;
}
.ccr-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--coral); border-radius: 2px; }
.ccr-title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(23px, 2.6vw, 30px);
  letter-spacing: -0.025em; line-height: 1.14; margin: 14px 0 0;
}
.ccr-sub { margin-top: 12px; font-size: 16.5px; line-height: 26px; color: var(--slate); text-wrap: pretty; }

/* --------------------------------------------------------------- funnel -- */
.ccr-funnel { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 34px; margin-top: 30px; align-items: start; }
.ccr-spine { position: relative; display: flex; flex-direction: column; gap: 14px; }
.ccr-track {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(9,197,237,.35), rgba(103,249,169,.35));
}
.ccr-stcard {
  position: relative; z-index: 2; background: var(--paper); border: 1px solid var(--border);
  border-radius: 14px; padding: 15px 17px; width: min(320px, 92%); margin: 0 auto;
}
.ccr-stk { font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--slate-2); }
.ccr-stt { font-size: 15px; font-weight: 600; margin-top: 2px; }
.ccr-serp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.ccr-serp span { height: 32px; border-radius: 6px; background: var(--canvas); border: 1px solid var(--border-soft); }
.ccr-serp span.is-you {
  background: linear-gradient(135deg, rgba(9,197,237,.16), rgba(103,249,169,.20));
  border: 1.5px solid var(--cyan);
}
.ccr-pdp { display: grid; grid-template-columns: 44px 1fr; gap: 10px; margin-top: 12px; align-items: start; }
.ccr-pdp .ph {
  height: 44px; border-radius: 6px; border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(9,197,237,.16), rgba(103,249,169,.20));
}
.ccr-pdp .ln { display: block; height: 7px; border-radius: 99px; background: var(--canvas); border: 1px solid var(--border-soft); margin-bottom: 6px; }
.ccr-pdp .ln.s { width: 62%; }
.ccr-gate { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; justify-content: center; min-height: 42px; }
.ccr-gate::before, .ccr-gate::after { content: ""; flex: 1; border-top: 2px dashed var(--slate-3); }
.ccr-gpill {
  flex: none; display: inline-flex; align-items: center; gap: 8px; background: var(--ink);
  color: #fff; border-radius: 99px; padding: 9px 15px; font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}
.ccr-gpill .q { color: var(--green); letter-spacing: .02em; text-transform: none; font-weight: 500; }
.ccr-stend {
  position: relative; z-index: 2; margin: 0 auto; display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1.5px solid var(--green-deep); color: var(--ink);
  border-radius: 99px; padding: 11px 20px; font-weight: 600; font-size: 15px;
}
.ccr-stend .ck {
  width: 22px; height: 22px; border-radius: 99px; background: var(--grad);
  display: flex; align-items: center; justify-content: center; flex: none;
}

.ccr-lever {
  background: var(--paper); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px 26px;
}
.ccr-lever + .ccr-lever { margin-top: 18px; }
.ccr-lever h4 { font-weight: 600; font-size: 19px; letter-spacing: -0.015em; margin: 0; }
.ccr-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; border-radius: 5px; padding: 4px 9px;
  margin-right: 10px; vertical-align: 3px;
}
.ccr-tag--cyan  { background: var(--cyan-deep); }
.ccr-tag--green { background: var(--green-deep); }
.ccr-levers { list-style: none; margin: 15px 0 0; padding: 0; display: grid; gap: 9px; }
.ccr-levers li { display: grid; grid-template-columns: 24px 1fr; gap: 11px; font-size: 15px; color: var(--ink-2); line-height: 1.45; align-items: baseline; }
.ccr-levers .rk { font-size: 11px; font-weight: 700; color: var(--slate-3); font-variant-numeric: tabular-nums; }
.ccr-levers b { font-weight: 600; color: var(--ink); }
.ccr-meas { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--slate-2); font-weight: 500; }
.ccr-meas b { color: var(--slate); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; margin-right: 8px; }

/* ------------------------------------------------------------- diagnose -- */
.ccr-diag { background: var(--ink); border-radius: 20px; padding: 34px 36px; color: #fff; position: relative; overflow: hidden; margin-top: 28px; }
.ccr-diag__glow { position: absolute; inset: 0; background: radial-gradient(620px 380px at 92% 118%, rgba(103,249,169,.18), transparent 62%); pointer-events: none; }
.ccr-diag h4 { position: relative; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin: 0; }
.ccr-diag__h { position: relative; font-size: 14.5px; color: var(--on-dark-muted); margin: 9px 0 0; max-width: 560px; }
.ccr-symps { position: relative; display: flex; gap: 9px; flex-wrap: wrap; margin-top: 22px; }
.ccr-symp {
  font-family: inherit; font-size: 13.5px; font-weight: 500; color: #D8DAE1;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: 99px; padding: 10px 16px; cursor: pointer; transition: background .15s, color .15s;
}
.ccr-symp:hover { background: rgba(255,255,255,.13); }
.ccr-symp:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ccr-symp.is-on { background: var(--grad); border-color: transparent; color: var(--ink); font-weight: 600; }
.ccr-diag__panel { position: relative; margin-top: 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 24px 26px; }
.ccr-diag__row { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1.2fr; gap: 8px; align-items: start; }
.ccr-dc .dk { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-3); }
.ccr-dc .dv { font-size: 15.5px; line-height: 1.45; margin-top: 7px; color: #F2F3F6; }
.ccr-dc .dv b { color: #fff; font-weight: 600; }
.ccr-darr { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--green); font-size: 18px; padding-top: 14px; }
.ccr-plays { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ccr-plays .pl { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-3); margin-right: 2px; }
.ccr-pchip {
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--green);
  background: rgba(103,249,169,.10); border: 1px solid rgba(103,249,169,.35);
  border-radius: 7px; padding: 7px 12px; cursor: pointer; transition: background .15s;
}
.ccr-pchip:hover { background: rgba(103,249,169,.20); }
.ccr-pchip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ccr-fade { animation: ccrFade .35s ease both; }
@keyframes ccrFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------- principles -- */
.ccr-pringrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.ccr-prin { background: var(--paper); border: 1px solid var(--border); border-radius: 16px; padding: 26px; }
.ccr-prin .pn {
  font-weight: 800; font-size: 15px; background: var(--grad-h);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ccr-prin h4 { font-weight: 600; font-size: 19px; letter-spacing: -0.015em; margin: 10px 0 8px; }
.ccr-prin p { margin: 0; font-size: 15px; color: var(--slate); line-height: 22px; }

/* ------------------------------------------------------------- research -- */
.ccr-srcgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.ccr-src { background: var(--paper); border: 1px solid var(--border); border-radius: 14px; padding: 21px 23px; }
.ccr-src .sn {
  width: 34px; height: 34px; border-radius: 9px; background: var(--grad); color: #fff;
  font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 13px;
}
.ccr-src h4 { font-weight: 600; font-size: 17px; margin: 0 0 6px; letter-spacing: -0.01em; }
.ccr-src p { margin: 0; font-size: 14px; color: var(--slate); line-height: 20px; }

.ccr-brief { background: var(--ink); border-radius: 16px; padding: 30px 32px; color: #fff; position: relative; overflow: hidden; margin-top: 18px; }
.ccr-brief__glow { position: absolute; inset: 0; background: radial-gradient(440px 300px at 90% 115%, rgba(9,197,237,.20), transparent 62%); }
.ccr-brief h4 { position: relative; font-weight: 700; font-size: 19px; letter-spacing: -0.015em; margin: 0; }
.ccr-brief .bq { position: relative; list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.ccr-brief .bq li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 15px; color: #D8DAE1; line-height: 1.45; }
.ccr-brief .bq .qn { font-weight: 700; font-size: 12px; color: var(--green); padding-top: 2px; }
.ccr-brief .bnote { position: relative; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: var(--on-dark-faint); line-height: 1.5; }

.ccr-rules { margin-top: 20px; background: var(--paper); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.ccr-rules .rh { padding: 18px 24px; border-bottom: 1px solid var(--border-soft); font-weight: 600; font-size: 15.5px; }
.ccr-rule { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 10px; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--border-soft); font-size: 14.5px; }
.ccr-rule:last-child { border-bottom: 0; }
.ccr-rule .sig { color: var(--ink-2); }
.ccr-rule .sig b { font-weight: 600; color: var(--ink); }
.ccr-rule .act { color: var(--slate); }
.ccr-rule .act b { color: var(--coral-deep); font-weight: 600; }
.ccr-rule .ra { text-align: center; color: var(--green-deep); font-weight: 700; }

/* ------------------------------------------------------------ playbooks -- */
.ccr-pbcard { background: var(--paper); border: 1px solid var(--border); border-radius: 18px; padding: 30px 32px; margin-top: 26px; }
.ccr-pbjob {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--cyan-text);
  background: rgba(9,197,237,.08); border: 1px solid rgba(9,197,237,.25);
  border-radius: 7px; padding: 8px 13px; margin-bottom: 20px;
}
.ccr-pbgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.ccr-pbh { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--slate-2); margin: 0 0 13px; }
.ccr-pbh--gap { margin-top: 24px; }
.ccr-ck { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ccr-ck li { display: grid; grid-template-columns: 22px 1fr; gap: 11px; font-size: 15px; color: var(--ink-2); line-height: 1.4; align-items: start; }
.ccr-ck .ck { width: 20px; height: 20px; border-radius: 99px; background: var(--grad); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ccr-ck b { font-weight: 600; color: var(--ink); }
.ccr-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ccr-chip {
  /* flex:none used to come from the old chapter rail, which shared this class
     name. The rail is gone; keep the chips from being squeezed. */
  flex: none;
  font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--canvas);
  border: 1px solid var(--border); border-radius: 7px; padding: 8px 13px;
}
.ccr-chip--bad { color: var(--coral-deep); background: var(--coral-soft); border-color: #F5C4BC; }
.ccr-chip--grad {
  background: linear-gradient(135deg, rgba(9,197,237,.10), rgba(103,249,169,.14));
  border-color: rgba(9,197,237,.30); color: var(--cyan-text);
}
.ccr-passnote { margin-top: 15px; font-size: 13.5px; color: var(--slate); background: var(--canvas); border-radius: 9px; padding: 12px 15px; line-height: 1.55; }
.ccr-passnote--gap { margin-top: 20px; }
.ccr-passnote b { color: var(--ink); font-weight: 600; }
.ccr-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
.ccr-flow .fs { font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--paper); border: 1px solid var(--border); border-radius: 99px; padding: 9px 14px; }
.ccr-flow .fa { color: var(--slate-3); font-weight: 700; }

.ccr-slotbar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 4px 0 22px; }
.ccr-slot { border-radius: 10px; border: 1px solid var(--border); background: var(--canvas); padding: 12px 6px 10px; text-align: center; }
.ccr-slot .sN { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.ccr-slot .sL { font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--slate-2); margin-top: 3px; line-height: 1.3; }
.ccr-slot.is-hot { background: linear-gradient(135deg, rgba(9,197,237,.14), rgba(103,249,169,.18)); border-color: var(--cyan); }
.ccr-slot.is-hot .sL { color: var(--cyan-text); }
.ccr-slot.is-close { background: var(--coral-soft); border-color: var(--coral); }
.ccr-slot.is-close .sL { color: var(--coral-deep); }
.ccr-typelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: ccrtp; }
.ccr-typelist li { counter-increment: ccrtp; display: grid; grid-template-columns: 24px 1fr; gap: 11px; font-size: 15px; color: var(--ink-2); align-items: baseline; }
.ccr-typelist li::before { content: counter(ccrtp); font-size: 11px; font-weight: 700; color: var(--slate-3); font-variant-numeric: tabular-nums; }
.ccr-typelist b { font-weight: 600; color: var(--ink); }

.ccr-aplus { display: grid; gap: 14px; }
.ccr-half { border-radius: 14px; padding: 22px 24px; border: 1px solid var(--border); }
.ccr-half--top { background: linear-gradient(135deg, rgba(9,197,237,.10), rgba(103,249,169,.14)); border-color: rgba(9,197,237,.30); }
.ccr-half--bot { background: var(--canvas); }
.ccr-half .ah { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ccr-half .ah b { font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; }
.ccr-half .ah span { font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--slate-2); }
.ccr-half p { margin: 8px 0 0; font-size: 14.5px; color: var(--slate); line-height: 21px; }

.ccr-mistakes { margin-top: 24px; background: var(--paper); border: 1px solid var(--border); border-radius: 18px; padding: 30px 32px; }
.ccr-mistakes h4 { font-weight: 700; font-size: 21px; letter-spacing: -0.02em; margin: 0 0 6px; }
.ccr-mistakes .ms { font-size: 15px; color: var(--slate); margin: 0 0 20px; }
.ccr-mlist { columns: 2; column-gap: 40px; margin: 0; padding: 0; list-style: none; counter-reset: ccrmk; }
.ccr-mlist li { counter-increment: ccrmk; break-inside: avoid; display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 9px 0; font-size: 15px; color: var(--ink-2); align-items: baseline; }
.ccr-mlist li::before { content: counter(ccrmk, decimal-leading-zero); font-weight: 700; font-size: 12px; color: var(--coral); }
.ccr-mlist b { font-weight: 600; color: var(--ink); }

/* -------------------------------------------------------------- testing -- */
.ccr-testgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.ccr-trule { background: var(--paper); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.ccr-trule .tn {
  font-weight: 800; font-size: 30px; letter-spacing: -0.03em; line-height: 1;
  background: var(--grad-h); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ccr-trule h4 { font-weight: 600; font-size: 16.5px; margin: 13px 0 7px; letter-spacing: -0.01em; }
.ccr-trule p { margin: 0; font-size: 14px; color: var(--slate); line-height: 20px; }

.ccr-meter { margin-top: 26px; background: var(--paper); border: 1px solid var(--border); border-radius: 18px; padding: 30px 34px 26px; }
.ccr-meter .mh { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.ccr-meter .mh h4 { font-weight: 600; font-size: 18px; margin: 0; letter-spacing: -0.01em; }
.ccr-meter .mh span { font-size: 13px; color: var(--slate-2); }
.ccr-meter__note { margin: 40px 0 0; font-size: 12.5px; color: var(--slate-2); }
.ccr-mtrack { position: relative; margin-top: 46px; height: 14px; border-radius: 99px; display: flex; }
.ccr-mz { height: 100%; position: relative; }
.ccr-mz:first-of-type { border-radius: 99px 0 0 99px; }
.ccr-mz:last-of-type { border-radius: 0 99px 99px 0; }
.ccr-mz--grey  { background: #D6D8DE; }
.ccr-mz--coral { background: var(--coral); }
.ccr-mz--grad  { background: linear-gradient(90deg, #09C5ED, #67F9A9); }
.ccr-mz .zl { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--slate-2); white-space: nowrap; }
.ccr-mtick { position: absolute; top: -24px; transform: translateX(-50%); font-size: 11.5px; font-weight: 700; color: var(--slate); font-variant-numeric: tabular-nums; }
.ccr-mtick::after { content: ""; position: absolute; left: 50%; top: 17px; width: 1.5px; height: 22px; background: var(--slate-3); }
.ccr-needle { position: absolute; top: -9px; left: 0; width: 4px; height: 32px; border-radius: 99px; background: var(--ink); transform: translateX(-50%); transition: left 1.4s cubic-bezier(.3,.9,.3,1); }
.ccr-needle .nb { position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; border-radius: 7px; padding: 6px 11px; white-space: nowrap; }
.ccr-needle .nb b { color: var(--green); font-weight: 700; }
.ccr-needle .nb::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .ccr-needle { transition: none; } }

/* -------------------------------------------------------------- library -- */
.ccr-ltools { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.ccr-ltool { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--paper); border: 1px solid var(--border); border-radius: 99px; padding: 9px 15px; }
.ccr-ltool .d { width: 8px; height: 8px; border-radius: 99px; }
/* The category filter is in the rail, so this row is just "what am I looking
   at" plus the search box. */
.ccr-libctl {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  margin-top: 24px; flex-wrap: wrap;
}
.ccr-libcount {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.ccr-srch { display: block; }
.ccr-search {
  font-family: inherit; font-size: 14.5px; padding: 11px 15px; border: 1px solid #D0D5DD;
  border-radius: 8px; color: var(--ink); width: 250px; background: var(--paper);
}
.ccr-search::placeholder { color: var(--slate-3); }
.ccr-search:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--focus-ring); }
.ccr-libgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 22px; }
.ccr-libempty { margin-top: 22px; text-align: center; color: var(--slate-2); font-size: 15px; padding: 36px 0; }
.ccr-play {
  background: var(--paper); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 22px; display: flex; flex-direction: column; position: relative;
}
.ccr-play .pcat { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-2); }
.ccr-play .pcat .d { width: 7px; height: 7px; border-radius: 99px; background: var(--pc); }
.ccr-play h4 { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; margin: 10px 0 6px; }
.ccr-play p { margin: 0 0 15px; font-size: 13.5px; color: var(--slate); line-height: 19.5px; }
.ccr-play .ptools { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.ccr-play .pt { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; color: var(--slate); background: var(--canvas); border-radius: 5px; padding: 5px 9px; }

/* ---------------------------------------------------------- locked state --
   A blurred card here is not a curtain over content the browser already has.
   cc_resources() withheld the body, so what blurs is a placeholder. */
.ccr-play.is-locked { background: var(--canvas); border-style: dashed; }
.ccr-play.is-locked h4 { color: var(--ink-2); }
.ccr-play__lock {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate-2);
}
.ccr-ghostwrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ccr-ghost {
  background: var(--paper); border: 1px dashed var(--border); border-radius: 14px;
  padding: 15px 18px; filter: blur(2.5px); opacity: .72; user-select: none;
}
.ccr-ghost__title { font-weight: 600; font-size: 15px; color: var(--ink-2); margin-bottom: 9px; }
.ccr-ghost__lines { display: grid; gap: 6px; }
.ccr-ghost__lines span { display: block; height: 8px; border-radius: 99px; background: var(--border-soft); }
.ccr-ghost__lines span.s { width: 58%; }
.ccr-play.is-locked .ccr-ghost__lines { margin: 4px 0 14px; filter: blur(2.5px); }
@media (max-width: 720px) { .ccr-ghostwrap { grid-template-columns: 1fr; } }

.ccr-unlock {
  margin-top: 22px; position: relative; background: var(--ink); color: #fff;
  border-radius: 18px; padding: 30px 32px; overflow: hidden;
  background-image: radial-gradient(600px 340px at 88% 120%, rgba(103,249,169,.20), transparent 62%);
}
.ccr-unlock__badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green);
  background: rgba(103,249,169,.10); border: 1px solid rgba(103,249,169,.35);
  border-radius: 7px; padding: 7px 12px;
}
.ccr-unlock h4 { font-weight: 700; font-size: 21px; letter-spacing: -0.02em; margin: 16px 0 0; }
.ccr-unlock p { margin: 10px 0 0; font-size: 15px; line-height: 23px; color: var(--on-dark-muted); max-width: 620px; }
.ccr-unlock__act { margin-top: 20px; }

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 1180px) {
  .ccr { grid-template-columns: 240px minmax(0, 1fr); gap: 26px; }
  .ccr-libgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1040px) {
  .ccr-testgrid { grid-template-columns: 1fr 1fr; }
}

/* Below this the rail cannot pay for its own column, so the same buttons wrap
   into pills above the chapter. They wrap rather than scroll sideways so all
   seven chapters stay countable, and the categories drop onto their own line
   under them. Same DOM, same state: still exactly one place to change chapter
   or category. */
@media (max-width: 960px) {
  .ccr { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ccr-side { position: static; max-height: none; overflow: visible; }
  .ccr-sidenav { flex-direction: row; flex-wrap: wrap; gap: 7px; }
  .ccr-sitem {
    flex: none; grid-template-columns: auto auto auto; align-items: center;
    gap: 8px; padding: 9px 14px; border-radius: 99px;
    background: var(--paper); border-color: var(--border);
  }
  .ccr-sitem__s { display: none; }
  .ccr-sitem__t { font-size: 13.5px; white-space: nowrap; }
  .ccr-sitem.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  /* order pushes it past the chapter pills whatever order they wrapped in. */
  .ccr-subnav {
    order: 2; flex: 1 0 100%;
    flex-direction: row; flex-wrap: wrap; gap: 7px;
    margin: 3px 0 0; padding: 12px 0 0; border-left: 0;
    border-top: 1px solid var(--border);
  }
  .ccr-subitem {
    flex: none; white-space: nowrap; border-radius: 99px; padding: 8px 13px;
    background: var(--paper); border: 1px solid var(--border);
  }
  .ccr-subitem.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
  .ccr-subitem.is-on .ct { color: var(--green); }
}
@media (max-width: 920px) {
  .ccr-funnel, .ccr-srcgrid { grid-template-columns: 1fr; }
  .ccr-diag__row { grid-template-columns: 1fr; }
  .ccr-darr { display: none; }
  .ccr-dc + .ccr-dc { margin-top: 16px; }
  .ccr-pringrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .ccr-pringrid, .ccr-pbgrid { grid-template-columns: 1fr; }
  .ccr-mlist { columns: 1; }
  .ccr-slotbar { grid-template-columns: repeat(4, 1fr); }
  .ccr-pbcard, .ccr-mistakes, .ccr-unlock { padding: 22px 20px; }
  .ccr-diag { padding: 26px 20px; }
  .ccr-search { width: 100%; }
  .ccr-srch { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .ccr-testgrid, .ccr-libgrid { grid-template-columns: 1fr; }
  .ccr-rule { grid-template-columns: 1fr; gap: 4px; padding: 13px 18px; }
  .ccr-rule .ra { display: none; }
  .ccr-meter { padding: 24px 18px 22px; }
}