/* ============================================================================
   RPG Card Generator — UI Restyle (Claude Design handoff)
   Loaded AFTER ui.css so these rules win by source order.
   Scope: EDITOR CHROME ONLY. Does not touch the card renderer (cards.css),
   card-size.css, calculations, or field wiring — only how the editor looks.

   Staged rollout:
     Stage 1 (this file, part 1): form column — segmented control, header
       eyebrow, stacked-label inputs, module-card sections, checklist polish.
   ============================================================================ */

/* Utility: keep an element in the DOM (and wired) but hidden from view. */
.mv-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Form header: logo + "CARD BUILDER" eyebrow ─────────────────────────── */
.mv-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}
.mv-form-header #morvold-logo-link {
    padding: 8px 0;
}
.mv-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--dark-light);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Card Type segmented control (replaces the #card-template dropdown) ──── */
.mv-segmented {
    display: flex;
    gap: 5px;
    background: #0b0b12;
    border: 1px solid #1e1e26;
    border-radius: 12px;
    padding: 5px;
}
.mv-segmented-btn {
    flex: 1;
    padding: 10px 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--light-muted);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.mv-segmented-btn:hover {
    color: var(--light-soft);
}
.mv-segmented-btn.is-active {
    background: var(--red-primary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(250, 54, 74, 0.35);
}

/* ── Stacked-label inputs inside the builder form ───────────────────────── */
/* Restack Bootstrap's horizontal label/field pairs into label-above-field.
   Scoped to the accordion so page settings and grids are unaffected. */
#monster-form-accordion .form-group > label.control-label,
#monster-form-accordion .form-group > .control-label[class*="col-sm-"] {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
    padding: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--light-mid);
    font-family: 'Lora', serif;
}
#monster-form-accordion .form-group > .col-sm-9,
#monster-form-accordion .form-group > .col-sm-8,
#monster-form-accordion .form-group > .col-sm-10 {
    float: none;
    width: 100%;
}
/* Offset spacers are meaningless once stacked */
#monster-form-accordion .form-group > .col-sm-offset-3 {
    margin-left: 0;
}

/* Inputs / selects / textareas: mockup field treatment */
#monster-form-accordion .form-control {
    background: var(--dark-deepest);
    border: 1px solid #2a2a32;
    border-radius: 9px;
    color: var(--dark-text);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#monster-form-accordion textarea.form-control {
    resize: vertical;
}
#monster-form-accordion .form-control:focus {
    border-color: #4a4a55;
    box-shadow: 0 0 0 3px rgba(250, 54, 74, 0.12);
}
#monster-form-accordion .form-control::placeholder {
    color: #6a6470;
}

/* ── Section panels → module cards ──────────────────────────────────────── */
/* ui.css styles these with !important, so match that here. */
#monster-form-accordion .panel.section-accordion,
#monster-form-accordion #sectionCard.panel {
    background: #0b0b12;
    border: 1px solid #26262e;
    border-radius: 13px !important;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: none;
}
#monster-form-accordion .panel.section-accordion > .panel-heading,
#monster-form-accordion #sectionCard.panel > .panel-heading {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-color: transparent !important;
    padding: 0;
}
#monster-form-accordion .panel .panel-title > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 15px;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.3px;
    color: var(--dark-text);
    text-decoration: none;
}
#monster-form-accordion .panel .panel-title > a:hover {
    color: var(--light-near);
}
#monster-form-accordion .panel .panel-body {
    border-top: 1px solid #17171f;
    padding: 16px 15px;
    background-color: transparent;
}
/* The always-open Card panel has no heading link; give its body breathing room */
#monster-form-accordion #sectionCard .panel-body {
    border-top: 0;
}

/* Section completion counter → small pill on the module header */
#monster-form-accordion .section-counter {
    margin-left: auto;
    font-size: 11px;
    color: #6a6470;
    background: #141419;
    border: 1px solid #23232c;
    border-radius: 20px;
    padding: 2px 9px;
    font-family: 'Lora', serif;
    letter-spacing: 0;
}
#monster-form-accordion .section-counter.has-content {
    color: var(--red-soft);
    border-color: rgba(250, 54, 74, 0.4);
    background: rgba(250, 54, 74, 0.1);
}
#monster-form-accordion .section-counter.is-complete {
    color: #8fd58f;
    border-color: rgba(67, 168, 62, 0.35);
    background: rgba(67, 168, 62, 0.14);
}

