/* ============================================================
   tuning.css — Bow tuning tabs, status cards, step items
   ============================================================ */

/* ---- Tabs ---- */
.tab {
  padding: 7px 16px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  color: var(--t2); cursor: pointer;
  transition: all .15s cubic-bezier(.4,0,.2,1);
  white-space: nowrap; border: 1px solid transparent;
}
.tab:hover { color: var(--tx); background: rgba(255,255,255,.04) }
.tab.on {
  background: rgba(232,184,75,.1); color: var(--gold);
  border-color: rgba(232,184,75,.2);
  box-shadow: 0 0 16px rgba(232,184,75,.08);
}
.tc     { display: none; flex-direction: column; gap: 14px }
.tc.on  { display: flex }

/* ---- Tuning value grid ---- */
.tv-grid  { display: flex; flex-direction: column; gap: 0 }
.tv-row   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.04); align-items: center }
.tv-row:last-child { border-bottom: none }
.tv-label { font-size: 13px; font-weight: 500; color: var(--tx) }
.tv-sub   { font-size: 10px; color: var(--t2); margin-top: 2px; font-weight: 400 }
.tv-rec   { font-size: 12px; color: var(--gn); font-weight: 500 }
.tv-rec-sub { font-size: 10px; color: var(--t2); margin-top: 2px; font-weight: 400 }

/* ---- Tuning note banners ---- */
.tune-note      { display: flex; gap: 8px; background: rgba(232,184,75,.05); border: 1px solid rgba(232,184,75,.14); border-radius: 9px; padding: 10px 13px; font-size: 12px; color: var(--t2); line-height: 1.5; margin-top: 12px }
.tune-note.warn { background: rgba(224,92,92,.05); border-color: rgba(224,92,92,.2) }

/* ---- Status cards ---- */
.status-card         { display: flex; gap: 12px; padding: 14px 16px; border-radius: 10px; align-items: flex-start; margin-bottom: 2px }
.status-card.ok      { background: rgba(76,175,130,.06); border: 1px solid rgba(76,175,130,.16); box-shadow: 0 0 20px rgba(76,175,130,.04) }
.status-card.warn    { background: rgba(224,92,92,.06); border: 1px solid rgba(224,92,92,.16); box-shadow: 0 0 20px rgba(224,92,92,.04) }
.status-card.neutral { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06) }
.status-icon         { font-size: 18px; flex-shrink: 0; margin-top: 1px }
.status-card.ok   .status-icon  { color: var(--gn) }
.status-card.warn .status-icon  { color: var(--rd) }
.status-card.neutral .status-icon { color: var(--t3) }
.status-title        { font-size: 13px; font-weight: 600; margin-bottom: 4px }
.status-card.ok   .status-title { color: var(--gn) }
.status-card.warn .status-title { color: var(--rd) }
.status-card.neutral .status-title { color: var(--t2) }
.status-body         { font-size: 12px; color: var(--t2); line-height: 1.5 }

/* ---- Step items ---- */
.step-item        { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04) }
.step-item:last-child { border-bottom: none }
.step-num         {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: #000;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
  box-shadow: 0 0 12px rgba(232,184,75,.4);
}
.step-title       { font-size: 12px; font-weight: 600; color: var(--tx); margin-bottom: 2px }
.step-body        { font-size: 11px; color: var(--t2); line-height: 1.4 }
.bda              { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 20px; background: rgba(76,175,130,.1); color: var(--gn) }