@import url("palette.css?v=3");
@import url("button-suite.css?v=4");

.my-stories-main { max-width: 860px; }
.my-stories-heading { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.my-stories-heading .archive-title { margin-bottom: 1px; }
.my-stories-account { min-height: 18px; margin: 0; color: var(--palette-sky); font-size: 13px; }
.my-stories-editor-link, .my-stories-sign-in a { min-height: 44px; display: inline-grid; place-items: center; padding: 9px 14px; border: 1px solid rgba(var(--palette-white-rgb), 0.25); border-radius: 10px; background: var(--palette-navy); color: var(--palette-white); font-weight: 700; text-decoration: none; white-space: nowrap; }
.my-stories-editor-link:hover, .my-stories-sign-in a:hover { border-color: var(--palette-sky); background: rgba(var(--palette-white-rgb), 0.25); }
.my-stories-editor-link:focus-visible, .my-stories-sign-in a:focus-visible, .my-story-card:focus-visible { outline: 3px solid var(--palette-sky); outline-offset: 2px; }
.my-stories-status { margin: 0; padding: 12px 2px; }
.my-stories-sign-in { padding: 20px; border: 1px solid rgba(var(--palette-white-rgb), 0.25); border-radius: 14px; background: var(--palette-navy); }
.my-stories-sign-in h2 { margin: 0 0 7px; font-size: 21px; }
.my-stories-sign-in p { margin: 0 0 16px; color: rgba(var(--palette-white-rgb), 0.8); line-height: 1.45; }
.my-stories-list { display: grid; gap: 12px; }
.my-stories-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0; }
.my-stories-controls select, .my-stories-controls button, #my-stories-password-form button { min-height:44px; padding:8px 12px; background:rgba(var(--palette-white-rgb), 0.25); border:1px solid rgba(var(--palette-white-rgb), 0.5); border-radius:10px; color:var(--palette-white); }
.my-stories-controls[hidden], .my-stories-sign-in[hidden], .my-stories-editor-link[hidden] { display: none; }
.my-stories-authors { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0 20px; }
.my-stories-author { display:flex; align-items:center; gap:8px; border:1px solid rgba(var(--palette-white-rgb), 0.5); border-radius:30px; padding:5px 11px 5px 5px; color:var(--palette-white); }
.my-stories-author-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:rgba(var(--palette-white-rgb), 0.25); font-weight:700; }
.my-stories-author-icon img { grid-column:1; grid-row:1; width:38px; height:38px; border-radius:50%; object-fit:cover; }
.my-stories-section { margin:22px 0 12px; padding-bottom:8px; border-bottom:2px solid rgba(var(--palette-white-rgb), 0.5); font-size:19px; color:var(--palette-sky); }
#my-stories-account-settings { margin-top:28px; color:rgba(var(--palette-white-rgb), 0.8); }
#my-stories-password-form { display:grid; gap:12px; margin-top:12px; }
#my-stories-password-form label { display:grid; gap:5px; }
#my-stories-password-form input { min-height:42px; padding:8px; background:var(--palette-navy); border:1px solid rgba(var(--palette-white-rgb), 0.25); color:var(--palette-white); }
.my-story-card { --thumbnail-width: 150px; min-height: 112px; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(var(--palette-white-rgb), 0.25); border-radius: 13px; background: var(--palette-black); color: var(--palette-white); text-decoration: none; }
.my-story-card:hover { border-color: var(--palette-sky); }
.my-story-card.has-cover { grid-template-columns: var(--thumbnail-width) minmax(0, 1fr); }
.my-story-card img { grid-column: 1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 16 / 9; align-self: start; object-fit: contain; background: var(--palette-black); }
.my-story-copy { grid-column: 1 / -1; grid-row: 1; min-width: 0; padding: 13px 15px; display: flex; flex-direction: column; justify-content: center; }
.has-cover .my-story-copy { grid-column: 2; }
.my-story-meta { color: var(--palette-sky); font-size: 11px; font-weight: 750; letter-spacing: .035em; }
.my-story-title { margin: 5px 0 6px; overflow-wrap: anywhere; font-size: 20px; line-height: 1.15; }
.my-story-subtitle { overflow: hidden; color: rgba(var(--palette-white-rgb), 0.8); font-size: 13px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.my-story-footer { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 9px 14px 11px; border-top: 1px solid var(--palette-navy); }
.my-story-badge { padding: 5px 8px; border: 1px solid rgba(var(--palette-white-rgb), 0.5); border-radius: 999px; background: var(--palette-navy); color: var(--palette-sky); font-size: 10px; font-weight: 750; letter-spacing: .05em; }
.my-story-badge[data-access="private"] { border-color: var(--palette-sky); background: rgba(var(--palette-white-rgb), 0.1); color: var(--palette-sky); }
.my-story-badge[data-access="unlisted"] { border-color: rgba(var(--palette-amber-rgb), 0.5); background: rgba(var(--palette-amber-rgb), 0.25); color: var(--palette-amber); }
.my-story-collection { min-width: 0; overflow: hidden; color: rgba(var(--palette-white-rgb), 0.8); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }

@media (max-width: 600px) {
  .my-stories-heading { align-items: flex-end; }
  .my-stories-editor-link { padding: 7px 10px; font-size: 12px; }
  .my-story-card { --thumbnail-width: 112px; }
  .my-story-copy { padding: 11px 12px; }
  .my-story-title { font-size: 17px; }
}