/* Group heading (h5) inside module bodies */
#monster-form-accordion .panel-body h5 {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: var(--light-soft);
    margin: 4px 0 10px;
}

/* ── Card panel: Sections checklist polish ──────────────────────────────── */
#card-sections-group > .control-label {
    color: var(--light-muted) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px !important;
}
#card-sections-cb {
    background: var(--dark-deepest);
    border: 1px solid #23232c;
    border-radius: 11px;
    padding: 12px 14px;
}
#card-sections-cb label.checkbox-inline {
    color: var(--light-mid);
    padding: 4px 0;
}
#card-sections-cb input[type="checkbox"] {
    accent-color: var(--red-primary);
    width: 15px;
    height: 15px;
    vertical-align: -2px;
    margin-right: 4px;
}

/* ── Artwork drop zone: match the dashed mockup treatment ───────────────── */
#monster-form-accordion .artwork-drop-zone {
    border: 1.5px dashed #33333d;
    border-radius: 12px;
    background: #0b0b12;
}
#monster-form-accordion .artwork-drop-zone.drag-over {
    border-color: var(--red-primary);
    background: rgba(250, 54, 74, 0.06);
}

/* ============================================================================
   Stage 2 — three-column shell (deck rail stays toggleable), deck rail
   restyle, preview column + Page Settings re-home.
   ============================================================================ */

/* ── Full-height shell: form + preview scroll independently, no page scroll ─ */
body {
    overflow: hidden;
}
#main-content {
    height: 100vh;
    overflow: hidden;
}
#main-content > .container-fluid {
    height: 100%;
    padding: 0;
}
#main-content > .container-fluid > .row {
    display: flex;
    height: 100%;
    margin: 0;
}
/* Form column: capped width so spare space (e.g. drawer closed) goes to the
   preview column instead */
#main-content > .container-fluid > .row > .col-lg-7 {
    float: none;
    flex: 0 1 760px;
    min-width: 0;
    height: 100%;
    overflow-y: auto !important;
    padding: 30px 34px 80px;
}
/* Preview column: grows into spare space, scrolls, own panel background */
#main-content > .container-fluid > .row > .col-lg-5 {
    float: none;
    flex: 1 1 470px;
    width: auto;
    min-width: 470px;
    height: 100%;
    overflow-y: auto;
    padding: 24px;
    background: rgba(8, 8, 19, 0.55);
    border-left: 1px solid #1c1c24;
}
@media (max-width: 1200px) {
    #main-content > .container-fluid > .row > .col-lg-5 {
        flex-basis: 400px;
        min-width: 400px;
    }
}

/* ── Deck rail (drawer) — restyle, still toggleable ─────────────────────── */
#sidebar-drawer {
    background: rgba(8, 8, 19, 0.92);
    border-right: 1px solid #1c1c24;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.sidebar-deck-form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.deck-sidebar-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.deck-sidebar-main > .form-group:first-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 8px;
}
.deck-sidebar-main > .form-group:first-child > .col-sm-10,
.deck-sidebar-main > .form-group:first-child > .col-sm-12 {
    flex: 1 1 auto;
    float: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}
.deck-sidebar-main > .form-group:first-child .input-group {
    flex: 0 0 auto;
}
.deck-sidebar-main > .form-group:nth-child(2) {
    flex: 0 0 auto;
}
.deck-sidebar-actions {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-action-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sidebar-section-title {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dark-text);
    border-bottom: 1px solid #1c1c24;
    padding-bottom: 10px;
}
.sidebar-group-label {
    color: var(--light-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    font-weight: 700;
}
#sidebar-drawer .form-control {
    background: var(--dark-deepest);
    border: 1px solid #23232c;
    border-radius: 9px;
    color: var(--light-soft);
    box-shadow: none;
}
#sidebar-drawer .form-control:focus {
    border-color: #4a4a55;
    box-shadow: 0 0 0 3px rgba(250, 54, 74, 0.12);
}

/* Deck list items + selected state (subtle gradient, inset accent bar) */
#sidebar-drawer .deck-cards-list .radio:has(:checked) label,
#sidebar-drawer .deck-cards-list .radio input:checked + label {
    background: linear-gradient(90deg, rgba(250, 54, 74, 0.16), rgba(250, 54, 74, 0.04)) !important;
    box-shadow: inset 3px 0 0 var(--red-primary) !important;
    color: var(--light-near) !important;
}
#sidebar-drawer .deck-cards-list .radio label {
    border-radius: 11px;
}

