/**
 * fu_converter.css - Abyssal Engine Converter Styles
 * Author:   Steven J. Cook (Shinra.Engineer)
 * Date:     2026-04-25
 * Time:     16:05 UTC
 * LLM:      Claude Opus 4.7
 * Project:  Abyssal Engine
 * Revision: 2.0.0
 *           v2.0.0:
 *           - Major addition for the v2.4.0 converter panel
 *             rebuild. New selector groups for the three-section
 *             layout: section wrappers, block containers and
 *             headers, the export list with grouped rows and
 *             type chips, the side-by-side import grid with
 *             file picker, the spyrelladev collab note, the
 *             Chronicles of Aether "Coming Soon" panel with
 *             badge styling, and the advanced/details disclosure
 *             for manual paste flow.
 *           - Existing selectors preserved unchanged so the old
 *             paste-first flow keeps working inside the new
 *             <details> advanced section.
 *           v1.2.0:
 *           - Added .fuc-credit-grid and .fuc-credit-box (1.2.0)
 *           - Added .fuc-wip-notice placeholder style (1.1.0)
 *           - Initial creation (1.0.0)
 */

.fuc-wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    color: #dcddde;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    line-height: 1.6;
}

.fuc-header {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #c9aa71;
}

.fuc-header h2 {
    font-family: 'Cinzel', serif;
    font-size: 26px;
    color: #c9aa71;
    margin: 0 0 8px 0;
    letter-spacing: 1px;
}

.fuc-subtitle {
    color: #8e9297;
    font-style: italic;
    margin: 0;
    font-size: 14px;
}

.fuc-subtitle a {
    color: #7dd3fc;
    text-decoration: none;
}

.fuc-subtitle a:hover {
    text-decoration: underline;
}

/* WIP NOTICE (placeholder while converter is being tested) */
.fuc-wip-notice {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    border-left: 4px solid #c9aa71;
    padding: 30px 36px;
    margin: 30px 0;
    text-align: center;
}

.fuc-wip-notice i {
    display: block;
    font-size: 36px;
    color: #c9aa71;
    margin-bottom: 18px;
}

.fuc-wip-notice p {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 19px;
    line-height: 1.65;
    color: #dcddde;
    margin: 0;
}

/* INSTRUCTIONS */
.fuc-instructions {
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
    border-left: 3px solid #5865f2;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.fuc-instructions h4 {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    color: #7dd3fc;
    margin: 0 0 8px 0;
}

.fuc-instructions ol {
    margin: 0;
    padding-left: 20px;
    color: #b5bac1;
    font-size: 13.5px;
}

.fuc-instructions li {
    margin-bottom: 4px;
}

.fuc-instructions strong {
    color: #dcddde;
}

/* IO GRID */
.fuc-io-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.fuc-io-panel {
    display: flex;
    flex-direction: column;
}

.fuc-label {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: #c9aa71;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.fuc-textarea {
    width: 100%;
    min-height: 300px;
    background: #1e1f22;
    color: #dcddde;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 12px;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.45;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.fuc-textarea:focus {
    border-color: rgba(201,170,113,0.5);
}

.fuc-textarea[readonly] {
    background: #17181a;
    color: #a0d8a0;
}

.fuc-textarea::placeholder {
    color: #4e5058;
    font-style: italic;
}

/* ACTIONS */
.fuc-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fuc-btn {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    padding: 8px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    letter-spacing: 0.3px;
}

.fuc-btn:active {
    transform: scale(0.97);
}

.fuc-btn-primary {
    background: #5865f2;
    color: #fff;
}

.fuc-btn-primary:hover {
    background: #4752c4;
}

.fuc-btn-secondary {
    background: #c9aa71;
    color: #1e1f22;
}

.fuc-btn-secondary:hover {
    background: #d4b97e;
}

.fuc-btn-ghost {
    background: transparent;
    color: #8e9297;
    border: 1px solid rgba(255,255,255,0.1);
}

.fuc-btn-ghost:hover {
    background: rgba(255,255,255,0.05);
    color: #dcddde;
}

/* STATUS */
.fuc-status {
    font-size: 13px;
    font-style: italic;
    margin-left: 6px;
    transition: color 0.2s;
}

.fuc-status-ok {
    color: #6dd694;
}

.fuc-status-error {
    color: #e06666;
}

/* CREDIT BOXES */
.fuc-credit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0 0 0;
}

.fuc-credit-box {
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
    border: 1px solid rgba(201,170,113,0.2);
    padding: 18px 22px;
    text-align: center;
}

