/* ============================================================
   POP LAYER  —  load AFTER tokens.css
   ------------------------------------------------------------
   The ".2" variants. Kristi's rule stands: no filled section
   backgrounds. So colour escalates as STROKE, not as area —
   container outlines, card outlines, outlined buttons, coloured
   rules. White ground survives; the page gains voltage.

   Button hover borrows the mechanic from the 21st.dev
   "Interactive Hover Button": a small colour dot that blooms
   to fill the button, with the label sliding through.
   ============================================================ */

:root{
  --pop-1:var(--jade);
  --pop-2:var(--coral);
  /* Structure is ink, not jade. Colour still arrives through marks, chips,
     buttons and imagery — just not through the edges of things.
     --pop-edge : saturated container borders and section rules
     --pop-line : the quiet hairlines, now neutral rather than jade-tinted */
  --pop-edge:var(--ink);
  --pop-line:var(--rule);
  --pop-line-2:#F2C9C1;
}

/* --- rules and dividers pick up colour --------------------- */
.hr,
.contents-head,
.sec-head{border-color:var(--pop-line)}
.contents-head{border-bottom-color:var(--pop-edge) !important}
hr.hr{background:var(--pop-line)}

/* --- section containers get an outline --------------------- */
.thread-box,
.plate-2,
.binder-body,
.ladder,
.rungs,
.guided{border-color:var(--pop-edge)}
.plate-2 > div + div{border-left-color:var(--pop-line)}
.ladder .rung,
.rungs .rg{border-right-color:var(--pop-line)}

.against{border-top-color:var(--pop-edge);border-bottom-color:var(--pop-edge)}
.against-col + .against-col{border-left-color:var(--pop-line)}

.masthead{border-bottom-color:var(--pop-edge)}
.spread{border-bottom-color:var(--pop-line)}
.spread-copy{border-left-color:var(--pop-line)}

.pull{border-top-color:var(--pop-line);border-bottom-color:var(--pop-line)}
.strip{border-top-color:var(--pop-edge);border-bottom-color:var(--pop-edge)}

/* --- table ------------------------------------------------- */
.ptable th{border-bottom-color:var(--pop-edge)}
.ptable td{border-bottom-color:var(--pop-line)}
.ptable tr:last-child td{border-bottom-color:var(--pop-edge)}