/* Deck buttons: dark ghost base; Add New = red primary; danger = red text */
#sidebar-drawer .btn {
    background-image: none;
    background-color: #141419;
    border: 1px solid #2a2a32;
    border-radius: 9px;
    color: var(--light-soft);
    font-family: 'Lora', serif;
    box-shadow: none;
}
#sidebar-drawer .btn:hover,
#sidebar-drawer .btn:focus {
    background-color: #1c1c24;
    border-color: #3a3a44;
    color: var(--light-near);
}
#sidebar-drawer #button-add-card {
    background-color: var(--red-primary);
    border-color: var(--red-primary);
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 15px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(250, 54, 74, 0.28);
}
#sidebar-drawer #button-add-card:hover {
    background-color: var(--red-hover);
    border-color: var(--red-hover);
    color: #fff;
}
.sidebar-add-card-plus {
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}
.deck-selected-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.deck-selected-actions [hidden] {
    display: none !important;
}
#sidebar-drawer .sidebar-icon-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#sidebar-drawer .sidebar-icon-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}
#sidebar-drawer #button-copy-card.sidebar-icon-btn {
    background-color: #141419;
    border: 1px solid #2a2a32;
    color: var(--light-soft);
}
#sidebar-drawer #button-copy-card.sidebar-icon-btn:hover,
#sidebar-drawer #button-copy-card.sidebar-icon-btn:focus {
    background-color: #1c1c24;
    border-color: #3a3a44;
    color: var(--light-near);
}
#sidebar-drawer .btn-danger {
    background-color: transparent;
    border-color: #2a2a32;
    color: #b06770;
}
#sidebar-drawer .btn-danger:hover {
    background-color: rgba(138, 85, 96, 0.15);
    border-color: #8a5560;
    color: #d98a94;
}
#sidebar-drawer #button-save {
    background-color: var(--red-primary);
    border-color: var(--red-primary);
    color: #fff;
}
#sidebar-drawer #button-save:hover {
    background-color: var(--red-hover);
    border-color: var(--red-hover);
}
.sidebar-manage-accordion {
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}
.sidebar-manage-accordion > .panel-heading {
    padding: 0;
    background: transparent;
    border: none;
}
.sidebar-accordion-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--light-muted);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color 0.15s ease, opacity 0.15s ease;
}
.sidebar-accordion-toggle:hover,
.sidebar-accordion-toggle:focus {
    color: var(--light-near);
    outline: none;
}
.sidebar-accordion-toggle .fa-chevron-down {
    transition: transform 0.18s ease;
    font-size: 10px;
    opacity: 0.72;
}
.sidebar-accordion-toggle:not(.collapsed) .fa-chevron-down {
    transform: rotate(180deg);
}
.sidebar-manage-panel-body {
    padding: 10px 0 0;
}
.deck-manage-button-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.deck-manage-button-cell .btn {
    width: 100%;
}
.sidebar-delete-toggle {
    margin: 0;
    padding: 4px 2px 2px;
}
.sidebar-delete-toggle label {
    color: var(--light-muted);
    font-family: 'Lora', serif;
    font-size: 12.5px;
    font-weight: 400;
}
.sidebar-import-export-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 10px;
}
.sidebar-import-export-row .btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}
.sidebar-button-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
}
#sidebar-drawer .sidebar-export-btn,
#sidebar-drawer #button-save.sidebar-export-btn {
    background-color: var(--red-primary);
    border-color: var(--red-primary);
    color: #fff;
}
#sidebar-drawer .sidebar-export-btn:hover,
#sidebar-drawer .sidebar-export-btn:focus,
#sidebar-drawer #button-save.sidebar-export-btn:hover,
#sidebar-drawer #button-save.sidebar-export-btn:focus {
    background-color: var(--red-hover);
    border-color: var(--red-hover);
    color: #fff;
}
#sidebar-drawer .move-button {
    background: transparent;
    border: 1px solid #23232c;
    border-radius: 8px;
    color: var(--light-muted);
    opacity: 0.9;
}
#sidebar-drawer .move-button:hover {
    border-color: #3a3a44;
    color: var(--light-near);
}

