/* ============================================================
   STUDIFYX — Cobalt Blueprint · Component layer
   Source: design_handoff_cobalt_blueprint/components.css (F083)
   Depends on cobalt-blueprint.css. Import after tokens.
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fz-16);
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  min-height: var(--tap-min);
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(45,107,255,0.30); }
.btn--primary:hover { background: var(--primary-2); box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 35%, transparent); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #1A2756; }

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 12.5px 22.5px; /* compensate border */
}
.btn--secondary:hover { background: var(--ink); color: var(--paper); }

.btn--paper {
  /* Used on dark/today surfaces — paper pill on navy */
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-cta);
}
.btn--paper:hover { background: #FFFFFF; }

.btn--tertiary {
  background: transparent;
  color: var(--primary-2);
  padding: 0 4px;
  min-height: 0;
  border-radius: 0;
}
.btn--tertiary:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.btn--sm { font-size: var(--fz-14); padding: 10px 18px; min-height: 40px; }


/* ---------- Cards ---------- */
.card {
  background: var(--paper-2);
  border: 1px solid var(--mist);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.card--paper { background: var(--paper); }


/* ---------- Today card (hero on dark) ---------- */
.today-card {
  position: relative;
  overflow: hidden;
  background: var(--today-bg);
  color: var(--today-fg);
  border-radius: var(--r-md);
  padding: 22px 20px;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 220px;
}
.today-card__halo {
  position: absolute; right: -78px; top: 50%;
  transform: translateY(-50%);
  width: 230px; height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle at 58% 48%,
    color-mix(in srgb, var(--primary) 55%, white 45%) 0%,
    color-mix(in srgb, var(--primary) 72%, white 28%) 38%,
    color-mix(in srgb, var(--primary) 88%, var(--today-bg) 12%) 80%,
    color-mix(in srgb, var(--primary) 70%, var(--today-bg) 30%) 100%);
  pointer-events: none; z-index: 0;
}
.today-card__label {
  align-self: flex-start;
  color: color-mix(in srgb, var(--today-fg) 78%, transparent);
  margin-bottom: 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  position: relative; z-index: 2;
}
.today-card__h {
  font-size: var(--fz-24); font-weight: 700; line-height: var(--lh-snug);
  margin: 0 0 22px; max-width: 62%;
  letter-spacing: -0.005em;
  position: relative; z-index: 2;
}


/* ---------- Intent tile (waar wil je mee beginnen?) ---------- */
.intent {
  background: var(--paper-2);
  border: 1px solid var(--mist);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  font-family: inherit; text-align: left; color: inherit;
  min-height: 110px;
  box-shadow: 0 1px 2px rgba(14,26,58,0.04);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.intent:hover { transform: translateY(-1px); border-color: var(--ink); }
.intent__icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--primary-2);
}
.intent__title {
  font-size: var(--fz-14); font-weight: 700; line-height: 1.25;
  margin-top: auto; color: var(--ink); letter-spacing: -0.005em;
}


/* ---------- Subject card (vakkaart) ---------- */
.subj-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper-2);
  border: 1px solid var(--mist);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-align: left;
  width: 100%;
  min-height: 64px;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.subj-card:hover {
  transform: translateY(-1px);
  border-color: var(--ink);
  box-shadow: var(--shadow-pop);
}
.subj-card__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--mist);
  display: grid; place-items: center;
  font-size: 22px;
}
.subj-card__icon--primary { background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary-2); }
.subj-card__icon--mint    { background: color-mix(in srgb, var(--mint) 22%, transparent);    border-color: color-mix(in srgb, var(--mint) 40%, transparent);    color: #1f7a68; }
.subj-card__icon--amber   { background: color-mix(in srgb, var(--amber) 22%, transparent);   border-color: color-mix(in srgb, var(--amber) 40%, transparent);   color: #b3781d; }
.subj-card__icon--oat     { background: color-mix(in srgb, var(--oat) 22%, transparent);     border-color: color-mix(in srgb, var(--oat) 40%, transparent);     color: var(--ink); }
.subj-card__icon--berry   { background: color-mix(in srgb, var(--berry) 12%, transparent);   border-color: color-mix(in srgb, var(--berry) 20%, transparent);   color: var(--berry); }


/* ---------- Bottom nav ---------- */
.bottomnav {
  height: 64px;
  border-top: 1px solid var(--mist);
  background: var(--paper);
  display: flex;
  padding: 6px 8px 8px;
}
.bn-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: none;
  font-family: inherit; font-size: 10.5px; font-weight: 600;
  color: var(--ink-2); cursor: pointer;
  padding: 8px 0 6px;
  letter-spacing: 0.04em;
}
.bn-item.active {
  color: var(--primary-2);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 14px;
  margin: 0 4px;
}


/* ---------- Chat bubbles ---------- */
.bubble {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: var(--fz-16);
  line-height: 1.45;
}
.bubble--fyxo {
  background: var(--paper-2);
  border: 1px solid var(--mist);
  color: var(--ink);
  border-bottom-left-radius: 6px;
}
.bubble--user {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 6px;
}


/* ---------- Progress ---------- */
.progress-track {
  height: 8px;
  background: var(--mist);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--r-pill);
  transition: width var(--dur) var(--ease);
}


/* ---------- Fyxo frame with amber-glow ---------- */
.fyxo-frame {
  position: relative;
  display: grid;
  place-items: center;
}
.fyxo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 65% 60% at 50% 55%,
    rgba(255,181,71,0.45) 0%,
    rgba(255,181,71,0) 65%
  );
  pointer-events: none;
}
.fyxo-frame img {
  position: relative;
  max-width: 78%;
  max-height: 78%;
  filter: drop-shadow(0 8px 18px rgba(31,79,224,0.18));
}


/* ---------- Trust tag ---------- */
.trust-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--paper-2);
  border: 1px solid var(--mist);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-size: var(--fz-12);
  color: var(--ink-2);
  font-weight: 600;
}


/* ---------- Eyebrow / kicker ---------- */
.eyebrow {
  font-size: var(--fz-12);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}


/* ---------- Section rule ---------- */
.sec-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 10px;
}
.sec-h::after { content: ""; flex: 1; height: 1px; background: var(--mist); }