/* style.css — Global AO3 skin + feed styles (optimized)
   - Consolidated and cleaned
   - Preserves your AO3 overrides visually
   - Does NOT include filter-panel specific colors (filters.css holds those)
*/

/* --- GLOBAL LAYOUT & NO-HORIZONTAL-SCROLL FIX --- */

/* Ensure no horizontal scrolling or clipped edges */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure all structural wrappers stay within the viewport */
#page-wrapper,
#main-container,
.wrapper,
.container {
    max-width: 98%;
    overflow-x: hidden;
}

/* Prevent padding/margin from causing overflow */
* {
    box-sizing: border-box;
}

/* AO3-style centered column layout */
body {
    padding: 1%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: calc(var(--header-room) + 2rem); /* to avoid header overlap */
}

/* Main page content area — match AO3 proportions */
#content {
    width: auto;
    max-width: 1200px;  /* Option A: ideal AO3-style width cap */
    margin: 0 auto;
    padding: 0 1rem;    /* small breathing room on both sides */
}

/* root colors (mostly preserve current theme) */
:root{
  --space-btwn: auto;
  --page-bg: #000;
  --panel: #0f1726;
  --accent: #0286CE;
  --accent-2: #364082;
  --muted: #7c94c3;
  --text: #B0C4DE;
  --tag-border: var(--accent);
  --card-radius: 2em;
  --card-border: 4px;
  --card-padding: 1.25rem;
  --max-content-width: 75%;
  --shadow-inset: inset 0 0 5px rgba(4,102,155,0.45);
  --header-room: 5rem;
}

/* base page */
html, body {
  height:100%;
  background: var(--page-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;
}
html { scroll-behavior:none; overflow-y: hidden; }

/* layout */
.page { display:flex; padding:2rem 1rem; gap: var(--space-btwn); margin-left: var(--space-btwn); margin-right: var(--space-btwn); align-items:flex-start; max-width: 100%; }
.main { width: auto; max-width:var(--max-content-width); min-width: 400px; margin:0 auto; flex: 3; }

/* feed / blurb */
.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) solid var(--accent);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-inset);
  margin: 1.25rem 0;
  padding: var(--card-padding);
  color:var(--text);
  overflow:hidden;
  position:relative;
}

header {
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  height: 4rem;
  background-color: #000;
  border-bottom: 1rem solid #21217C;
  box-shadow: inset 0 -5px 10px rgba(0,0,0,0.5);
  display: block;
  position: fixed;
}
header h1 {
  top: .5rem;
  color: #3A84C8;
  font-size: 1.5rem;
  line-height: 3rem;
  margin: 0;
  padding: 0 1rem;
}

header button {
  background: #0286CE;
  border: none;
  color: white;
  padding: .5rem 1rem;
  border-radius: .25rem;
  cursor: pointer;
}

#buttonsPanel {
    display: flex;
  position: absolute;
  right: 1rem;
  top: .75rem;
}

span.by,
.datetime {
  color: #3A84C8 !important;
}

.datetime {
  font-weight: bold;
}

.feed-item .header { display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:.6rem; }
.feed-item .heading a, .series-link a { color: #B0E0E6; text-decoration:none; font-size:2rem; font-weight:600; display:inline-block; }
.feed-item .heading a + .author { margin-left:.35rem; color: #B0E0E6; font-weight:500; }

/* meta area */
.feed-item .meta { margin-top:.5rem; padding-top:.6rem; border-top:1px solid rgba(255,255,255,0.02); }

/* tags / badges */
ul.tags { max-height: 12em; overflow-y: auto; }

.tag-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:.45rem 0; }
.badge, .ao3-badge {
  display:inline-flex; align-items:center; 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:.95rem; text-decoration:none; white-space:nowrap; color:var(--text); background:transparent;
}
.badge > a, .ao3-badge > a { color:var(--text); text-decoration:none; line-height:1; display:inline-block; }
.badge.fandoms { background:#233679; border-color:#2b4aa1; }
.badge.relationships { background:#122f50; border-color:#22476f; }
.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 & stats */
.summary { margin:.75rem 0 1rem 0; font-size:1.05rem; white-space:pre-wrap; color:var(--text); max-height: 12em; overflow-y: auto; }
.stats { display:flex; gap:1rem; align-items:center; color:var(--muted); font-size:.95rem; margin-top:.5rem; }
.stats dt { font-weight:600; color:var(--accent-2); margin-right:.25rem; }
.stats dd { margin:0; color:var(--text); }

/* actions */
.actions { margin-top:.75rem; display:flex; gap:.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; }
.actions a:hover { color:var(--muted); border-color:#000; box-shadow: inset 2px 2px 2px #000; }

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

/* filters area defaults (non-filter specific colors live in filters.css) */
.filter-drawer { /* minimal fallback; full styles are in filters.css */ box-sizing:border-box; }

/* feed responsive tweaks */
@media (max-width: 42em) {
 /* .page { display:block; padding:1rem; } */
  .feed-item { margin:.8rem 0; padding:.85rem; border-radius:1.25rem; }
  .feed-item .heading a { font-size:1.25rem; }
}

/* keep a few helpful AO3-like adjustments */
.fandom-badges, .ship-badges { list-style:none; padding:0; margin:0; display:flex; gap:6px; flex-wrap:wrap; }
.heading-small { font-size:.9rem; color:var(--muted); }
.muted { color:var(--muted); }

/* small utilities preserved from your theme */
.filters .expander::before { content: "➙ "; }
.filters .expanded .expander::before { content: "➘ "; }

/* Add near your feed-item styling */
.feed-item { position: relative; }
.complete-star,
.rating-sym {
  width: 2rem;
  height: 2rem;
  position: absolute;
  background: rgba(31,37,74,0.95);
  border: 1px solid rgba(104,150,208,0.6);
  padding: 6px 8px;
  border-radius: 6px;
  box-shadow: inset 0 -4px 3px rgba(0,0,0,0.35);
}
.rating-sym {
    left: 12px;
    top: 12px;
}

.complete-star {
    right: 12px;
    top: 12px;
}

.complete-star .star-symbol, .rating-sym .sym-symbol { font-size: 20px; color: #B0E0E6; font-weight: 600; transform: scale(1.5); transform: translate(-5px, -10px) }

::-webkit-scrollbar {
  display: none;
}