/* ── Preview / output column ────────────────────────────────────────────── */
.preview-action-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
    background-color: transparent !important;
    background-image: none !important;
    padding: 0;
    border-bottom: 0;
}
.preview-action-btn {
    flex: 1;
    border-radius: 11px;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    padding: 13px;
    box-shadow: none;
}
.preview-action-btn--primary {
    background-color: var(--red-primary);
    border-color: var(--red-primary);
    color: #fff;
    box-shadow: 0 5px 16px rgba(250, 54, 74, 0.3);
}
.preview-action-btn--primary:hover {
    background-color: var(--red-hover);
    border-color: var(--red-hover);
    color: #fff;
}
/* ui.css targets #button-export-png by id (red fill), so match the id here */
.preview-action-btn--secondary,
#button-export-png.preview-action-btn--secondary {
    background-color: #17171F;
    border: 1px solid #2A2A32;
    border-color: #2A2A32;
    color: var(--dark-text);
}
.preview-action-btn--secondary:hover,
.preview-action-btn--secondary:focus,
#button-export-png.preview-action-btn--secondary:hover,
#button-export-png.preview-action-btn--secondary:focus {
    background-color: #1c1c24;
    border-color: #3a3a44;
    color: var(--light-near);
}

/* Page Settings panel, now living in the preview column */
.page-settings-section {
    margin-top: 24px;
    background: rgba(11, 11, 18, 0.7) !important;
    border: 1px solid #1e1e26 !important;
    border-radius: 13px !important;
}
.page-settings-header {
    background: #141419 !important;
    padding: 13px 15px;
}
.page-settings-header .panel-title {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--dark-text);
}
.page-settings-body {
    padding: 14px 15px 16px;
}
.page-settings-body .form-control {
    background: var(--dark-deepest);
    border: 1px solid #26262e;
    border-radius: 8px;
    color: var(--light-soft);
    box-shadow: none;
}

/* LIVE PREVIEW eyebrow above the card */
.mv-preview-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.mv-preview-eyebrow span {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--light-muted);
}
.mv-preview-eyebrow .mv-hairline {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #2a2a32, transparent);
}

/* ============================================================================
   Stage 3 — building-block modules (pills + chips replace the checklist)
   ============================================================================ */

/* Hide the old Sections checklist (the module pills replace it) */
#card-sections-group { display: none !important; }

/* Module header: icon chip + title/summary + pill + chevron */
.mv-module-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
}
.mv-module-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    text-decoration: none !important;
    color: inherit;
}
.mv-module-toggle:hover .mv-module-title { color: var(--light-near); }
.mv-module-icon {
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #15151d;
    color: var(--red-primary);
    display: grid;
    place-items: center;
    font-size: 13px;
}
.mv-module-titles { min-width: 0; display: flex; flex-direction: column; }
.mv-module-title {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: var(--dark-text);
    letter-spacing: 0.3px;
}
.mv-module-summary {
    font-size: 12px;
    color: #6a6470;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* On card / locked pill */
.mv-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Lora', serif;
    cursor: pointer;
    background: rgba(250, 54, 74, 0.14);
    border: 1px solid rgba(250, 54, 74, 0.5);
    color: var(--red-soft);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.mv-pill:hover { background: rgba(250, 54, 74, 0.22); }
.mv-pill.mv-pill-locked { cursor: default; opacity: 0.85; }
.mv-pill.mv-pill-locked:hover { background: rgba(250, 54, 74, 0.14); }

/* Chevron rotates when the module is expanded */
.mv-chevron {
    color: var(--dark-light);
    font-size: 13px;
    padding: 4px 6px;
    text-decoration: none !important;
    flex-shrink: 0;
}
.mv-chevron i { transition: transform 0.15s ease; }
.section-accordion:has(> .panel-collapse.in) .mv-chevron i,
.section-accordion:has(> .panel-collapse.collapsing) .mv-chevron i {
    transform: rotate(180deg);
}

/* Module header toggles: ui.css sets space-between on .panel-title a (with a
   stronger #id .panel-heading selector), so !important is needed here to keep
   the icon + titles hugging the left edge */
#monster-form-accordion .mv-module-toggle {
    justify-content: flex-start !important;
}

/* Card name + Count share one row (80 / 20) */
.mv-title-count-row {
    display: grid;
    grid-template-columns: 4fr 1fr;
    gap: 12px;
    align-items: start;
}
.mv-title-count-row .form-group { margin-bottom: 10px; }
.mv-title-count-row #card-count { text-align: center; }

/* Four-up field rows (Speeds) */
.mv-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.mv-grid-4 .form-group { margin-bottom: 10px; min-width: 0; }