.fuc-credit-name {
    font-family: 'Cinzel', serif;
    font-size: 17px;
    color: #c9aa71;
    margin: 0 0 12px 0;
    letter-spacing: 0.5px;
}

.fuc-credit-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fuc-credit-links a {
    color: #7dd3fc;
    text-decoration: none;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    transition: color 0.2s;
}

.fuc-credit-links a:hover {
    color: #bae6fd;
    text-decoration: underline;
}

.fuc-credit-links i {
    margin-right: 6px;
    font-size: 13px;
}

.fuc-credit-links .fa-heart {
    color: #e06666;
}

/* FOOTER */
.fuc-footer {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(201,170,113,0.2);
}

.fuc-footer p {
    color: #72767d;
    font-size: 12px;
    margin: 0;
    text-align: center;
}

/* ==========================================================
   v2.0.0: SECTION WRAPPERS
   The panel is now three stacked sections, each visually
   distinct so the eye can find Fultimator vs CoA vs Support
   without re-reading headers.
   ========================================================== */
.fuc-section {
    margin-bottom: 28px;
    padding-bottom: 8px;
}

.fuc-section + .fuc-section {
    border-top: 1px solid rgba(201,170,113,0.12);
    padding-top: 24px;
}

/* "Coming Soon" CoA section gets a softer, dimmer treatment so
   it reads as not-yet-active without looking broken. */
.fuc-section-comingsoon {
    opacity: 0.78;
}
.fuc-section-comingsoon .fuc-header {
    border-bottom-color: rgba(201,170,113,0.4);
}
.fuc-section-comingsoon .fuc-header h2 {
    color: #b59867;
}

/* "Coming Soon" badge inside the CoA subtitle */
.fuc-badge-soon {
    display: inline-block;
    background: rgba(201,170,113,0.18);
    color: #c9aa71;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid rgba(201,170,113,0.35);
    margin-right: 10px;
    vertical-align: middle;
}

/* ==========================================================
   v2.0.0: BLOCK CONTAINERS
   Each export-list / import block lives inside a thin-bordered
   card so the user can see at a glance where one ends and the
   next begins.
   ========================================================== */
.fuc-block {
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.fuc-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(201,170,113,0.18);
}

.fuc-block-header h3 {
    font-family: 'Cinzel', serif;
    font-size: 17px;
    color: #c9aa71;
    margin: 0;
    letter-spacing: 0.5px;
}

.fuc-block-header h3 i {
    margin-right: 8px;
    color: rgba(201,170,113,0.8);
}

/* ==========================================================
   v2.0.0: EXPORT LIST
   The PC / NPC / Bestiary list rendered into #fuc-export-list.
   Each group has a header row, a count badge, and a stack of
   rows with type chip + name + meta + Export button.
   ========================================================== */
.fuc-export-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fuc-export-group {
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
    padding: 10px 12px;
}

/* When the group is a <details> element (compendium), make the
   summary line behave like the regular header. */
.fuc-export-group summary.fuc-export-group-header {
    cursor: pointer;
    list-style: none;
}
.fuc-export-group summary.fuc-export-group-header::-webkit-details-marker { display: none; }
.fuc-export-group summary.fuc-export-group-header::before {
    content: '\25B8'; /* right-pointing triangle */
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.2s;
    color: rgba(201,170,113,0.6);
    font-size: 11px;
}
.fuc-export-group[open] summary.fuc-export-group-header::before {
    transform: rotate(90deg);
}

.fuc-export-group-header {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: #c9aa71;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 6px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fuc-export-group-header i {
    color: rgba(201,170,113,0.7);
}

.fuc-export-count {
    background: rgba(201,170,113,0.18);
    color: #c9aa71;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 4px;
}

.fuc-export-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    background: rgba(30,31,34,0.6);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 5px;
    margin-bottom: 6px;
    transition: border-color 0.15s, background 0.15s;
}
.fuc-export-row:hover {
    border-color: rgba(201,170,113,0.35);
    background: rgba(30,31,34,0.85);
}

.fuc-export-row-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.fuc-row-type {
    background: #5865f2;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

.fuc-row-type-compendium {
    background: rgba(255,255,255,0.08);
    color: #8e9297;
}

.fuc-row-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 16px;
    color: #dcddde;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fuc-row-meta {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    color: #8e9297;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(0,0,0,0.25);
    padding: 2px 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

.fuc-empty-row {
    color: #72767d;
    font-style: italic;
    font-size: 13.5px;
    text-align: center;
    margin: 8px 0;
}

.fuc-empty {
    color: #72767d;
    font-style: italic;
    text-align: center;
    margin: 18px 0;
}

/* ==========================================================
   v2.0.0: IMPORT GRID (file + textarea side by side)
   ========================================================== */
.fuc-import-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 8px;
}

