/* web/static/css/rfc.css
 *
 * RFC Library — index, detail page, and shared atoms.
 * All colours from canonical CivNode theme variables. Dark (midnight) by default.
 */

/* ── Shared atoms ─────────────────────────────────────────────────────────── */

/* Status pill */
.rfc-status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.rfc-status--std      { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.rfc-status--proposed { background: color-mix(in srgb, var(--text-secondary) 10%, transparent); color: var(--text-secondary); border: 1px solid color-mix(in srgb, var(--text-secondary) 25%, transparent); }
.rfc-status--bcp      { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-hover); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.rfc-status--info     { background: color-mix(in srgb, var(--text-muted) 12%, transparent); color: var(--text-muted); border: 1px solid color-mix(in srgb, var(--text-muted) 25%, transparent); }
.rfc-status--draft    { background: color-mix(in srgb, var(--text-muted) 8%, transparent); color: var(--text-muted); border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent); }

/* Topic tag */
.rfc-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm, 3px);
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    background: var(--bg-elevated, #1e1e28);
    color: var(--text-secondary, #8a8680);
    border: 1px solid var(--border, #1e1e28);
}
.rfc-tag--more {
    background: transparent;
    color: var(--text-muted, #5a5650);
    border-color: transparent;
}

/* ── RFC Index (/rfcs) ────────────────────────────────────────────────────── */

.rfc-index {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    color: var(--text-primary, #d4d0c8);
}

/* Hero header */
.rfc-index-header {
    padding-bottom: 20px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border-subtle, #14141c);
    position: relative;
}
.rfc-index-header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 2px;
    background: var(--accent, #c9a84c);
}
.rfc-index-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--text-primary, #d4d0c8);
}
.rfc-index-lead {
    margin: 0;
    max-width: 60ch;
    color: var(--text-secondary, #8a8680);
    line-height: 1.6;
    font-size: 1.02rem;
}

/* Controls: search + chips */
.rfc-index-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 32px;
}
.rfc-index-searchwrap {
    flex: 1 1 280px;
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    background: var(--bg-surface, #16161e);
    border: 1px solid var(--border, #1e1e28);
    border-radius: var(--radius, 6px);
    transition: border-color var(--transition, 180ms ease), box-shadow var(--transition, 180ms ease);
    cursor: text;
}
.rfc-index-searchwrap .civ-icon { flex: none; opacity: 0.4; filter: var(--icon-filter, none); }
.rfc-index-searchwrap:focus-within {
    border-color: var(--accent, #c9a84c);
    box-shadow: 0 0 0 3px var(--accent-subtle, color-mix(in srgb, var(--accent) 8%, transparent));
}
.rfc-index-search {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary, #d4d0c8);
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.96rem;
}
.rfc-index-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.rfc-chip {
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.82rem;
    color: var(--text-secondary, #8a8680);
    background: none;
    border: 1px solid var(--border, #1e1e28);
    border-radius: 999px;
    padding: 5px 13px;
    cursor: pointer;
    transition: var(--transition, 180ms ease);
}
.rfc-chip:hover { color: var(--text-primary, #d4d0c8); border-color: var(--border-strong, #3a3733); }
.rfc-chip.active {
    color: var(--text-on-accent, #1a1814);
    background: var(--accent, #c9a84c);
    border-color: var(--accent, #c9a84c);
    font-weight: 600;
}

/* Shelves */
.rfc-index-shelves {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.rfc-shelf-title {
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #5a5650);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle, #14141c);
}
.rfc-shelf-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

/* RFC card */
.rfc-card {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 18px 18px 16px;
    border: 1px solid var(--border, #1e1e28);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-surface, #16161e);
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--transition, 180ms ease),
                transform var(--transition, 180ms ease),
                box-shadow var(--transition, 180ms ease);
}
.rfc-card:hover {
    border-color: var(--accent, #c9a84c);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg, 0 4px 18px rgba(0,0,0,0.35));
}
.rfc-card:focus-visible {
    outline: 2px solid var(--accent, #c9a84c);
    outline-offset: 2px;
}

/* Number badge — two-line block: "RFC" label over the number. align-self:
   flex-start so the badge wraps its content and doesn't stretch to the card
   height (which would leave an awkward dark block below the number). */
.rfc-card-badge {
    flex: none;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 52px;
    padding: 7px 8px 9px;
    border-radius: var(--radius, 6px);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent, #c9a84c);
    line-height: 1.1;
}
.rfc-card-num {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Card body */
.rfc-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.rfc-card-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--text-primary, #d4d0c8);
}
.rfc-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.rfc-index-empty {
    color: var(--text-muted, #5a5650);
    padding: 32px 0;
    text-align: center;
}

/* ── RFC Detail page (/rfcs/:number) ─────────────────────────────────────── */

.rfc-detail {
    max-width: 820px;
    margin: 0 auto;
    padding: 32px 24px 80px;
    color: var(--text-primary, #d4d0c8);
}

/* Back link */
.rfc-detail-nav {
    margin-bottom: 24px;
}
.rfc-detail-back {
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.88rem;
    color: var(--text-muted, #5a5650);
    text-decoration: none;
    transition: color var(--transition, 180ms ease);
}
.rfc-detail-back:hover { color: var(--accent, #c9a84c); }

.rfc-detail-loading {
    color: var(--text-muted, #5a5650);
    padding: 32px 0;
}

/* Header */
.rfc-detail-header {
    padding-bottom: 28px;
    margin-bottom: 36px;
    border-bottom: 1px solid var(--border-subtle, #14141c);
}
.rfc-detail-title-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Large RFC number badge in the detail header */
.rfc-detail-badge {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 72px;
    padding: 10px 12px 12px;
    border-radius: var(--radius, 6px);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent, #c9a84c);
    line-height: 1.1;
}
.rfc-detail-badge-label {
    font-size: 0.65rem;
    font-weight: 700;
}
.rfc-detail-badge-num {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.rfc-detail-title-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rfc-detail-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--text-primary, #d4d0c8);
}
.rfc-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.rfc-detail-collection {
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.78rem;
    color: var(--text-muted, #5a5650);
    letter-spacing: 0.04em;
}
.rfc-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Actions row */
.rfc-detail-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.rfc-detail-read {
    font-size: 1rem;
    padding: 10px 26px;
}
.rfc-detail-pdf {
    font-size: 1rem;
    padding: 10px 22px;
}

/* Sections */
.rfc-detail-section {
    margin-bottom: 36px;
}
.rfc-detail-section-title {
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #5a5650);
    margin: 0 0 14px;
}
.rfc-detail-abstract {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-secondary, #8a8680);
    margin: 0;
    max-width: 68ch;
}

/* Relationship chips */
.rfc-detail-rel-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rfc-detail-rel-group {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.rfc-detail-rel-label {
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.8rem;
    color: var(--text-muted, #5a5650);
    white-space: nowrap;
    min-width: 90px;
}
.rfc-detail-rel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.rfc-detail-rel-chip {
    display: inline-block;
    padding: 3px 11px;
    border-radius: var(--radius, 6px);
    border: 1px solid var(--border, #1e1e28);
    font-family: var(--font-mono, monospace);
    font-size: 0.8rem;
    color: var(--text-secondary, #8a8680);
    text-decoration: none;
    background: var(--bg-surface, #16161e);
    transition: border-color var(--transition, 180ms ease), color var(--transition, 180ms ease);
}
.rfc-detail-rel-chip:hover {
    border-color: var(--accent, #c9a84c);
    color: var(--accent, #c9a84c);
}

/* Related in CivNode */
.rfc-detail-related .rfc-detail-rel-group {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
}
.rfc-detail-rel-group-title {
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted, #5a5650);
    margin: 0 0 4px;
}
.rfc-detail-rel-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rfc-detail-rel-item {
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.92rem;
    color: var(--accent, #c9a84c);
    text-decoration: none;
    text-transform: capitalize;
    transition: color var(--transition, 180ms ease);
}
.rfc-detail-rel-item:hover { color: var(--accent-hover, #d8b95e); }

/* ── NodePad toolbar button in the reader (RFC context) ──────────────────── */

.reader-rfc-nodepad-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius, 6px);
    border: 1px solid var(--border, #1e1e28);
    background: var(--bg-elevated, #1e1e28);
    color: var(--text-secondary, #8a8680);
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--transition, 180ms ease),
                color var(--transition, 180ms ease);
}
.reader-rfc-nodepad-btn:hover {
    border-color: var(--accent, #c9a84c);
    color: var(--accent, #c9a84c);
}

/* Selection toolbar NodePad button — shown in the floating selection bar */
.selection-nodepad-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--radius, 6px);
    border: none;
    background: var(--accent, #c9a84c);
    color: var(--bg-primary, #08080a);
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition, 180ms ease);
}
.selection-nodepad-btn:hover {
    background: var(--accent-hover, #d8b95e);
}