.ffp-post {
    border: 1px solid var(--cfs-cffc0cf);
    padding: 5px;
    margin-bottom: 20px;
    border-radius: 8px;
    background-color: var(--cfs-cffc0cf)9a;
}

.ffp-post-title {
    border-radius: 8px;
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--cfs-c6b182b) !important;
}

.ffp-post-description {
    position: relative;
    max-height: calc(1.5em * 10); /* 10 lines at 1.5 line-height */
    overflow: hidden;
    transition: max-height 0.3s ease;
    line-height: 1.5em;
    border-radius: 8px;
    background-color: var(--cfs-cffc0cf)9a;
    font-size: 20px;
    color: var(--cfs-c6b182b);
}
.ffp-post-description.expanded {
    max-height: none;
}

.ffp-toggle-description {
    display: inline-block;
    margin-top: 5px;
    color: var(--cfs-c6b182b);
    cursor: pointer;
    font-weight: bold; 
}

.ffp-post-time {
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    color: var(--cfs-c6b182b);
    margin-top: 10px;
}

.ffp-post-author {
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    color: var(--cfs-c6b182b);
    margin-top: 10px;
}

.ffp-post-etitle {
    background-color:var(--cfs-cffc0cf)9a !important;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    color: var(--cfs-c6b182b);
    margin-top: 10px;
}

.ffp-post-edescription {
    background-color:var(--cfs-cffc0cf)9a;    
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    color: var(--cfs-c6b182b);
    margin-top: 10px;
}

.ffp-post-edescription:focus {
    background-color: var(--cfs-cffc0cf)9a; /* Keep background white */
    outline: none; /* Removes the blue/black focus ring */
    box-shadow: none; /* No glow effect */
}

.ffp-post-etags {
    background-color:var(--cfs-cffc0cf)9a !important;
    border-radius: 8px;
    font-size: 12px !important;
    font-weight: bold !important;
    color: var(--cfs-c6b182b);
    margin-top: 10px;
}

.ffp-post-rtitle {
    background-color:var(--cfs-cffc0cf)9a !important;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold; 
    color: var(--cfs-c6b182b);
    margin-top: 10px;
}

.ffp-post-rdescription {
    background-color:var(--cfs-cffc0cf)9a !important;    
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    color: var(--cfs-c6b182b);
    margin-top: 10px;
}

.ffp-post-rdescription:focus {
    background-color: var(--cfs-cffc0cf)9a !important; /* Keep background white */
    outline: none; /* Removes the blue/black focus ring */
    box-shadow: none; /* No glow effect */
}

.ffp-post-rtags {
    background-color:var(--cfs-cffc0cf)9a !important;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    color: var(--cfs-c6b182b);
    margin-top: 10px;
}

.ffp-main-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row; /* desktop: sidebar left, posts right */
}

/* Sidebar */
.ffp-filter-container {
    min-width: 160px;
    max-width: 200px;
    padding-right: 10px;
    background: var(--cfs-cffc0cf)9a;
    border: 1px solid var(--cfs-cffc0cf) !important;
    border-radius: 6px;
}

/* Posts area */
.ffp-posts-container {
    flex: 1;
    min-width: 0; /* let the flex column shrink so content wraps instead of
                     forcing the page wider than the viewport (text was being
                     clipped on the right on imported stories) */
    padding-left: 20px;
}

/* THE overflow root cause: Astra's content column (#primary) is a flex child
   sitting next to the left nav-block sidebar. Flex items default to
   min-width:auto, so #primary refused to shrink below its content's intrinsic
   width and, at mid-range viewports, ran past the edge (the nav's width wasn't
   effectively reserved) — clipping story text. min-width:0 lets it share the
   flex row. Harmless where it already fits (e.g. erotictrance). */
#primary { min-width: 0; }
#ffp-main-container, #ffp-posts-container, .ffp-post { min-width: 0; }
.ffp-excerpt, .ffp-chip { overflow-wrap: anywhere; word-break: break-word; }

/* select2 (4.1.0-rc.0) leaves the native "Filter by Tags"
   <select> absolutely positioned at its full content width (~1700px — visually
   clipped by select2, but still in the layout), dragging the page ~275px wider
   than the viewport and clipping story text on the right. Contain it: make the
   sidebar its positioning context and clip the overflow. The select2 widget +
   its body-appended dropdown are unaffected. */
#ffp-filter-container { position: relative; overflow: hidden; }

/* On the full-width fan-fiction page the container renders edge-to-edge, so the
   sidebar hugged the left edge and story text sat right against the edges. Inset
   the whole thing (border-box keeps width:100% from overflowing) and give the
   cards real padding. */
#ffp-main-container { box-sizing: border-box; max-width: 100%; padding: 0 16px; }
#ffp-posts-container { box-sizing: border-box; }
.ffp-post { padding: 12px 16px; }

/* Imported legacy stories carry arbitrary inline-styled HTML. Keep all of it
   inside the column: wrap long words, cap media/tables to the column width,
   and never let a stray element push past the viewport. */
.ffp-post,
.ffp-post-title,
.ffp-post-description { overflow-wrap: anywhere; word-break: break-word; }
.ffp-post { overflow: hidden; }
.ffp-post-description img,
.ffp-post-description video,
.ffp-post-description iframe { max-width: 100%; height: auto; }
.ffp-post-description table { display: block; max-width: 100%; overflow-x: auto; }
.ffp-post-description pre { white-space: pre-wrap; overflow-x: auto; }
.ffp-post-description * { max-width: 100%; box-sizing: border-box; }