/* --- product / content cards outline, keyed per tab -------- */
.card,
.page,
.step-art{border-color:var(--pop-line)}
.card:hover{border-color:var(--pop-1)}
.t-day  .card,.card.t-day  {border-color:#E4C4D4}
.t-math .card,.card.t-math {border-color:#BFD9D4}
.t-team .card,.card.t-team {border-color:#C6D2DC}
.t-list .card,.card.t-list {border-color:#E0D5BC}
.t-room .card,.card.t-room {border-color:#F2C9C1}

/* The page-one plate sits in a white section with nothing around it, so an
   ink border read as a heavy box. The jade "Page 1 · read it" label already
   distinguishes it from the locked page; the frame can stay quiet. */
.page-label{background:var(--pop-2)}
.feature-pages .page:first-child{border-color:var(--rule);border-width:2px}

/* --- toc rows ---------------------------------------------- */
.toc li a{border-bottom-color:var(--pop-line)}
.toc li a:hover{background:#FAFDFC}
.toc .from{color:var(--pop-1)}

/* --- arc spine + numbers ----------------------------------- */
.arc-line{background:var(--pop-line)}
.arc-line::after{height:100%;background:var(--pop-edge)}
.step-num span{border-color:var(--pop-edge);border-width:1.5px}
.step{border-bottom-color:var(--pop-line)}

/* --- quotes, pitfalls -------------------------------------- */
.quote,
.proof3 blockquote{border-top-color:var(--pop-edge)}
.pit,
.pit:nth-child(even){border-bottom-color:var(--pop-line)}
.pit:nth-child(even){border-left-color:var(--pop-line)}
.pitfalls{border-top-color:var(--pop-edge)}
.col-item .closes,
.pit .closes,
.pit-row .closes{color:var(--pop-2)}

/* --- eyebrows get a leading mark ---------------------------- */
.sec-head .eyebrow::before,
.contents-head .eyebrow::before{
  content:"";display:inline-block;width:16px;height:1px;
  background:var(--pop-1);vertical-align:middle;margin-right:10px;
}

/* --- chips ------------------------------------------------- */
.chip{border-color:var(--pop-1);color:var(--pop-1)}
.chip--save{border-color:var(--pop-2);color:var(--pop-2)}

/* ============================================================
   BUTTONS — outlined, with the bloom-fill hover
   ============================================================ */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  background:transparent;color:var(--ink);
  border:1.5px solid var(--pop-1);
  transition:color .26s ease .08s,border-color .3s ease;
}
/* The seed dot. Its box NEVER changes size — only transform:scale() runs,
   so it grows from where it sits and stays a true circle the whole way.
   (Animating width/height/border-radius is what made it read as an oval
   snapping to centre.) */
.btn::before{
  content:"";position:absolute;z-index:-1;
  left:19px;top:50%;
  width:var(--btn-dot);height:var(--btn-dot);
  margin:calc(var(--btn-dot) / -2) 0 0 calc(var(--btn-dot) / -2);  /* centre on that point */
  border-radius:50%;
  background:var(--pop-1);
  transform:scale(1);
  transform-origin:50% 50%;
  transition:transform var(--btn-dur) var(--btn-ease);
  will-change:transform;
}
/* The seed is --btn-dot (11px), so radius 5.5, not the 7px an earlier note
   here assumed. The bloom has to reach the far corner from the seed: for a
   327px button like "View the Planning Journeys" that is ~309px, a scale of
   ~56. The old default of 46 only reached 253px and stopped visibly short on
   anything past ~280px wide. 70 reaches 385px, covering inline buttons to
   about 400px. Overshoot is clipped by .btn{overflow:hidden}, so the only
   cost on a short button is that the fill completes a little earlier in the
   duration. Wider than 400px, set --btn-scale on the button (see .btn--block). */
.btn:hover::before,
.btn:focus-visible::before{transform:scale(var(--btn-scale))}
.btn:hover{color:#fff;background:transparent;border-color:var(--pop-1)}
.btn:focus-visible{outline:2px solid var(--pop-2);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .btn::before{transition:none}
}

/* the dark "primary" button inverts: coral seed on ink */
.btn--ghost{border-color:var(--ink)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{color:#fff;border-color:var(--ink)}

.rung.feature .btn,
.rg:last-child .btn{border-color:#fff;color:#fff}
.rung.feature .btn::before{background:#fff}
.rung.feature .btn:hover{color:var(--ink)}

/* small buttons keep the same seed, just closer to the edge.
   The text has to clear it. With --btn-dot at 11px the seed spans 9.5px to
   20.5px, so the inherited 18px of left padding put the "A" of "Add the
   journey" underneath the dot. 26px gives the same optical gap the full-size
   button has (its seed ends at 24.5px against 32px of padding). */
.btn--sm::before{left:15px}
/* not on .btn--block: its label is centred, so it never reaches the seed and
   the extra padding would just pull the text off centre. */
.btn--sm:not(.btn--block){padding-left:26px}

/* ============================================================
   .btn--block — a full-width button.
   The bloom scale has to clear the distance from the seed to the
   far corner. A 451px-wide button needs ~432px of radius; at an
   11px dot that is a scale of ~79, where the shared default of 46
   only reached 253 and stopped short. 95 covers up to ~520px.
   ============================================================ */
.btn--block{display:block;text-align:center;--btn-scale:95}

/* --- add-to-binder buttons --------------------------------- */
.add,.addbtn{
  border-color:var(--pop-1);color:var(--pop-1);
  transition:background .25s,color .25s,border-color .25s;
}
.add:hover,.addbtn:hover{background:var(--pop-1);border-color:var(--pop-1);color:#fff}

/* --- nav / topbar ------------------------------------------ */
.nav{border-bottom-color:var(--pop-edge)}
.binder-btn{border-color:var(--pop-1)}
.binder-btn:hover{background:var(--pop-1);color:#fff}
.binder-btn:hover .n{color:#fff}
.topbar{background:var(--ink)}
.topbar b{color:#8FD8CE}

/* --- capture field ----------------------------------------- */
.capture input{border-color:var(--pop-line)}
.capture input:focus{border-color:var(--pop-1);box-shadow:0 0 0 3px rgba(15,122,110,.10)}

/* --- footer ------------------------------------------------ */
footer{border-top-color:var(--pop-edge)}

/* --- thread nodes ------------------------------------------ */
.node{border-color:var(--pop-edge)}
.link{border-color:var(--pop-line)}
.io li{border-bottom-color:var(--pop-line)}