/* Member stories: /stories, /stories/<slug>, /stories/share and the story
   sections on route and exam pages. Uses the tokens from /app.css. */
.stgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 0 0 20px; }
.stcard { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.stcard:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.stcard b { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.15; }
.stcard small { color: var(--ink-soft); font-size: .85rem; }
.stex { color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.stexams { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.stexams span { font-size: .75rem; font-weight: 600; background: var(--blue-soft); color: var(--blue); border-radius: 999px; padding: 2px 10px; }
.sttag { align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); background: var(--mint-soft); border-radius: 999px; padding: 3px 10px; }
.sttag.onway { color: var(--coral-deep); background: var(--coral-soft); }
.stsec { margin: 48px 0; }
.stsec .tline a { font-weight: 600; }
.stnote { font-size: .88rem; color: var(--ink-soft); margin: 0 0 14px; }

/* Filters */
.stfilter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 22px; }
.stfilter label { display: block; flex: 1 1 200px; max-width: 280px; }
.stfilter label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.stfilter select { width: 100%; }
.stpager { display: flex; justify-content: space-between; margin-top: 12px; }
.stempty p { max-width: 36em; margin-inline: auto; }

/* One story */
.story { max-width: 720px; margin: 0 auto; }
.story .crumbs { font-size: .85rem; color: var(--ink-soft); margin: 0 0 18px; }
.story .crumbs a { color: var(--ink-soft); }
.story h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.stby { color: var(--ink-soft); font-size: .95rem; margin: 0 0 20px; }
.stdisclaimer { background: var(--coral-soft); border-radius: 14px; padding: 12px 16px; font-size: .93rem; margin: 0 0 22px; }
.stfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 0 0 28px; }
.stfacts div { padding: 10px 14px; box-shadow: 1px 1px 0 var(--line); }
.stfacts dt { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.stfacts dd { margin: 2px 0 0; font-size: .95rem; }
.stbody p { margin: 0 0 1.1em; font-size: 1.08rem; line-height: 1.7; overflow-wrap: anywhere; }
.stadvice { border-inline-start: 4px solid var(--coral); background: var(--surface); border-radius: 0 14px 14px 0; padding: 16px 20px; margin: 28px 0; }
.stadvice h2 { font-size: 1.5rem; }
.stadvice p { margin: 0 0 .8em; overflow-wrap: anywhere; }
.fine { font-size: .85rem; color: var(--ink-soft); }
.stnext { max-width: 720px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.stlink { padding: 18px 20px; border-radius: 18px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.stlink span { color: var(--blue); font-size: .92rem; }

/* Share form */
.stshare { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-bottom: 24px; }
@media (max-width: 860px) { .stshare { grid-template-columns: 1fr; } .stshare aside { order: -1; } }
.strules { padding: 22px; }
.strules h2 { font-size: 1.5rem; }
.strules ul { margin: 0; padding-inline-start: 18px; font-size: .92rem; color: var(--ink-soft); }
.strules li { margin-bottom: 8px; }
.strules b { color: var(--ink); }
.stform .check { margin: 0 0 12px; }
.stform .btn { margin-top: 6px; }
.stexsel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .stexsel { grid-template-columns: 1fr; } }
.count { display: block; text-align: end; font-size: .8rem; color: var(--ink-soft); margin-top: 4px; }
.count.low { color: var(--coral-deep); }
.stmine { margin-top: 32px; }
.stmine ul { list-style: none; padding: 0; margin: 0 0 8px; }
.stmine li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.stmine li small { grid-column: 2; color: var(--ink-soft); font-size: .85rem; }
.stmine li .del { grid-row: 1; grid-column: 3; font-size: .9rem; }
.ststatus { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; padding: 3px 10px; background: var(--blue-soft); color: var(--blue); white-space: nowrap; }
.ststatus.published { background: var(--mint-soft); color: var(--mint); }
.ststatus.rejected { background: var(--coral-soft); color: var(--coral-deep); }
@media (max-width: 520px) { .stmine li { grid-template-columns: 1fr auto; } .stmine li small { grid-column: 1 / -1; } .stmine li .del { grid-column: 2; } }