/* ==========================================================================
   KOBRO — kobro-tiers.css
   Free / Premium / Elite badge system. Additive: uses the tokens already
   defined in kobro-2026.css and adds nothing else to the cascade.
   Paired with js/tiers.js, which injects the markup.
   ========================================================================== */

.kb-tier{
  display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 10px;white-space:nowrap;vertical-align:middle;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
}
.kb-tier svg{flex:none}

/* sizes */
.kb-tier[data-size="sm"]{height:22px;padding:0 8px;font-size:10px;gap:5px}
.kb-tier[data-size="lg"]{height:34px;padding:0 14px;font-size:13px;gap:8px}

/* tiers */
.kb-tier--free{border:1px solid var(--rule-soft);color:var(--muted);background:transparent}
.kb-tier--free svg{color:var(--muted)}
.kb-tier--premium{background:var(--orange);color:#171715}
.kb-tier--premium svg{color:#171715}
.kb-tier--elite{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--orange)}
.kb-tier--elite svg{color:var(--orange)}

/* on ink surfaces (member pass, dark bands) */
.member-pass .kb-tier--free,
.membership-plan .kb-tier--free,
.journal-membership .kb-tier--free,
.article-membership-card .kb-tier--free{border-color:rgba(238,237,232,.3);color:var(--on-dark-muted)}
.member-pass .kb-tier--elite,
.membership-plan .kb-tier--elite,
.journal-membership .kb-tier--elite,
.article-membership-card .kb-tier--elite{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--orange)}
.member-pass .kb-tier--elite svg,
.membership-plan .kb-tier--elite svg{color:var(--orange)}

/* seal — larger disc mark for the reader pass and receipts */
.kb-seal{display:inline-grid;place-items:center;flex:none}
.kb-seal svg{display:block}

/* placements ------------------------------------------------------------ */

/* member pass: badge sits beside the tier value */
.member-pass-foot .kb-tier{margin-top:6px}
.member-pass-main .kb-tier{margin-top:10px}

/* membership plan panel + account cards */
.membership-plan-head .kb-tier,
.member-card > .kb-tier{align-self:flex-start}

/* journal rows and article kickers: “members only” becomes the tier badge */
.post-card .kb-tier,
.article-kicker .kb-tier{vertical-align:baseline}
.member-ribbon.kb-tier{position:absolute;top:16px;right:16px}

/* tier comparison strip (membership page) */
.kb-tier-strip{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  padding:0 var(--gutter) 72px;
}
.kb-tier-card{
  display:flex;flex-direction:column;gap:14px;padding:24px;
  border:1.5px solid var(--rule);background:var(--panel);
}
.kb-tier-card[data-tier="premium"]{border-width:2px}
.kb-tier-card[data-tier="elite"]{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.kb-tier-card h3{
  margin:0;font:900 clamp(28px,3.2vw,44px)/.92 var(--display);font-stretch:75%;letter-spacing:-.035em;
}
.kb-tier-card .kb-tier-price{font:800 20px/1 var(--display);letter-spacing:-.02em}
.kb-tier-card ul{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.kb-tier-card li{
  position:relative;padding:11px 0 11px 22px;border-bottom:1px solid var(--rule-soft);font-size:15px;
}
.kb-tier-card[data-tier="elite"] li{border-bottom-color:var(--rule-dark,rgba(238,237,232,.18))}
.kb-tier-card li::before{content:'✦';position:absolute;left:0;top:12px;color:var(--orange);font-size:11px}
.kb-tier-card .kb-tier-cta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;
  min-height:52px;padding:0 20px;border-radius:var(--r-ctl);background:var(--ink);color:var(--paper);
  font-weight:700;font-size:15px;
}
.kb-tier-card[data-tier="premium"] .kb-tier-cta{background:var(--orange);color:#171715}
.kb-tier-card[data-tier="elite"] .kb-tier-cta{background:var(--orange);color:#171715}
.kb-tier-card .kb-tier-note{
  color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.kb-tier-card[data-tier="elite"] .kb-tier-note{color:var(--on-dark-muted)}

/* checkout plan choice */
.member-plan-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;border:0}
.member-plan-picker legend{width:100%;margin-bottom:10px;color:var(--muted);font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.member-plan-picker label{position:relative;display:block;cursor:pointer}
.member-plan-picker input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.member-plan-picker label>span{display:grid;gap:6px;min-height:116px;padding:16px;border:1.5px solid var(--rule);background:var(--paper);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.member-plan-picker label:hover>span{transform:translateY(-2px)}
.member-plan-picker input:checked+span{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.member-plan-picker b{font:800 21px/1 var(--display)}
.member-plan-picker small{font:600 13px/1 var(--mono);letter-spacing:.04em}
.member-plan-picker em{align-self:end;color:var(--muted);font:400 12px/1.35 var(--body);font-style:normal}
.member-plan-picker label[data-plan-option="elite"]>span{background:var(--ink);color:var(--paper)}
.member-plan-picker label[data-plan-option="elite"] em{color:var(--on-dark-muted)}
.member-elite-button{background:var(--orange)!important;color:#171715!important}

@media(max-width:900px){
  .kb-tier-strip{grid-template-columns:1fr}
}
@media(max-width:560px){.member-plan-picker{grid-template-columns:1fr}.member-plan-picker label>span{min-height:96px}}