/* ==========================================================================
   Seeing the Warning Signs — Interactive Experience
   Palette and type come from /css/shared.css (navy, teal, crimson, cream).
   Every rule is scoped with the stx- prefix so no other page is affected.
   ========================================================================== */
:root {
  --stx-body: #334155;
  --stx-tint-navy: #F3F6FA;
  --stx-tint-navy-line: #DDE4EE;
  --stx-tint-teal: #EAF6F4;
  --stx-tint-teal-line: #BFE0DB;
  --stx-tint-amber: #FBF4E6;
  --stx-tint-amber-line: #EBD7B0;
  --stx-tint-crimson: #FBEFEF;
  --stx-tint-crimson-line: #EBC4C5;
  --stx-amber-ink: #5C3B08;
  --stx-teal-ink: #0B4F49;
  --stx-focus: #0F766E;
}

.stx-body { background:#fbf7f1; }
.stx-site { max-width:1000px; padding:0 clamp(16px, 3vw, 40px); min-height:auto; }
.stx-site .breadcrumb { padding:16px 0 0; background:transparent; border-bottom:0; font-size:14px; flex-wrap:wrap; }
.stx-site .breadcrumb a, .stx-site .breadcrumb span { font-size:14px; }
.stx-skip { position:absolute; left:-9999px; top:0; z-index:300; background:var(--navy); color:#fff; font-weight:700; font-size:15px; padding:12px 18px; border-radius:0 0 8px 0; text-decoration:none; }
.stx-skip:focus { left:0; }
#stx-main:focus { outline:none; }

.stx-app { padding:clamp(18px, 3vw, 28px) 0 clamp(44px, 6vw, 72px); font-size:17px; line-height:1.7; color:var(--stx-body); min-width:0; }
.stx-app p { margin:0 0 14px; max-width:70ch; }
.stx-app [hidden] { display:none !important; }
/* shared.css hides <aside> site-wide (legacy sidebar); callouts here must show. */
.stx-app aside { display:block; position:static; height:auto; }
.stx-app *:focus-visible { outline:3px solid var(--stx-focus); outline-offset:3px; }
.stx-step-title:focus { outline:none; }
.stx-step-title:focus-visible { outline:3px solid var(--stx-focus); outline-offset:4px; border-radius:4px; }

.stx-eyebrow { display:block; font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--teal); margin:0 0 8px; }
.stx-step > h2.stx-step-title { font-family:var(--serif); font-size:clamp(26px, 4vw, 38px); line-height:1.18; font-weight:700; color:var(--navy); margin:0 0 16px; letter-spacing:-0.01em; }
.stx-h3 { font-family:var(--serif); font-size:clamp(20px, 2.6vw, 24px); line-height:1.3; font-weight:700; color:var(--navy); margin:28px 0 12px; }
.stx-h4 { font-family:var(--sans); font-size:14px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--navy); margin:20px 0 8px; }
.stx-hint { font-size:15px; color:#475569; margin:0 0 12px !important; }
.stx-footnote { font-size:14.5px; color:#475569; margin-top:20px !important; }
.stx-center { text-align:center; margin-left:auto !important; margin-right:auto !important; }
.stx-status { font-size:15.5px; font-weight:600; color:var(--navy); min-height:1px; margin:12px 0 0 !important; }
.stx-status:empty { margin:0 !important; }

/* ---------- Buttons ------------------------------------------------------ */
.stx-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:12px 26px; border-radius:8px; font-family:var(--sans); font-size:16px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; text-decoration:none; text-align:center; background:var(--navy); color:#fff; border:2px solid var(--navy); cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.stx-btn:hover { background:#0a2848; border-color:#0a2848; color:#fff; }
.stx-btn svg { width:20px; height:20px; flex:0 0 auto; }
.stx-btn-lg { min-height:58px; font-size:17px; padding:14px 32px; }
.stx-btn-ghost { background:#fff; color:var(--navy); }
.stx-btn-ghost:hover { background:var(--stx-tint-navy); color:var(--navy); border-color:var(--navy); }
.stx-btn-light { background:#fff; color:var(--navy); border-color:#fff; }
.stx-btn-light:hover { background:var(--cream); border-color:var(--cream); color:var(--navy); }
.stx-btn-light:focus-visible { outline-color:#8FD9CF !important; }
.stx-btn[aria-disabled="true"] { background:#E2E8F0; border-color:#CBD5E1; color:#475569; cursor:not-allowed; }
.stx-btn-add { margin-top:6px; }
.stx-link-btn { background:none; border:0; padding:8px 4px; min-height:44px; font:inherit; font-weight:700; color:var(--crimson); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.stx-link-btn:hover { color:var(--navy); }

.stx-nav { display:flex; justify-content:space-between; gap:12px; margin-top:36px; padding-top:22px; border-top:1px solid var(--line); flex-wrap:wrap; }
.stx-nav [data-nav="next"] { margin-left:auto; }
.stx-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px; }
.stx-row .stx-status { margin:0 !important; }

/* ---------- Resume + progress ------------------------------------------- */
.stx-resume { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background:var(--stx-tint-teal); border:1px solid var(--stx-tint-teal-line); border-radius:10px; padding:8px 16px; margin:0 0 16px; }
.stx-resume p { margin:0 !important; font-size:15.5px; font-weight:600; color:var(--stx-teal-ink); }

.stx-progress { margin:0 0 26px; scroll-margin-top:84px; }
#stx-main { scroll-margin-top:84px; }
.stx-progress-text { font-size:15px; font-weight:800; letter-spacing:.4px; color:var(--navy); margin:0 0 10px !important; }
.stx-progress-steps { list-style:none; display:flex; gap:6px; padding:0; margin:0; }
.stx-progress-steps li { flex:1 1 0; min-width:0; }
.stx-progress-steps button { width:100%; min-height:40px; border-radius:6px; border:2px solid var(--stx-tint-navy-line); background:#fff; color:#64748B; font:inherit; font-size:14px; font-weight:800; cursor:pointer; padding:0; }
.stx-progress-steps button.is-done { background:var(--stx-tint-teal); border-color:var(--stx-tint-teal-line); color:var(--stx-teal-ink); }
.stx-progress-steps button.is-current { background:var(--navy); border-color:var(--navy); color:#fff; }
.stx-progress-steps button:disabled { cursor:default; background:#F8FAFC; border-style:dashed; color:#64748B; }
.stx-progress-steps button:not(:disabled):not(.is-current):hover { border-color:var(--navy); }

/* ---------- Opening ------------------------------------------------------ */
.stx-hero { background:#fff; border:1px solid var(--line); border-left:6px solid var(--navy); border-radius:14px; box-shadow:0 10px 30px rgba(7,29,53,.06); padding:clamp(24px, 4.4vw, 48px); margin:0 0 22px; }
.stx-hero h1 { font-family:var(--serif); font-size:clamp(34px, 6vw, 54px); line-height:1.08; font-weight:700; color:var(--navy); margin:0 0 14px; letter-spacing:-0.015em; }
.stx-sub { font-family:var(--serif); font-size:clamp(20px, 2.7vw, 27px); line-height:1.38; font-weight:600; font-style:italic; color:var(--crimson); padding:2px 0 2px 16px; border-left:3px solid var(--crimson); margin:0 0 20px !important; max-width:36ch !important; }
.stx-lead { font-size:18px; color:var(--ink); }

.stx-challenge { background:var(--navy); color:#fff; border-radius:14px; padding:clamp(24px, 4.4vw, 44px); margin-top:22px; }
.stx-eyebrow-light { color:#8FD9CF; font-size:14px; margin-bottom:14px; }
.stx-challenge-list { list-style:none; padding:0; margin:0 0 28px; display:grid; gap:8px; counter-reset:stxch; }
.stx-challenge-list li { counter-increment:stxch; font-family:var(--serif); font-size:clamp(19px, 2.4vw, 23px); font-weight:600; line-height:1.4; color:#fff; display:flex; gap:14px; align-items:baseline; }
.stx-challenge-list li::before { content:counter(stxch); flex:0 0 auto; font-family:var(--sans); font-size:14px; font-weight:800; color:var(--navy); background:#8FD9CF; width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; transform:translateY(-2px); }
.stx-small-light { color:rgba(255,255,255,.85); font-size:15px; margin:14px 0 0 !important; }

/* ---------- Callouts & panels ------------------------------------------- */
.stx-callout { border-radius:12px; padding:20px 22px; border:1px solid; margin:0 0 18px; }
.stx-callout p:last-child { margin-bottom:0; }
.stx-callout-title { font-family:var(--sans); font-size:15px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; margin:0 0 8px; }
.stx-callout-amber { background:var(--stx-tint-amber); border-color:var(--stx-tint-amber-line); border-left:5px solid #8A5A12; }
.stx-callout-amber .stx-callout-title { color:var(--stx-amber-ink); }
.stx-callout-amber p { color:#3b2f1c; font-size:16px; }
.stx-callout-teal { background:var(--stx-tint-teal); border-color:var(--stx-tint-teal-line); border-left:5px solid var(--teal); }
.stx-callout-teal .stx-callout-title { color:var(--stx-teal-ink); }
.stx-callout-crimson { background:var(--stx-tint-crimson); border-color:var(--stx-tint-crimson-line); border-left:5px solid var(--crimson); margin-top:26px; }
.stx-callout-crimson .stx-callout-title { color:var(--crimson); }
.stx-callout-crimson p { color:var(--ink); }
.stx-panel { background:#fff; border:1px solid var(--line); border-radius:12px; padding:clamp(20px, 3.4vw, 30px); box-shadow:var(--shadow); margin-top:22px; }
.stx-panel > .stx-h3:first-child { margin-top:0; }

/* ---------- Step 1: perspective cards ----------------------------------- */
.stx-pgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; margin-top:20px; }
.stx-pcard { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; width:100%; min-height:88px; padding:16px 18px 16px 20px; background:#fff; border:2px solid var(--line); border-left:6px solid var(--teal); border-radius:10px; font:inherit; color:var(--ink); cursor:pointer; box-shadow:var(--shadow); transition:border-color .15s, background .15s; }
.stx-pcard:hover { border-color:var(--navy); border-left-color:var(--teal); background:#FCFDFE; }
.stx-pcard-name { font-size:17.5px; font-weight:800; color:var(--navy); line-height:1.3; }
.stx-pcard-holds { font-size:14.5px; line-height:1.45; color:#475569; }
.stx-pcard-badge { display:inline-block; margin-top:6px; font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; border-radius:999px; padding:2px 10px; background:var(--stx-tint-navy); border:1px solid var(--stx-tint-navy-line); color:var(--navy); }
.stx-pcard[aria-pressed="true"] { border-color:var(--navy); background:var(--stx-tint-navy); }
.stx-pcard[aria-pressed="true"] .stx-pcard-badge { background:var(--navy); color:#fff; border-color:var(--navy); }
.stx-pcard-jayden { grid-column:1 / -1; border-left-color:var(--crimson); background:#fff; padding:20px 22px 20px 24px; }
.stx-pcard-jayden:hover { border-left-color:var(--crimson); }
.stx-pcard-jayden .stx-pcard-name { font-family:var(--serif); font-size:24px; color:var(--crimson); }
.stx-pcard-jayden .stx-pcard-holds { font-size:16px; color:var(--ink); }
.stx-pgrid-label { grid-column:1 / -1; font-size:13px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#475569; margin:10px 0 0 !important; }

/* ---------- Step 2: view ------------------------------------------------- */
.stx-role { font-size:18px; color:var(--ink); }
.stx-seen { list-style:none; padding:0; margin:18px 0 20px; display:grid; gap:10px; }
.stx-seen li { background:#fff; border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:8px; padding:14px 16px; line-height:1.55; color:var(--ink); }
.stx-seen-jayden li { border-left-color:var(--crimson); font-family:var(--serif); font-size:18px; font-style:italic; }
.stx-jayden-quote { margin:22px 0; padding:22px 24px; background:#fff; border:1px solid var(--stx-tint-crimson-line); border-left:6px solid var(--crimson); border-radius:12px; }
.stx-jayden-quote blockquote { margin:0; }
.stx-jayden-quote blockquote p { font-family:var(--serif); font-size:clamp(20px, 2.6vw, 25px); line-height:1.4; font-weight:600; color:var(--navy); margin:0 !important; max-width:none; }
.stx-jayden-quote figcaption { margin-top:10px; font-size:15px; font-weight:700; color:var(--crimson); }
.stx-jayden-quote-lg { padding:clamp(24px, 4.4vw, 44px); }
.stx-jayden-quote-lg blockquote p { font-size:clamp(24px, 3.8vw, 36px); line-height:1.3; }
.stx-partner { font-weight:700; color:var(--navy); font-size:18px; }

/* ---------- Form controls ----------------------------------------------- */
.stx-fieldset { border:0; padding:0; margin:26px 0 0; min-width:0; }
.stx-fieldset-flat { margin-top:20px; }
.stx-legend { font-family:var(--serif); font-size:clamp(19px, 2.4vw, 22px); font-weight:700; color:var(--navy); line-height:1.3; padding:0; margin:0 0 12px; }
.stx-label { display:block; font-size:15.5px; font-weight:700; color:var(--navy); margin:16px 0 6px; }
.stx-textarea, .stx-input, .stx-select { width:100%; max-width:100%; font:inherit; font-size:16px; line-height:1.5; color:var(--ink); background:#fff; border:2px solid #94A3B8; border-radius:8px; padding:10px 12px; min-height:48px; }
.stx-textarea { resize:vertical; }
.stx-textarea:focus, .stx-input:focus, .stx-select:focus { border-color:var(--teal); }
.stx-select { appearance:auto; }

.stx-checklist { display:grid; gap:10px; }
.stx-checklist-2col { grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.stx-check { display:flex; align-items:flex-start; gap:12px; background:#fff; border:2px solid var(--line); border-radius:10px; padding:12px 14px; cursor:pointer; line-height:1.5; color:var(--ink); min-height:52px; }
.stx-check:hover { border-color:#94A3B8; }
.stx-check input { flex:0 0 auto; width:22px; height:22px; margin:1px 0 0; accent-color:var(--navy); cursor:pointer; }
.stx-check:has(input:checked) { border-color:var(--navy); background:var(--stx-tint-navy); }
.stx-check:has(input:focus-visible) { outline:3px solid var(--stx-focus); outline-offset:2px; }
.stx-check-tag { display:inline-block; margin-left:6px; font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--stx-teal-ink); background:var(--stx-tint-teal); border:1px solid var(--stx-tint-teal-line); border-radius:999px; padding:0 8px; vertical-align:1px; }

.stx-chips { display:flex; flex-wrap:wrap; gap:8px; }
.stx-chip { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 14px; background:#fff; border:2px solid var(--line); border-radius:999px; font-size:15px; line-height:1.35; color:var(--ink); cursor:pointer; }
.stx-chip input { width:18px; height:18px; margin:0; accent-color:var(--navy); flex:0 0 auto; }
.stx-chip:has(input:checked) { border-color:var(--navy); background:var(--stx-tint-navy); font-weight:700; }
.stx-chip:has(input:focus-visible) { outline:3px solid var(--stx-focus); outline-offset:2px; }

/* ---------- Step 4: network + connect ----------------------------------- */
.stx-network-wrap { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:22px; align-items:start; margin:20px 0 6px; }
.stx-network { background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow:var(--shadow); min-width:0; }
.stx-network svg { display:block; width:100%; height:auto; }
.stx-network-side { min-width:0; }
.stx-network-side .stx-h3:first-child { margin-top:0; }
.stx-count { font-family:var(--serif); font-size:22px; font-weight:700; color:var(--navy); margin:0 0 10px !important; }
.stx-legend-list { list-style:none; padding:0; margin:0 0 16px; display:grid; gap:6px; font-size:14.5px; }
.stx-legend-list li { display:flex; align-items:center; gap:10px; }
.stx-key { width:18px; height:18px; border-radius:50%; flex:0 0 auto; }
.stx-key-start { background:var(--navy); box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--navy); }
.stx-key-on { background:var(--teal); }
.stx-key-off { background:#fff; border:2px dashed #64748B; }

.stx-threads { background:var(--stx-tint-teal); border:1px solid var(--stx-tint-teal-line); border-radius:12px; padding:16px 18px; }
.stx-threads-title { font-size:14px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--stx-teal-ink); margin:0 0 8px !important; }
.stx-threads ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.stx-threads li { font-size:15px; line-height:1.45; color:var(--ink); }
.stx-threads li strong { display:block; color:var(--navy); }
.stx-threads-empty { font-size:15px; color:#475569; margin:0 !important; }

.stx-connect-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px; }
.stx-connect { display:flex; align-items:center; gap:10px; width:100%; min-height:52px; text-align:left; padding:10px 14px; background:#fff; border:2px dashed #94A3B8; border-radius:10px; font:inherit; font-size:15.5px; font-weight:700; color:var(--navy); cursor:pointer; }
.stx-connect:hover { border-style:solid; border-color:var(--teal); background:var(--stx-tint-teal); }
.stx-connect svg { width:18px; height:18px; flex:0 0 auto; color:var(--teal); }
.stx-connect-jayden { border-color:var(--crimson); color:var(--crimson); }
.stx-connect-jayden svg { color:var(--crimson); }
.stx-connect-done { font-size:15.5px; color:#475569; }

.stx-reveal { background:#fff; border:1px solid var(--line); border-left:5px solid var(--teal); border-radius:12px; margin:0 0 14px; box-shadow:var(--shadow); }
.stx-reveal-jayden { border-left-color:var(--crimson); }
.stx-reveal > summary { list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:800; color:var(--navy); font-size:17px; min-height:52px; }
.stx-reveal > summary::-webkit-details-marker { display:none; }
.stx-reveal > summary::after { content:"Show"; font-size:13px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--teal); flex:0 0 auto; }
.stx-reveal[open] > summary::after { content:"Hide"; }
.stx-reveal-meta { font-size:13px; font-weight:700; color:#475569; margin-left:auto; text-transform:none; letter-spacing:0; }
.stx-reveal-body { padding:0 18px 18px; }
.stx-reveal-body .stx-seen { margin-top:4px; }
.stx-limit { font-size:15px; color:#475569; font-style:italic; }
.stx-react { border:0; padding:14px 0 0; min-width:0; margin:14px 0 0; border-top:1px solid var(--line); }
.stx-react legend { font-size:16px; font-weight:800; color:var(--navy); margin-bottom:10px; padding:0; }
.stx-react-opts { display:flex; flex-wrap:wrap; gap:8px; }
.stx-react-feedback { margin:10px 0 0 !important; font-size:15px; color:var(--stx-teal-ink); font-weight:600; }

/* ---------- Step 5: framework ------------------------------------------- */
.stx-pull { margin:4px 0 18px; padding:18px 22px; background:#fff; border:1px solid var(--line); border-left:5px solid var(--navy); border-radius:12px; }
.stx-pull p { font-family:var(--serif); font-size:clamp(19px, 2.4vw, 22px); line-height:1.45; font-weight:600; color:var(--navy); margin:0 !important; }
.stx-framework { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.stx-framework li { display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px; min-width:0; }
.stx-framework h4 { font-size:15.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--navy); margin:2px 0 2px; }
.stx-framework p { font-size:15px; line-height:1.5; margin:0 !important; }
.stx-fw-num { flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:#fff; border:2px solid var(--navy); color:var(--navy); font-weight:800; font-size:15px; display:inline-flex; align-items:center; justify-content:center; }
.stx-framework li.is-done { background:var(--stx-tint-teal); border-color:var(--stx-tint-teal-line); }
.stx-framework li.is-done .stx-fw-num { background:var(--teal); border-color:var(--teal); color:#fff; }
.stx-framework li.is-now { border:2px solid var(--navy); background:var(--stx-tint-navy); }
.stx-framework li.is-now .stx-fw-num { background:var(--navy); color:#fff; }
.stx-fw-tag { display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:2px; background:#fff; border:1px solid currentColor; }
.stx-framework li.is-done .stx-fw-tag { color:var(--stx-teal-ink); }
.stx-framework li.is-now .stx-fw-tag { color:var(--navy); }

/* ---------- Step 6: tools + messages ------------------------------------ */
.stx-tools { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin:18px 0 0; }
.stx-tool { background:var(--navy); color:#fff; border-radius:12px; padding:20px 22px; min-width:0; }
.stx-tool-title { font-family:var(--serif); font-size:22px; font-weight:700; margin:0 0 12px; color:#fff; }
.stx-tool-list { margin:0; display:grid; gap:8px; }
.stx-tool-list div { display:flex; gap:12px; align-items:baseline; }
.stx-tool-list dt { flex:0 0 auto; min-width:64px; font-weight:800; font-size:14px; letter-spacing:.6px; text-transform:uppercase; color:#8FD9CF; }
.stx-tool-list dd { margin:0; font-size:16px; color:rgba(255,255,255,.92); }

.stx-messages { display:grid; gap:10px; }
.stx-msg { display:flex; gap:12px; align-items:flex-start; background:#fff; border:2px solid var(--line); border-radius:10px; padding:14px 16px; cursor:pointer; line-height:1.55; }
.stx-msg input { flex:0 0 auto; width:22px; height:22px; margin:2px 0 0; accent-color:var(--navy); }
.stx-msg:has(input:checked) { border-color:var(--navy); background:var(--stx-tint-navy); }
.stx-msg:has(input:focus-visible) { outline:3px solid var(--stx-focus); outline-offset:2px; }
.stx-msg-label { display:block; font-size:13px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#475569; margin-bottom:4px; }
.stx-msg-text { display:block; color:var(--ink); white-space:pre-line; }
.stx-feedback { margin-top:14px; background:var(--stx-tint-navy); border:1px solid var(--stx-tint-navy-line); border-radius:10px; padding:16px 18px; }
.stx-feedback h4 { font-size:14px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--navy); margin:10px 0 4px; }
.stx-feedback h4:first-child { margin-top:0; }
.stx-feedback ul { margin:0; padding-left:20px; }
.stx-feedback li { font-size:15.5px; line-height:1.5; margin:2px 0; }

.stx-details { margin-top:18px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.stx-details > summary { cursor:pointer; padding:16px 18px; font-weight:800; color:var(--navy); min-height:52px; }
.stx-details-body { padding:0 18px 20px; }
.stx-sbar-grid, .stx-acl-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 16px; }
.stx-acl-grid { grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:8px; }
.stx-sbar-grid abbr { text-decoration:none; }
.stx-preview { background:var(--stx-tint-navy); border:1px dashed #94A3B8; border-radius:10px; padding:14px 16px; font-size:15.5px; line-height:1.6; color:var(--ink); white-space:pre-line; overflow-wrap:anywhere; }
.stx-preview-empty { color:#475569; font-style:italic; }

/* ---------- Step 7: actions --------------------------------------------- */
.stx-action { background:#fff; border:1px solid var(--line); border-left:5px solid var(--navy); border-radius:12px; padding:18px 20px 20px; margin:18px 0 0; box-shadow:var(--shadow); min-width:0; }
.stx-action-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.stx-action legend { font-family:var(--serif); font-size:20px; font-weight:700; color:var(--navy); padding:0; float:left; width:100%; }
.stx-action-grid { clear:both; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 16px; }
.stx-action-grid .stx-span { grid-column:1 / -1; }
.stx-action-confirm { margin-top:6px; padding:12px 14px 14px; background:var(--stx-tint-amber); border:1px solid var(--stx-tint-amber-line); border-radius:10px; }
.stx-action-confirm .stx-label { margin-top:0; color:var(--stx-amber-ink); }
.stx-remove { float:right; background:none; border:0; min-height:44px; padding:6px 8px; font:inherit; font-size:14.5px; font-weight:700; color:var(--crimson); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.stx-loopcheck { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.stx-loopcheck li { display:flex; gap:12px; align-items:flex-start; border-radius:10px; padding:12px 14px; font-size:15.5px; line-height:1.5; border:1px solid; }
.stx-loopcheck li svg { width:22px; height:22px; flex:0 0 auto; margin-top:1px; }
.stx-loopcheck .is-closed { background:var(--stx-tint-teal); border-color:var(--stx-tint-teal-line); color:var(--ink); }
.stx-loopcheck .is-closed svg { color:var(--teal); }
.stx-loopcheck .is-open { background:var(--stx-tint-amber); border-color:var(--stx-tint-amber-line); color:#3b2f1c; }
.stx-loopcheck .is-open svg { color:#8A5A12; }
.stx-loopcheck strong { color:var(--navy); }

/* ---------- Step 9 ------------------------------------------------------- */
.stx-summary-list { padding-left:22px; margin:0; display:grid; gap:6px; }
.stx-summary-list li { font-size:16px; line-height:1.45; color:var(--ink); }
.stx-summary-list .stx-sum-tag { font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#475569; margin-left:6px; }
.stx-finale { text-align:center; margin:32px 0 22px; background:var(--navy); color:#fff; border-radius:14px; padding:clamp(26px, 5vw, 50px); }
.stx-finale p { color:rgba(255,255,255,.9); margin-left:auto !important; margin-right:auto !important; }
.stx-finale-big { font-family:var(--serif); font-size:clamp(26px, 4.4vw, 42px); line-height:1.2; font-weight:700; color:#fff !important; text-transform:uppercase; letter-spacing:.01em; margin-bottom:22px !important; max-width:none !important; }
.stx-finale-big span { display:block; }
.stx-finale-big span + span { color:#8FD9CF; }
.stx-principle { margin:0; background:#fff; border:1px solid var(--line); border-top:6px solid var(--crimson); border-radius:14px; padding:clamp(24px, 4.4vw, 40px); box-shadow:var(--shadow); }
.stx-principle p { font-family:var(--serif); font-size:clamp(22px, 3.2vw, 32px); line-height:1.3; font-weight:700; color:var(--navy); margin:0 !important; max-width:30ch; }
.stx-principle p + p { color:var(--crimson); margin-top:6px !important; }
.stx-reflect { margin-top:26px; }
.stx-end { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:32px; }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width:820px) {
  .stx-network-wrap, .stx-tools, .stx-framework { grid-template-columns:1fr; }
  .stx-acl-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .stx-app { font-size:16.5px; }
  .stx-hero { border-left-width:5px; padding:24px 18px; }
  .stx-sbar-grid, .stx-action-grid { grid-template-columns:1fr; }
  .stx-pgrid, .stx-connect-grid, .stx-checklist-2col { grid-template-columns:1fr; }
  .stx-btn { padding:12px 18px; }
  .stx-btn-lg, .stx-end .stx-btn, .stx-challenge .stx-btn { width:100%; }
  .stx-nav .stx-btn { flex:1 1 0; min-width:0; }
  .stx-progress-steps { gap:4px; }
  .stx-progress-steps button { font-size:13px; min-height:40px; }
  .stx-action { padding:16px 14px 18px; }
  .stx-reveal > summary { padding:14px 14px; }
  .stx-reveal-body { padding:0 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .stx-app *, .stx-app *::before, .stx-app *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}
@media print {
  .site-topnav, .site-footer, .stx-progress, .stx-nav, .stx-end, .stx-resume, .breadcrumb { display:none !important; }
}