/* =====================================================================
   stories.css (2026-10-30, Phase 1 step 2): My stories, the story editor and a collection.
   Sits on aks-admin.css (cards, fields, save bar); only what those don't have.
   ===================================================================== */

.st-page { --st-navy: #102f56; --st-muted: #617286; --st-line: #e4e9ee; --st-soft: #f5f8fc; }

.st-section { margin: 0 0 22px; }
.st-h2 { margin: 0 0 10px; color: var(--st-navy); font-size: 1rem; font-weight: 600; }
.st-empty { margin: 0; padding: 18px; border: 1px dashed var(--st-line); border-radius: 12px; color: var(--st-muted); background: #fff; }

/* visibility chip */
.st-vis { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; vertical-align: 1px; margin-right: 6px; }
.st-vis--private { background: #eef1f5; color: #4a5a6c; }
.st-vis--unlisted { background: #fff4e0; color: #8a5d12; }
.st-vis--published { background: #e6f4ec; color: #2f7d55; }

/* collection cards */
.st-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.st-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--st-line); border-radius: 12px; overflow: hidden; background: #fff; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.st-card:hover { border-color: #c9d3de; box-shadow: 0 4px 14px rgba(16, 47, 86, .08); }
.st-card-img { display: block; aspect-ratio: 16 / 10; background: var(--st-soft); }
.st-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-card-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.st-card-body b { color: var(--st-navy); font-weight: 600; }
.st-card-body small { color: var(--st-muted); font-size: .82rem; }

/* story rows */
.st-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--st-line); border-radius: 12px; background: #fff; overflow: hidden; }
.st-list > li + li { border-top: 1px solid var(--st-line); }
.st-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: inherit; text-decoration: none; }
a.st-row:hover, .st-row a.st-row-body:hover b { color: #173f66; }
a.st-row:hover { background: #fafbfd; }
.st-row-img { flex: 0 0 56px; height: 42px; border-radius: 6px; overflow: hidden; background: var(--st-soft); }
.st-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.st-row-body b { color: var(--st-navy); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-row-body small { color: var(--st-muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-move { display: flex; gap: 4px; flex: 0 0 auto; }

/* small square buttons and text buttons */
.st-icon { width: 30px; height: 30px; border: 1px solid var(--st-line); border-radius: 8px; background: #fff; color: var(--st-navy); font-size: .9rem; line-height: 1; cursor: pointer; }
.st-icon:hover:not(:disabled) { border-color: #c9d3de; background: var(--st-soft); }
.st-icon:disabled { opacity: .35; cursor: default; }
.st-link { border: 0; background: none; padding: 4px 2px; color: #2563a8; font-size: .82rem; font-weight: 500; cursor: pointer; }
.st-link:hover { text-decoration: underline; }
.st-link--danger { color: #b42318; }

/* labels: the optional note */
.st-page .aks-f-label > span, .st-page .aks-f-label small { margin-left: 4px; color: #8a99a8; font-weight: 400; font-size: .85em; }

/* editor: word count */
.st-words.is-over { color: #b42318; font-weight: 600; }

/* editor: step times */
.st-steps { margin: 0; padding: 0; list-style: none; }
.st-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 84px; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #f0f3f6; }
.st-steps li:first-child { border-top: 0; }
.st-step-n { width: 24px; height: 24px; border-radius: 50%; background: #eef2f7; color: var(--st-navy); font-size: .75rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.st-step-text { color: #344b61; font-size: .88rem; line-height: 1.4; }
.st-step-time { width: 84px; text-align: center; font-variant-numeric: tabular-nums; }

/* editor: photos */
.st-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 0 0 14px; padding: 0; list-style: none; }
.st-photo { position: relative; display: flex; flex-direction: column; border: 1px solid var(--st-line); border-radius: 10px; overflow: hidden; background: #fff; }
.st-photo.is-cover { border-color: #c88a22; box-shadow: 0 0 0 1px #c88a22; }
.st-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--st-soft); }
.st-photo-badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; background: #c88a22; color: #fff; font-size: .7rem; font-weight: 600; }
.st-photo-tools { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.st-photo-cap { display: flex; gap: 6px; }
.st-photo-cap input { flex: 1 1 auto; min-width: 0; height: 30px; font-size: .82rem; }
.st-photo-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-upload input[type=file] { max-width: 100%; font-size: .85rem; }

/* collection */
.st-page .st-kind { border: 0; padding: 0; margin: 0; display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; }
.st-kind legend { width: 100%; margin-bottom: 6px; }
.st-kind label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--st-line); border-radius: 10px; cursor: pointer; background: #fff; }
.st-kind label:has(input:checked) { border-color: var(--st-navy); box-shadow: 0 0 0 1px var(--st-navy); }
.st-kind small { color: var(--st-muted); }
.st-dates-row { display: flex; align-items: center; gap: 8px; }
.st-dates-row input { flex: 1 1 0; min-width: 0; }
.st-dates-row span { color: var(--st-muted); font-size: .85rem; }

.aks-admin-actions form { display: inline; margin: 0; }

@media (max-width: 600px) {
    .st-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .st-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .st-steps li { grid-template-columns: 24px minmax(0, 1fr) 70px; }
    .st-step-time { width: 70px; }
}

/* space between the save bar and the card under it (collection: "Stories in it") */
.st-page form + .aks-card, .st-page form + section { margin-top: 18px; }

/* a collection with no photos yet: say where the cover comes from instead of a blank block */
.st-card-img.is-empty { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 7; background: linear-gradient(135deg, #f5f8fc, #eef2f7); }
.st-card-img.is-empty::after { content: "Cover comes from its first story"; color: #8a99a8; font-size: .78rem; }
.st-row-img.is-empty { background: linear-gradient(135deg, #f5f8fc, #eef2f7); }

/* who can see it (step 3) */
.st-page .st-visibility { margin-top: 18px; }
.st-vis-form { display: flex; flex-direction: column; gap: 14px; }
.st-vis-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st-vis-choices label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--st-line); border-radius: 10px; background: #fff; cursor: pointer; }
.st-vis-choices label:has(input:checked) { border-color: var(--st-navy); box-shadow: 0 0 0 1px var(--st-navy); }
.st-vis-choices label.is-off { opacity: .5; cursor: not-allowed; }
.st-vis-choices input { margin-top: 3px; }
.st-vis-choices span { display: flex; flex-direction: column; gap: 2px; }
.st-vis-choices b { color: var(--st-navy); font-weight: 600; }
.st-vis-choices small { color: var(--st-muted); font-size: .8rem; line-height: 1.35; }
.st-vis-actions { display: flex; justify-content: flex-end; gap: 10px; }
.aks-admin-lead a { color: #102f56; overflow-wrap: anywhere; }
@media (max-width: 700px) { .st-vis-choices { grid-template-columns: 1fr; } }

/* a two-click confirm (stories.js): the armed button stands out */
.st-link--danger.is-armed { color: #fff; background: #b42318; border-radius: 6px; padding: 4px 8px; }
.aks-btn--danger.is-armed { box-shadow: 0 0 0 3px rgba(180, 35, 24, .25); }

/* My stories (2026-10-31): a row or card opens the page; Edit opens the editor */
.st-row--split { padding: 0 12px 0 0; gap: 10px; }
.st-row-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: inherit; text-decoration: none; }
.st-row-main:hover { background: #fafbfd; }
.st-row-main:hover b { color: #173f66; text-decoration: underline; }
/* .st-editbtn, not .st-edit: the story editor's page wrapper is .st-edit (Edit.cshtml) */
.st-editbtn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 30px; padding: 0 12px; border: 1px solid var(--st-line); border-radius: 8px; background: #fff; color: var(--st-navy); font-size: .82rem; font-weight: 500; text-decoration: none; }
.st-editbtn:hover { background: var(--st-soft); border-color: #c9d3de; }
.st-editbtn i { font-size: .72rem; }
.st-card-wrap { position: relative; }
.st-card-wrap .st-editbtn { position: absolute; top: 8px; right: 8px; box-shadow: 0 1px 4px rgba(16, 47, 86, .12); }
@media (max-width: 480px) {
    .st-row--split .st-vis { display: none; }
    .st-editbtn { padding: 0 10px; }
}

/* 2026-10-31, step 4: Publish needs the site admin's OK once per author */
.st-vis-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: #f6f8fb; color: #4a5b6e; font-size: .86rem; }
.st-vis-note i { color: #617286; margin-right: 4px; }

/* 2026-10-31: where a story lives (My stories), and adding stories to a collection (collection editor) */
.st-row-body small.st-where { color: #8a6a2a; font-size: .78rem; }
.st-add { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--st-line); }
.st-add-h { margin: 0 0 8px; color: var(--st-navy); font-size: .9rem; font-weight: 600; }
.st-add .st-row { align-items: center; }
.st-add-new { margin: 14px 0 0; font-size: .9rem; }
.st-add-new a { color: #2563a8; font-weight: 500; text-decoration: none; }
.st-add-new a:hover { text-decoration: underline; }

/* 2026-10-31: the link and Copy link in the editors */
.st-share-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.st-share-line a { color: #2563a8; font-weight: 500; overflow-wrap: anywhere; }
.st-share-btn { margin-left: 8px; vertical-align: middle; }
button.st-editbtn { cursor: pointer; font: inherit; font-size: .82rem; }