/* Stack the sidebar above the posts on narrow screens. */
@media (max-width: 640px) {
    .ffp-filter-container { max-width: 100%; width: 100%; }
    .ffp-posts-container { padding-left: 0; }
}
.ffp-comment {
    background-color:var(--cfs-cffc0cf)9a !important;
    border-radius: 8px;
    font-size: 17px;
    color: var(--cfs-c6b182b);
    margin-top: 10px;
}
.hidden-comment {
    display: none;
}

/* =========================================================================
   Redesigned, scannable story cards. Each card shows a compact header +
   short excerpt by default; "Read story" expands the full text + comments
   (accordion). Overrides the older heavy translucent-pink blocks above.
   ========================================================================= */
.ffp-post {
    background: var(--cfs-cf7dce4);
    border: 1px solid var(--cfs-ce0aebf);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 16px;
    color: var(--cfs-c6b182b);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.ffp-post-title {
    font-size: 22px;
    line-height: 1.25;
    margin: 0 0 4px;
    color: var(--cfs-c6b182b) !important;
}
.ffp-meta { font-size: 13px; color: var(--cfs-c9a5c6e); margin: 2px 0 6px; }
.ffp-meta strong { color: var(--cfs-c6b182b); }
.ffp-dot { opacity: .55; margin: 0 2px; }

.ffp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.ffp-chip { font-size: 12px; line-height: 1.6; padding: 1px 10px; border-radius: 999px; white-space: nowrap; }
.ffp-chip-cat { background: var(--cfs-c6b182b); color: var(--cfs-cffd9e2); }
.ffp-chip-tag { background: transparent; border: 1px solid var(--cfs-cc98aa0); color: var(--cfs-c8a2745); }

.ffp-excerpt { font-size: 15px; line-height: 1.55; color: var(--cfs-c5a1626); margin: 0 0 12px; }

.ffp-read-toggle {
    background: var(--cfs-c6b182b); color: var(--cfs-cffd9e2); border: none; border-radius: 6px;
    padding: 7px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .15s ease;
}
.ffp-read-toggle:hover { background: var(--cfs-c8a2745); }

/* Accordion body: full story + comments, only visible when expanded. */
.ffp-full { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cfs-ce0aebf); }
.ffp-full .ffp-post-description {
    max-height: none; overflow: visible;
    background: transparent; font-size: 16px; line-height: 1.6; color: var(--cfs-c4a121f);
}
.ffp-full .ffp-post-description p { margin: 0 0 1em; }
.ffp-comments h3 { color: var(--cfs-c8a2745); font-size: 16px; margin-bottom: 6px; }
.ffp-comment { background: var(--cfs-cfff0f4) !important; border: 1px solid var(--cfs-ceabecc); padding: 8px 12px; }
.ffp-comment-toggle, .ffp-toggle-comments {
    background: transparent; border: 1px solid var(--cfs-cc98aa0); color: var(--cfs-c6b182b);
    border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 13px;
}
.ffp-comment-toggle:hover, .ffp-toggle-comments:hover { background: var(--cfs-cf2c9d6); }

/* Pagination — mirrors the Files browse pager (First/Prev · windowed numbers +
   ellipsis · Next/Last · jump-to-page). Dark pills on the maroon page below the
   cards, self-contained (no CSS-var dependency). */
.ffp-pagination {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 6px; margin-top: 24px;
}
.ffp-pagination .cfs-browse-page-btn {
    display: inline-block; padding: 6px 11px; min-width: 34px; text-align: center;
    border: 1px solid var(--cfs-c5a2535); border-radius: 6px; background: var(--cfs-c2a0f18); color: var(--cfs-cffd0df);
    cursor: pointer; font-size: 14px; line-height: 1.2; text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.ffp-pagination a.cfs-browse-page-btn:hover { background: var(--cfs-c6c1f35); border-color: var(--cfs-c8a2745); color: var(--cfs-cffd0df); }
.ffp-pagination .cfs-browse-page-btn:disabled { opacity: .4; cursor: default; }
.ffp-pagination .cfs-page-current { background: var(--cfs-c8a2745); border-color: var(--cfs-cb04a68); color: #fff; font-weight: 700; cursor: default; }
.ffp-pagination .cfs-page-ellipsis { color: var(--cfs-cb07a8a); padding: 0 2px; align-self: center; }
.ffp-pagination .cfs-browse-page-jump { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.ffp-pagination .cfs-browse-page-info { font-size: 13px; color: var(--cfs-cc0a0ac); white-space: nowrap; }
.ffp-pagination .cfs-browse-page-input {
    width: 62px; padding: 6px 8px; background: var(--cfs-c1a0a10); border: 1px solid var(--cfs-c4a1525);
    border-radius: 6px; color: var(--cfs-cf0d0d8); font-size: 14px; box-sizing: border-box;
}
.ffp-pagination .cfs-browse-page-go {
    padding: 6px 12px; border: 1px solid var(--cfs-c5a2535); border-radius: 6px;
    background: var(--cfs-c6c1f35); color: var(--cfs-cffd0df); cursor: pointer; font-size: 14px;
}
.ffp-pagination .cfs-browse-page-go:hover { background: var(--cfs-c8a2745); border-color: var(--cfs-cb04a68); }
@media (max-width: 640px) {
    .ffp-pagination .cfs-browse-page-jump { margin-left: 0; width: 100%; justify-content: center; margin-top: 6px; }
}