/* src/tier3/tier3.css
   Tier 3 — AI Meditation Studio styling. Matches the Solstice dark-glass
   language using the existing CSS variables. Mobile responsive. Scoped to
   .tier3-card so it cannot affect existing layout. */

.tier3-card{ /* inherits base .card styling; these are additive accents */ }

.tier3-card .head .tier3-badge{
  font-size:.62rem;font-weight:850;letter-spacing:.06em;
  color:var(--violet,#8f45ff);
  border:1px solid rgba(143,69,255,.45);
  border-radius:999px;padding:4px 10px;
  background:linear-gradient(135deg,rgba(143,69,255,.12),rgba(217,65,255,.12));
}

.tier3-creditline{
  font-size:.82rem;color:var(--text,#f6f7ff);margin-bottom:8px;
}
.tier3-creditline strong{color:var(--green,#45f29b);font-weight:850;}
.tier3-unit{color:var(--muted,#aeb7cb);font-size:.72rem;}

.tier3-intro{
  font-size:.76rem;line-height:1.5;color:var(--muted,#aeb7cb);margin:0 0 14px;
}

/* Locked state */
.tier3-locked-msg{
  font-size:.78rem;line-height:1.5;color:var(--gold,#f5b96a);
  border:1px solid rgba(245,185,106,.3);border-radius:10px;
  padding:10px 12px;background:rgba(245,185,106,.06);margin:0 0 12px;
}

/* Form */
.tier3-form{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.tier3-field{display:flex;flex-direction:column;gap:5px;}
.tier3-field label{font-size:.72rem;font-weight:700;color:var(--muted,#aeb7cb);}
.tier3-field input,.tier3-field select{
  width:100%;box-sizing:border-box;
  background:rgba(4,9,20,.7);
  border:1px solid var(--line,rgba(130,150,210,.22));
  border-radius:10px;padding:10px 12px;
  color:var(--text,#f6f7ff);font-size:.82rem;font-family:inherit;
}
.tier3-field input:focus,.tier3-field select:focus{
  outline:none;border-color:var(--cyan,#5fe3ff);
  box-shadow:0 0 0 2px rgba(95,227,255,.18);
}
.tier3-field input::placeholder{color:var(--dim,#798197);}

/* Buttons */
.tier3-btn{
  width:100%;box-sizing:border-box;
  border-radius:999px;padding:12px 16px;
  font-size:.82rem;font-weight:850;cursor:pointer;
  border:1px solid var(--line,rgba(130,150,210,.22));
  background:rgba(255,255,255,.05);color:var(--text,#f6f7ff);
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.tier3-btn.primary{
  border:none;
  background:linear-gradient(135deg,var(--cyan,#5fe3ff),var(--violet,#8f45ff));
  color:#06101f;
}
.tier3-btn.primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(95,227,255,.25);}
.tier3-btn:disabled{opacity:.5;cursor:not-allowed;}
.tier3-cost{font-weight:700;opacity:.8;font-size:.72rem;}

.tier3-demolink{
  display:block;width:100%;margin-top:8px;
  background:none;border:none;cursor:pointer;
  font-size:.68rem;color:var(--dim,#798197);text-decoration:underline;
}
.tier3-demolink:hover{color:var(--muted,#aeb7cb);}

/* Output */
.tier3-output{
  margin-top:14px;padding:14px;
  border:1px solid var(--line,rgba(130,150,210,.22));
  border-radius:12px;
  background:rgba(6,12,26,.6);
  white-space:pre-wrap;word-break:break-word;
  font-size:.78rem;line-height:1.55;color:var(--text,#f6f7ff);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

.tier3-safety{
  margin-top:12px;font-size:.66rem;line-height:1.5;
  color:var(--dim,#798197);font-style:italic;
}

@media(max-width:760px){
  .tier3-output{font-size:.74rem;}
  .tier3-intro{font-size:.74rem;}
}

/* Editable script + voice render panel */
.tier3-result{margin-top:14px;}
.tier3-result-label{display:block;font-size:.72rem;font-weight:700;color:var(--muted,#aeb7cb);margin-bottom:6px;}
.tier3-script{
  width:100%;box-sizing:border-box;resize:vertical;min-height:220px;
  background:rgba(4,9,20,.7);border:1px solid var(--line,rgba(130,150,210,.22));
  border-radius:12px;padding:12px;color:var(--text,#f6f7ff);
  font-size:.8rem;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.tier3-script:focus{outline:none;border-color:var(--cyan,#5fe3ff);box-shadow:0 0 0 2px rgba(95,227,255,.18);}
.tier3-voice-panel{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);}
.tier3-voice-title{font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--cyan,#5fe3ff);margin-bottom:10px;}
.tier3-voice-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.tier3-voice-row .tier3-field{flex:1 1 140px;}
.tier3-render-status{margin-top:8px;font-size:.72rem;color:var(--muted,#aeb7cb);min-height:1em;}

/* Auth: 'or' divider between Google and email login */
.tier3-or{ text-align:center; font-size:.72rem; color:var(--muted,#aeb7cb); margin:8px 0; position:relative; }
.tier3-or::before, .tier3-or::after{ content:""; position:absolute; top:50%; width:40%; height:1px; background:rgba(255,255,255,.12); }
.tier3-or::before{ left:0; } .tier3-or::after{ right:0; }

/* ---- Pricing / plans UI ---- */
.pricing-card{ }
.pricing-title{ margin:0 0 12px; font-size:1rem; }
.plan-grid{ display:flex; flex-direction:column; gap:10px; }
.plan-card{ border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:14px; background:rgba(255,255,255,.02); }
.plan-card.plan-current{ border-color:rgba(139,124,246,.6); box-shadow:0 0 0 1px rgba(139,124,246,.3); }
.plan-name{ font-size:1.05rem; font-weight:600; }
.plan-price{ font-size:1.2rem; margin:2px 0 6px; color:#c9b8ff; }
.plan-blurb{ font-size:.82rem; opacity:.8; line-height:1.4; margin-bottom:10px; }
.plan-note{ font-size:.8rem; opacity:.7; font-style:italic; }
.plan-upgrade{ width:100%; }
.pricing-status{ margin-top:10px; font-size:.82rem; opacity:.8; min-height:1.2em; }
@media (min-width:640px){ .plan-grid{ flex-direction:row; } .plan-card{ flex:1; } }

/* ---- Plan status box (in the account card) ---- */
.plan-status-box{ margin:10px 0 14px; padding:12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.plan-status-row{ display:flex; justify-content:space-between; align-items:center; padding:4px 0; font-size:.88rem; }
.plan-status-row span{ opacity:.7; }
.plan-status-row.trial strong{ color:#c9b8ff; }
.plan-manage{ display:block; text-align:center; margin-top:10px; text-decoration:none; }

/* v315-plan-cards.css
   Paste this block into tier3.css (or add as a linked stylesheet).
   Replaces the old full-blurb plan cards with slim one-liner rows. */

/* ── Plan grid ─────────────────────────────────────────────────── */
.plan-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

/* ── Individual plan card ──────────────────────────────────────── */
.plan-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.2s;
}

/* Current plan — greyed out, no hover effect */
.plan-card.plan-current {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.05);
  opacity: 0.6;
  pointer-events: none;
}

/* Trial plan — subtle highlight */
.plan-card.plan-trial {
  border-color: rgba(130,100,255,0.35);
  background: rgba(130,100,255,0.06);
}

/* ── Header row: name + price inline ──────────────────────────── */
.plan-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.plan-card .plan-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8e8f0;
}

.plan-card .plan-price {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
}

/* ── Status chips ──────────────────────────────────────────────── */
.plan-chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  width: fit-content;
}

.plan-chip--current {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.4);
}

.plan-chip--trial {
  background: rgba(130,100,255,0.18);
  color: #b8a0ff;
}

/* ── Upgrade one-liner button ─────────────────────────────────── */
.plan-upgrade-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(130,100,255,0.4);
  background: rgba(130,100,255,0.12);
  color: #c8b8ff;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  text-align: left;
}

.plan-upgrade-btn:hover,
.plan-upgrade-btn:focus {
  background: rgba(130,100,255,0.22);
  border-color: rgba(130,100,255,0.65);
  color: #ddd0ff;
}

.plan-arrow {
  font-size: 1.1rem;
  opacity: 0.7;
  transition: transform 0.15s;
}

.plan-upgrade-btn:hover .plan-arrow {
  transform: translateX(3px);
}

/* ── Module badges (Vocal Guidance, Sound Effects, etc.) ──────── */
/* These replace the hardcoded TEST ACCESS / FREE labels */
.module-badge,
.tier-badge-chip {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 6px;
}

.module-badge.unlocked,
.tier-badge-chip.unlocked {
  background: rgba(80,200,140,0.15);
  color: #7de8b0;
  border: 1px solid rgba(80,200,140,0.25);
}

.module-badge.locked,
.tier-badge-chip.locked {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.1);
}