/* FRONT / BACK labels under the preview cards */
.mv-card-face {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mv-card-face-label {
    text-align: center;
    font-size: 11px;
    letter-spacing: 1px;
    color: #6a6470;
    margin: 9px 0 0;
    font-family: 'Lora', serif;
}

/* Notice below Page Settings */
.mv-preview-note {
    margin-top: 18px;
    padding: 14px;
    background: rgba(11, 11, 18, 0.6);
    border: 1px solid #1e1e26;
    border-radius: 11px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.mv-preview-note i {
    color: var(--red-primary);
    font-size: 13px;
    margin-top: 2px;
}
.mv-preview-note p {
    margin: 0;
    font-size: 12px;
    color: var(--light-muted);
    line-height: 1.55;
}

/* Add optional block chips panel */
#mv-optional-blocks {
    margin-top: 16px;
    padding: 18px;
    border: 1px dashed #2a2a32;
    border-radius: 13px;
    background: rgba(11, 11, 18, 0.5);
}
.mv-optional-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--light-muted);
    text-transform: uppercase;
}
.mv-optional-title i { color: var(--dark-light); margin-right: 4px; }
#mv-optional-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mv-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #141419;
    border: 1px solid #2a2a32;
    border-radius: 20px;
    color: var(--light-mid);
    padding: 7px 14px;
    font-size: 12.5px;
    font-family: 'Lora', serif;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.mv-chip:hover { border-color: #3a3a44; color: var(--light-near); }
.mv-chip i { font-size: 10px; color: var(--red-primary); }
.mv-chips-empty { margin: 0; font-size: 12.5px; color: #5c5766; font-style: italic; }

/* ============================================================================
   Deck cards — mockup styling + drag-to-reorder
   ============================================================================ */
.deck-cards-list .radio { margin: 0 0 4px; }
.deck-cards-list .radio label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 11px;
    cursor: pointer;
    color: var(--light-soft);
}
.deck-cards-list .radio label:hover { background-color: #141419; }
.deck-cards-list .radio label > .text {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    flex: 1;
    min-width: 0;
}
.deck-card-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 2px;
}
.deck-card-grip {
    color: #54545F;
    font-size: 13px;
    flex-shrink: 0;
    cursor: grab;
}
.deck-cards-list .radio.dragging { opacity: 0.45; }
.deck-cards-list .radio.dragging .deck-card-grip { cursor: grabbing; }
.deck-card-move-actions {
    display: none;
    flex-direction: column;
    gap: 5px;
}
#sidebar-drawer .deck-cards-list .radio:has(:checked) .deck-card-move-actions {
    display: flex;
}
.deck-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.deck-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
.deck-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.deck-card-main .deck-type-chip { align-self: flex-start; margin-right: 0; }
.deck-card-name {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: var(--light-near);
    margin-top: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.deck-card-count {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--light-mid);
    background: #17171f;
    border-radius: 20px;
    padding: 2px 9px;
}
.deck-card-inline-actions {
    display: none;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}
#sidebar-drawer .deck-cards-list .radio:has(:checked) .deck-card-inline-actions {
    display: inline-flex;
}
.deck-card-inline-action {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #2a2a32;
    background: #1a1a22;
    color: var(--light-soft);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.deck-card-inline-action:hover,
.deck-card-inline-action:focus {
    background: #22222b;
    border-color: #3a3a44;
    color: var(--light-near);
    outline: none;
}
.deck-card-inline-action svg {
    width: 14px;
    height: 14px;
    display: block;
}
.deck-card-inline-action-move {
    width: 20px;
    height: 16px;
    border-radius: 4px;
    background: transparent;
    border: 0;
    color: #7b7f88;
}
.deck-card-inline-action-move:hover,
.deck-card-inline-action-move:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: transparent;
    color: var(--light-near);
}
.deck-card-inline-action-move svg {
    width: 12px;
    height: 12px;
}
.deck-card-inline-action-delete {
    border-color: rgba(249, 11, 34, 0.5);
    color: #d06b76;
}
.deck-card-inline-action-delete:hover,
.deck-card-inline-action-delete:focus {
    background: rgba(249, 11, 34, 0.12);
    border-color: #F90B22;
    color: #f0a0aa;
}

/* ── SRD Library buttons in the Card section (one shows per card type) ───── */
.card-library-btn {
    background: #141419;
    border: 1px solid #2a2a32;
    border-radius: 9px;
    color: var(--light-mid);
    font-family: 'Lora', serif;
    padding: 9px;
}
.card-library-btn:hover,
.card-library-btn:focus {
    background: #1c1c24;
    border-color: #3a3a44;
    color: var(--light-near);
}
.card-library-btn i { color: var(--red-primary); margin-right: 4px; }