/* --------------- AO3 THEME (site-wide) --------------- */
/* Palette: deep navy/black + pale sky blue accents */
:root{
  --bg:#000;                 /* page background */
  --panel:#0f1726;           /* blurb panel interior */
  --accent:#0286CE;          /* bright AO3 blue (borders / accents) */
  --accent-2:#364082;        /* alternate header blue */
  --muted:#7c94c3;           /* muted text */
  --text:#B0E0E6;            /* primary text */
 /* --tag-bg:#171e43;           default tag bg */
  --tag-border:#0286CE;
  --card-border-radius:2em;
  --card-border-thickness:4px;
  --card-padding:1.25rem;
  --max-content-width:45em;
  --shadow-inset: inset 0 0 5px rgba(4,102,155,0.45);
}

/* Page */
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Page wrapper and centered content width like AO3 */
.page {
  display:flex;
  justify-content:center;
  padding:2rem 1rem;
}
.main {
  width:100%;
  max-width:var(--max-content-width);
}

/* Blurb / card (rounded with thick border like screenshot) */
.feed-list {
  list-style:none;
  padding:0;
  margin:0;
}
.feed-item {
  background: linear-gradient(180deg, rgba(10,12,20,0.85), var(--panel));
  border: var(--card-border-thickness) solid var(--accent);
  border-radius: var(--card-border-radius);
  box-shadow: var(--shadow-inset);
  margin: 1.25rem 0;
  padding: var(--card-padding);
  color:var(--text);
  overflow: hidden;
}

/* Header area: title & author */
.feed-item .header {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-bottom:0.6rem;
}
.feed-item .heading a {
  color:var(--text);
  text-decoration:none;
  font-size:2rem;
  font-weight:600;
  display:inline-block;
}
.feed-item .heading a:hover { text-decoration:underline; color:var(--text); }
.feed-item .heading a + span.author {
  margin-left:0.35rem;
  font-weight:500;
  color:var(--muted);
  font-size:1.15rem;
}

/* datetime/top-left style (like screenshot small date) */
.feed-item .datetime-top {
  position:absolute;
  left:1.25rem;
  top:1.25rem;
  font-size:0.95rem;
  color:var(--accent);
}

/* Meta module: badges, summary, stats */
.feed-item .meta {
  margin-top:0.5rem;
  padding-top:0.6rem;
  border-top:1px solid rgba(255,255,255,0.02);
}

/* Tag rows container */
.tag-row {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin:0.45rem 0;
}

/* Generic AO3-like badge (reusable) */
.badge, .ao3-badge {
  display:inline-flex;
  align-items:center;
  background:var(--tag-bg);
  color:var(--text);
  padding:4px 12px;
  margin:2px 4px 2px 0;
  border-radius:15px;
  border:1px solid var(--tag-border);
  box-shadow: inset 1px 1px 3px rgba(2,134,206,0.12);
  font-size:0.95rem;
  text-decoration:none;
  white-space:nowrap;
  transition: background .18s ease, box-shadow .18s ease, transform .08s;
}

/* internal anchor inside badge */
.badge > a, .ao3-badge > a {
  color:var(--text);
  text-decoration:none;
  line-height:1;
  display:inline-block;
}


/* Specific color variants */
.badge.fandoms, .ao3-badge.fandom { background:#233679; border-color:#2b4aa1; }
.badge.relationships, .ao3-badge.relationship { background:#122f50; border-color:#22476f; }

/* Hover effect approximating AO3 */
.badge:hover, .ao3-badge:hover {
  background: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
  color:#07121b;
  box-shadow: 1px 3px 10px -3px rgba(0,0,0,0.7);
  transform: translateY(-1px);
}

/* Summary blockquote styling */
.summary {
  margin: 0.75rem 0 1rem 0;
  font-size:1.05rem;
  color:var(--text);
  background:transparent;
  white-space:pre-wrap;
}

/* Stats inline (words, chapters) */
.stats {
  display:flex;
  gap:1rem;
  align-items:center;
  color:var(--muted);
  font-size:0.95rem;
  margin-top:0.5rem;
}
.stats dt{ font-weight:600; color:var(--accent-2); display:inline; margin-right:.25rem; }
.stats dd{ display:inline; margin:0; color:var(--text); }

/* actions area (links like bookmarks, kudos) */
.actions {
  margin-top:0.75rem;
  display:flex;
  gap:0.75rem;
  align-items:center;
}
.actions a {
  background: #1f254a;
  color: var(--text);
  padding: .25rem .75rem;
  border-radius:.25em;
  border:1px solid #6896d0;
  text-decoration:none;
  box-shadow: inset 0 -8px 4px #12162c, inset 0 8px 7px #2b476b;
  font-size:0.95rem;
}
.actions a:hover { color:var(--muted); border-color:#000; box-shadow: inset 2px 2px 2px #000; }

/* small UI helpers */
.heading-small { font-size:0.9rem; color:var(--muted); }
.muted { color:var(--muted); }

/* Responsive adjustments */
@media (max-width:640px) {
  .feed-item { padding:1rem; border-radius:1.25em; }
  .feed-item .heading a { font-size:1.5rem; }
  .stats { flex-wrap:wrap; gap:.5rem; font-size:.95rem; }
  .datetime-top { display:none; }
}

/* Accessibility: focus outlines for keyboard nav */
a:focus, button:focus {
  outline:3px solid rgba(135,206,250,0.25);
  outline-offset:2px;
}

/* Keep list-style tidy for tags */
.fandom-badges, .ship-badges { list-style:none; padding:0; margin:0; display:flex; gap:6px; flex-wrap:wrap; }

/* Small optional tweaks to match screenshot */
.feed-item h4.heading { margin:0 0 .35rem; color:var(--accent-2); font-weight:700; text-align:center; }
.feed-item .header small { display:block; color:var(--muted); margin-top:.4rem; }

/* Make sure blockquote userstuff summary uses the same fonts and margins as screenshot */
.userstuff.summary { font-size:1.05rem; color:var(--text); line-height:1.6; margin: .6rem 0; }

/* Global link color */
a, a:link { color: var(--text); }
a:visited { color: #7c94c3; }

/* Container centering for the whole site (wrap your content in .page .main) */
.page { padding:2rem 1rem; }
.main { margin: 0 auto; width:100%; max-width:var(--max-content-width); }

/* Optional: subtle page inner ring similar to screenshot rounded border */
.site-shell {
  border-radius: 1.5em;
  border: 3px solid rgba(11,72,120,0.08);
  padding: 1rem;
}
/* ------------------ */
/* DRAWER + OVERLAY   */
/* ------------------ */

.drawer {
  position: fixed;
  right: -400px;              /* hidden off-screen */
  top: 0;
  width: 400px;
  max-width: 90%;
  height: 100%;
  background: #ffffff;
  box-shadow: -2px 0 6px rgba(0,0,0,0.25);
  padding: 20px;
  transition: right 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Same easing AO3 uses for slide-out modals */
  z-index: 10002;
  overflow-y: auto;
}

/* Drawer open state */
.drawer.open {
  right: 0;
}

/* Dimmed background overlay */
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  z-index: 10001;
}

/* Overlay visible when drawer is open */
.drawer-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* Header */
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

/* Close button */
.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}