/* SpeakMind — AI Auto-Edits + persona tabs styles (editorial) */

/* ============ AI Auto-Edits ============ */
.ae-sec { padding: 96px 0 90px; }
.ae-stage {
  margin-top: 48px;
  display: grid; grid-template-columns: 1fr 88px 1fr; align-items: stretch; gap: 0;
}
@media (max-width: 860px) { .ae-stage { grid-template-columns: 1fr; gap: 14px; } }

.ae-panel { padding: 30px 30px; border: 1px solid var(--border); background: var(--surface); }
.ae-panel.raw { border-radius: var(--r-xl) 0 0 var(--r-xl); background: var(--surface2); }
.ae-panel.out { border-radius: 0 var(--r-xl) var(--r-xl) 0; border-left: none; }
@media (max-width: 860px) {
  .ae-panel.raw { border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .ae-panel.out { border-radius: 0 0 var(--r-xl) var(--r-xl); border-left: 1px solid var(--border); }
}
.ae-cap { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.ae-dot { width: 8px; height: 8px; border-radius: 50%; }
.ae-dot.rec { background: var(--accent); }
.ae-dot.ok { background: var(--green); }

.ae-text { font-size: clamp(18px, 2vw, 23px); line-height: 1.6; color: var(--text-dim); }
.ae-text .ae-cut { transition: color .5s var(--ease), opacity .5s var(--ease); position: relative; }
.ae-text.editing .ae-cut { color: var(--accent); opacity: .42; text-decoration: line-through; text-decoration-color: var(--accent-line); }

.ae-arrow { display: grid; place-items: center; position: relative; }
.ae-arrow::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--ink); }
.ae-arrow::after { content: "→"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: var(--on-ink); font-size: 18px; }
.ae-arrow span { display: none; }
@media (max-width: 860px) { .ae-arrow { height: 30px; } .ae-arrow::before { width: 34px; height: 34px; } .ae-arrow::after { content: "↓"; } }

.ae-clean { font-size: clamp(18px, 2vw, 23px); line-height: 1.6; font-weight: 500; color: var(--text); opacity: .25; transition: opacity .6s var(--ease); }
.ae-clean.show { opacity: 1; }
.ae-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease) .2s, transform .5s var(--ease) .2s; }
.ae-tags.show { opacity: 1; transform: none; }
.ae-tag { font-size: 12px; font-family: var(--font-mono); color: var(--green); background: rgba(44,143,84,.1); border: 1px solid rgba(44,143,84,.3); padding: 4px 10px; border-radius: 999px; }
.ae-tag .dict-hl { color: var(--accent); background: none; padding: 0; }

.ae-dots { display: flex; gap: 8px; justify-content: center; margin-top: 28px; }
.ae-pdot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); transition: all .3s var(--ease); }
.ae-pdot.on { background: var(--accent); width: 26px; border-radius: 999px; }

/* ============ persona tabs ============ */
.pp-sec { padding: 88px 0 92px; }
.pp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.pp-tab {
  font-size: 14.5px; font-weight: 600; color: var(--text-faint);
  padding: 11px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .25s, border-color .25s;
}
.pp-tab:hover { color: var(--text-dim); }
.pp-tab.on { color: var(--accent); border-bottom-color: var(--accent); }

.pp-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(36px, 6vw, 72px); align-items: center; margin-top: 44px; }
@media (max-width: 880px) { .pp-grid { grid-template-columns: 1fr; gap: 36px; } }
.pp-copy h3 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
.pp-copy p { color: var(--text-dim); font-size: 17.5px; margin-top: 18px; max-width: 44ch; text-wrap: pretty; }
.pp-foot { margin-top: 28px; }

.pp-vis { position: relative; }
.pv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2); }
.pv-bar { display: flex; align-items: center; gap: 13px; padding: 12px 15px; border-bottom: 1px solid var(--hair); background: var(--surface2); }
.pv-bar .traffic { display: flex; gap: 7px; }
.pv-bar .traffic i { width: 11px; height: 11px; border-radius: 50%; }
.pv-bar .traffic i:nth-child(1) { background: #ec6a5e; } .pv-bar .traffic i:nth-child(2) { background: #f4bf4f; } .pv-bar .traffic i:nth-child(3) { background: #61c554; }
.pv-tab { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); padding: 4px 12px 4px 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border2); }
.pv-tab .g { width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; color: #fff; font-size: 10px; }
.pv-body { padding: 26px 26px 22px; min-height: 150px; }
.pv-status { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); display: flex; align-items: center; gap: 7px; margin-bottom: 16px; }
.pv-status .d { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.pv-sample { font-size: 18px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.pv-sample.email { color: var(--text-dim); }
.pv-code { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; color: var(--code-text); background: var(--code-bg); border-radius: var(--r-md); padding: 16px; white-space: pre-wrap; }
.pv-metric { display: flex; align-items: baseline; gap: 11px; padding: 18px 26px; border-top: 1px solid var(--hair); background: var(--surface2); }
.pv-num { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); }
.pv-mlabel { font-size: 13.5px; color: var(--text-dim); font-weight: 500; }