/* ============================================================================
   components.css - shared UI primitives (Book 7).
   ========================================================================== */

.eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-ink-soft)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- BUTTONS ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:700;font-size:var(--text-sm);padding:15px 28px;border-radius:var(--radius-pill);border:1.5px solid transparent;cursor:pointer;min-height:48px;transition:transform .18s,background .18s,color .18s,border-color .18s,box-shadow .18s}
.btn--primary{background:var(--color-ink);color:var(--color-text-invert)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
/* the ghost border is the only thing naming this control, so it uses the
   interactive line token (3.10:1), not the decorative one (1.63:1). */
.btn--ghost{border-color:var(--color-line-ui)}
.btn--ghost:hover{border-color:var(--color-ink);transform:translateY(-2px)}
.btn--rose{background:var(--color-accent);color:var(--color-ink)}
.btn--rose:hover{background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ---- BADGES -------------------------------------------------------------- */
.badge{font-size:var(--text-xs);font-weight:700;padding:8px 14px;border-radius:var(--radius-sm);background:var(--color-accent-pale);color:var(--color-ink)}
.tag{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:var(--radius-sm)}
.tag--confirmed{background:var(--color-status-confirmed);color:var(--color-ink)}
.tag--rumor{border:1px solid var(--color-accent);color:var(--color-status-rumor)}
.tag--speculation{border:1px solid var(--color-line-invert-ui);color:var(--color-status-speculation)}

/* ---- STARS --------------------------------------------------------------- */
.stars{color:var(--color-accent-deep);letter-spacing:2px}
.stars .e{color:var(--color-ink-mute)}

/* ---- BREADCRUMBS (Book 11 s3) -------------------------------------------- */
.crumbs{font-size:var(--text-sm);color:var(--color-ink-faint);padding-block:var(--space-5)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.crumbs li::after{content:"/";margin-left:8px;color:var(--color-ink-mute)}
.crumbs li:last-child::after{content:""}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ---- DATA TABLE (nutrition, comparison - Book 6) ------------------------- */
.dtable{font-size:var(--text-sm)}
.dtable th,.dtable td{padding:14px 16px;border-bottom:1px solid var(--color-line)}
.dtable th{font-size:10px;font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-ink-faint)}
.dtable tbody tr:nth-child(even){background:var(--color-bg-tint)}
.dtable__wrap{overflow-x:auto;border:1px solid var(--color-line);border-radius:var(--radius-lg)}

/* ---- FAQ ----------------------------------------------------------------- */
.faq{border-top:1px solid var(--color-line)}
.faq__item{border-bottom:1px solid var(--color-line)}
.faq__q{width:100%;text-align:left;display:flex;gap:var(--space-4);align-items:center;padding:var(--space-6) 0;font-weight:700;font-size:var(--text-lg)}
.faq__q::after{content:"+";margin-left:auto;font-weight:400;font-size:var(--text-2xl);color:var(--color-accent-deep)}
.faq__item[open] .faq__q::after{content:"\2013"}
.faq__a{padding-bottom:var(--space-6);color:var(--color-ink-soft);max-width:70ch}

/* ---- FORMS --------------------------------------------------------------- */
.field{width:100%;padding:15px 20px;border:1.5px solid var(--color-line-ui);border-radius:var(--radius-md);background:var(--color-bg)}
.field::placeholder{color:var(--color-ink-faint)}
.cd-dark .field{border-color:var(--color-line-invert-ui);background:rgba(255,249,245,.06);color:#fff;border-radius:var(--radius-pill)}
.cd-dark .field::placeholder{color:var(--color-placeholder-invert)}

/* ---- ATTRIBUTION (Section C) --------------------------------------------- */
.credit{font-size:11px;line-height:1.4;color:var(--color-ink-faint);margin-top:var(--space-3)}
.credit a{color:inherit}
.fl .credit{color:color-mix(in srgb, var(--on) var(--on-a-label), transparent)}