/* The proofs ("Break-in stories" in the API); .st-mounted = inside the App page under "Break-in proofs" */
.st-select{background:var(--raised);color:var(--t1);border:1px solid var(--line-2);border-radius:var(--r-md);padding:7px 10px;font:inherit;font-size:12.5px;max-width:240px}
.st-list{display:flex;flex-direction:column;gap:12px}
.st-card{overflow:hidden}
.st-head{width:100%;display:grid;grid-template-columns:auto auto auto 1fr auto auto;align-items:center;gap:10px;padding:14px 16px;text-align:left;background:none;border:0;color:var(--t1);cursor:pointer}
.st-head:hover{background:var(--elev)}
.st-kicker{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);white-space:nowrap}
.st-title{font-size:13.5px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-proj{font-family:var(--mono);font-size:10.5px;color:var(--t3);white-space:nowrap}
.st-chev{color:var(--t3);font-size:16px;width:16px;text-align:center}
/* severity is not hostile traffic: no red. high = text colour, medium = muted, low = hairline */
.st-sev-high{color:var(--t1);background:var(--elev);border-color:var(--line-strong)}
.st-sev-med{color:var(--t2);background:var(--elev);border-color:var(--line-2)}
.st-sev-low{color:var(--t3);background:var(--elev);border-color:var(--line-2)}
#view-story .sd.high{background:var(--t1)} #view-story .sd.med{background:var(--t3)} #view-story .sd.low{background:var(--line-strong)}
.st-body{padding:4px 16px 16px;border-top:1px solid var(--line)}
.st-body .story-summary{margin:12px 0 16px}
.st-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.st-fact{display:flex;flex-direction:column;gap:3px;padding:9px 11px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md)}
.st-fact .k{font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.04em}
.st-fact .v{font-size:12.5px;color:var(--t1);font-family:var(--mono);word-break:break-all}
.st-p{font-size:13px;color:var(--t2);line-height:1.55;margin:0}
.st-muted{color:var(--t3);font-size:12px}
.st-steps{margin:0;padding-left:20px;font-size:13px;color:var(--t2);line-height:1.6}
.st-transcript{display:flex;flex-direction:column;gap:8px}
.st-pre{margin:0;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);font-family:var(--mono);font-size:11.5px;color:var(--t2);white-space:pre-wrap;word-break:break-word;line-height:1.5}
.st-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.st-empty{padding:22px 16px;color:var(--t3);font-size:13px;line-height:1.6}
.st-empty b{color:var(--t1)}
@media (max-width:860px){.st-head{grid-template-columns:auto auto 1fr auto;gap:8px}.st-kicker{display:none}.st-proj{grid-column:1 / -1}}
@media (max-width:560px){.st-select{max-width:100%;width:100%}.st-head{grid-template-columns:auto auto 1fr;gap:8px}.st-head .st-chev{justify-self:end}.st-title{white-space:normal;grid-column:1 / -1}.st-proj{grid-column:1 / -1}}

.st-line{margin-bottom:12px}
.st-card.st-done .st-title{color:var(--t2)}
.st-proj:empty{display:none}
.st-mounted .st-head{grid-template-columns:auto auto auto 1fr auto auto}
@media (max-width:860px){.st-mounted .st-head{grid-template-columns:auto auto 1fr auto}.st-mounted .st-proj{grid-column:1 / -1}}
@media (max-width:720px){#view-story .act-btn,#view-story .st-head{min-height:44px}}