.fuc-import-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fuc-file-input {
    display: block;
    width: 100%;
    padding: 10px;
    background: #1e1f22;
    color: #dcddde;
    border: 1px dashed rgba(201,170,113,0.4);
    border-radius: 6px;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
}
.fuc-file-input:hover {
    border-color: rgba(201,170,113,0.7);
    background: #232428;
}
.fuc-file-input::file-selector-button {
    background: #5865f2;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.3px;
    cursor: pointer;
    margin-right: 12px;
    transition: background 0.15s;
}
.fuc-file-input::file-selector-button:hover {
    background: #4752c4;
}

.fuc-hint {
    color: #72767d;
    font-style: italic;
    font-size: 12.5px;
    margin: 0;
}

/* Textarea variants for the import block (shorter than the
   advanced AE-paste flow) */
.fuc-textarea-short {
    min-height: 90px !important;
}

.fuc-actions-tight {
    margin: 4px 0;
    gap: 6px;
}

.fuc-btn-small {
    padding: 5px 12px;
    font-size: 12.5px;
}

.fuc-status-bar {
    margin-top: 6px;
    min-height: 18px;
}

/* ==========================================================
   v2.0.0: ADVANCED <details> DISCLOSURE
   The legacy AE-paste flow lives inside this collapsed by
   default so the new export list dominates the visual hierarchy.
   ========================================================== */
.fuc-advanced {
    background: rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.fuc-advanced summary {
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: #8e9297;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 0;
    list-style: none;
    transition: color 0.2s;
}
.fuc-advanced summary::-webkit-details-marker { display: none; }
.fuc-advanced summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.2s;
    color: rgba(201,170,113,0.5);
    font-size: 11px;
}
.fuc-advanced[open] summary::before {
    transform: rotate(90deg);
}
.fuc-advanced summary:hover {
    color: #c9aa71;
}
.fuc-advanced summary i {
    margin-right: 4px;
}

.fuc-advanced[open] {
    padding-bottom: 16px;
}
.fuc-advanced[open] summary {
    margin-bottom: 12px;
}

/* Per-row download list rendered into #fuc-results when the
   user runs the advanced AE-paste convert flow. Mirrors the
   export-row styling from the main flow. */
.fuc-results-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 80px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 10px;
    overflow-y: auto;
    max-height: 320px;
}

.fuc-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(30,31,34,0.7);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 4px;
}

.fuc-result-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.fuc-result-type {
    background: #c9aa71;
    color: #1e1f22;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

.fuc-result-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 14.5px;
    color: #dcddde;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fuc-result-file {
    font-family: 'Courier New', Consolas, monospace;
    font-size: 11.5px;
    color: #72767d;
    background: rgba(0,0,0,0.3);
    padding: 1px 6px;
    border-radius: 3px;
}

/* ==========================================================
   v2.0.0: COLLAB NOTE (spyrelladev credit)
   ========================================================== */
.fuc-collab-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(88,101,242,0.08);
    border: 1px solid rgba(88,101,242,0.2);
    border-left: 3px solid #5865f2;
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 12px;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 14px;
    color: #b5bac1;
    line-height: 1.55;
}
.fuc-collab-note i {
    color: #7dd3fc;
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}
.fuc-collab-note strong {
    color: #dcddde;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 700px) {
    .fuc-wrapper { padding: 12px; }
    .fuc-io-grid,
    .fuc-import-grid,
    .fuc-credit-grid {
        grid-template-columns: 1fr;
    }
    .fuc-textarea {
        min-height: 200px;
    }
    .fuc-textarea-short {
        min-height: 80px !important;
    }
    .fuc-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .fuc-actions-tight {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .fuc-btn {
        text-align: center;
    }
    .fuc-status {
        margin-left: 0;
        text-align: center;
    }
    .fuc-wip-notice {
        padding: 20px 18px;
    }
    .fuc-wip-notice p {
        font-size: 17px;
    }
    /* Export rows stack on mobile so the name doesn't get
       crushed against the Export button. */
    .fuc-export-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .fuc-export-row-info {
        width: 100%;
    }
    .fuc-export-row .fuc-btn {
        width: 100%;
    }
    .fuc-block-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}