/* THE SEARCH · Interview Stories — page-local styles (moved from /pivot/stories/).
   Leans on design-system + /pivot/pivot.css. Adds alignment-tag chips + bank-gap
   note on top of the ported Pivot styles. */

/* alignment-tag chips (builder) + tag pills (library/view) */
.st-tag-chip[aria-pressed="true"] { background:var(--red); border-color:var(--red); color:#fff; }
.st-tag.st-tag-align { border-color:var(--red); color:var(--red); }

/* bank-wide gap note */
.st-gap { border:1px solid var(--hair); border-left:3px solid var(--red); padding:12px 16px; margin-top:20px; font-size:13.5px; color:var(--ink2); line-height:1.55; }
.st-gap .st-gap-k { font-family:var(--font-body); font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.st-gap .st-gap-ok { font-family:var(--font-body); font-weight:700; color:var(--ink); }

/* library */
.st-libhead { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:24px; flex-wrap:wrap; }
.st-count { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); }
.st-cards { margin-top:24px; border-top:1px solid var(--rule); }
.st-card { padding:20px 0; border-bottom:1px solid var(--hair2); display:grid; grid-template-columns:1fr auto; gap:20px; align-items:start; }
.st-card .st-c-body { min-width:0; }
.st-card h4 { font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-.01em; margin-bottom:6px; }
.st-card .st-c-preview { font-size:14px; color:var(--ink2); line-height:1.5; }
.st-card .st-c-meta { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin-top:8px; }
.st-card .st-c-meta .st-badge { color:var(--red); }
.st-c-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.st-tag { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--mut); border:1px solid var(--hair); padding:3px 8px; }
.st-c-actions { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.st-linkbtn { background:none; border:none; cursor:pointer; padding:0; font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--ink); border-bottom:2px solid var(--red); padding-bottom:1px; }
.st-linkbtn:hover { color:var(--red); }
.st-linkbtn.st-danger { border-bottom-color:var(--mut); color:var(--mut); }
.st-linkbtn.st-danger:hover { color:var(--red); border-bottom-color:var(--red); }

.st-empty { border:1px solid var(--hair); padding:36px 32px; margin-top:24px; text-align:center; }
.st-empty h3 { font-family:var(--font-display); font-weight:700; font-size:22px; margin-bottom:8px; }
.st-empty p { font-size:15px; color:var(--ink2); line-height:1.55; max-width:520px; margin:0 auto 20px; }

/* builder */
.st-editing-banner { border:1px solid var(--hair); border-left:3px solid var(--red); padding:10px 14px; margin-top:20px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--mut); }
.st-progress-wrap { margin-top:20px; }
.st-progress-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); margin-bottom:6px; }
.st-progress-track { height:4px; background:var(--track); }
.st-progress-fill { height:100%; background:var(--red); transition:width .25s; }

.st-star-section { margin-top:26px; }
.st-star-head { display:flex; align-items:baseline; gap:12px; }
.st-star-badge { font-family:var(--font-body); font-weight:700; width:26px; height:26px; border-radius:50%; border:2px solid var(--ink); display:inline-grid; place-items:center; font-size:13px; flex-shrink:0; }
.st-star-head label { font-family:var(--font-body); font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase; }
.st-complete { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--red); margin-left:auto; }
.st-hint { font-size:13.5px; color:var(--mut); margin:8px 0 8px 38px; line-height:1.5; }
.st-star-section textarea, .st-star-section input { margin-left:38px; width:calc(100% - 38px); }
.st-tip { font-size:12.5px; color:var(--ink2); line-height:1.5; margin:8px 0 0 38px; border-left:2px solid var(--hair); padding-left:12px; }
.st-tip b { font-family:var(--font-body); font-weight:700; }
.st-charcount { font-family:var(--font-mono); font-size:9.5px; color:var(--faint); text-align:right; margin:4px 38px 0 0; }

.st-title-field { margin-top:24px; }
.st-title-field label { font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:8px; }
.st-title-field input { width:100%; }
.st-title-hint { font-size:13px; color:var(--mut); margin-top:6px; }

.st-skills-field { margin-top:28px; }
.st-skills-field .st-sf-label { font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.st-skills-field .st-sf-hint { font-size:13px; color:var(--mut); margin-bottom:12px; }
.st-skill-grid { display:flex; flex-wrap:wrap; gap:8px; }
.st-skill-chip { cursor:pointer; background:var(--paper); border:1px solid var(--hair); color:var(--ink2); font-family:var(--font-body); font-weight:600; font-size:12.5px; padding:8px 14px; transition:.12s; }
.st-skill-chip:hover { border-color:var(--ink); }
.st-skill-chip[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }

.st-callout { border:1px solid var(--hair); border-left:3px solid var(--red); padding:12px 16px; margin-top:24px; font-size:14px; color:var(--ink2); line-height:1.5; }

/* story view (read) */
.st-view-section { margin-top:22px; }
.st-view-section h4 { font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); margin-bottom:6px; }
.st-view-section p { font-size:16px; color:var(--ink); line-height:1.6; }

/* AI coaching outputs (builder + view) */
.st-ai-output { border:1px solid var(--hair); padding:18px 20px; margin-top:14px; }
.st-ai-output .st-ai-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin-bottom:8px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.st-ai-output p { font-size:15.5px; color:var(--ink); line-height:1.6; }
.st-ai-feedback { font-size:15px; color:var(--ink2); line-height:1.6; border-left:2px solid var(--hair); padding-left:16px; }
.st-ai-feedback.st-good { border-left-color:var(--red); }
.st-copybtn { background:none; border:none; cursor:pointer; padding:0; font-family:var(--font-body); font-weight:600; font-size:11px; color:var(--ink); border-bottom:2px solid var(--red); padding-bottom:1px; white-space:nowrap; }
.st-copybtn:hover { color:var(--red); }

.st-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--paper); font-family:var(--font-body); font-weight:600; font-size:13px; padding:12px 20px; z-index:80; opacity:0; transition:opacity .2s; pointer-events:none; }
.st-toast.is-show { opacity:1; }

/* confirm modal */
.st-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); display:grid; place-items:center; z-index:70; padding:20px; }
.st-modal { background:var(--paper); border:1px solid var(--ink); border-top:3px solid var(--red); padding:26px 28px; max-width:420px; width:100%; }
.st-modal h3 { font-family:var(--font-display); font-weight:700; font-size:20px; margin-bottom:10px; }
.st-modal p { font-size:15px; color:var(--ink2); line-height:1.5; margin-bottom:20px; }
.st-modal .pv-btnrow { margin-top:0; }

@media (max-width:640px){
  .st-card { grid-template-columns:1fr; }
  .st-c-actions { flex-direction:row; align-items:center; }
  .st-star-section textarea, .st-star-section input, .st-charcount, .st-hint, .st-tip { margin-left:0; width:100%; }
}