/* ==========================================================================
   LoveToRead — character selection cards            2026-09-04
   The create-story character section used to be a stack of tabbed "slots":
   every character carried three tabs (Upload / Describe / My characters) and
   you had to understand the tabs before you could add anybody at all.
   PersonalizedComics solves the same problem the other way round — you pick
   HOW you are adding someone first, and each character then becomes one calm
   card in a list. This is that layout, rebuilt in LoveToRead branding: soft
   rules and shadows in place of the comic's hard black outlines.
   Loaded after create.css and character-details.css, which still own the field
   styles (.detail-input / .detail-select / .type-pill) reused inside the cards.
   ========================================================================== */

/* ---------- the card ---------- */
.char-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--card, #fff);
    border: 1.5px solid var(--rule, #DCD4C4);
    border-radius: var(--radius, 14px);
    box-shadow: var(--shadow-soft);
    padding: 14px;
    margin-bottom: 12px;
}
.char-card.slot-invalid {
    border-color: var(--danger, #C2413B);
    box-shadow: 0 0 0 3px var(--danger-tint, #FBE7E5);
}

.char-card-thumb {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border-radius: var(--radius-xs, 8px);
    border: 1.5px solid var(--rule, #DCD4C4);
    background: var(--oat, #F3EDE2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.char-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Drawn placeholders for a character with no picture yet. */
.char-avatar {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink, #22263A);
}
.char-avatar svg { width: 58%; height: 58%; }
.char-avatar-upload  { background: var(--moss-tint, #E1F0E6);     color: var(--moss, #3E7C59); cursor: pointer; }
.char-avatar-library { background: var(--marigold-tint, #FFF1C9); color: var(--marigold-deep, #D99A00); }
.char-avatar-ai      { background: var(--lagoon-tint, #DDF1F2);   color: var(--lagoon, #0E7C86); }
.char-avatar-upload:hover { background: var(--marigold-tint, #FFF1C9); color: var(--ink, #22263A); }

.char-card-info { flex: 1; min-width: 0; }

/* "Character 2" + how it was added */
.char-index {
    display: inline-block;
    font-family: var(--body);
    font-size: .68rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: .18rem .6rem;
    border-radius: var(--pill, 999px);
    background: var(--ink, #22263A);
    color: var(--paper, #FFFDF8);
    margin: 0 .4rem .5rem 0;
}
.char-type-badge {
    display: inline-block;
    font-family: var(--body);
    font-size: .68rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .18rem .6rem;
    border-radius: var(--pill, 999px);
    border: 1.5px solid transparent;
    margin: 0 0 .5rem;
}
.char-type-badge.upload  { background: var(--moss-tint, #E1F0E6);     color: var(--moss, #3E7C59);          border-color: var(--moss, #3E7C59); }
.char-type-badge.library { background: var(--marigold-tint, #FFF1C9); color: var(--marigold-deep, #D99A00); border-color: var(--marigold-deep, #D99A00); }
.char-type-badge.ai      { background: var(--lagoon-tint, #DDF1F2);   color: var(--lagoon-deep, #0A5F67);   border-color: var(--lagoon, #0E7C86); }

/* Fields inside a card sit tighter than the old full-width form. */
.char-card .detail-input,
.char-card .detail-select { padding: 9px 12px; font-size: 14px; font-family: var(--body); }
.char-card .detail-select { padding-right: 34px; background-position: right 10px center; }
.char-card .char-card-desc { resize: vertical; min-height: 44px; line-height: 1.45; }
.char-card .char-card-name { font-weight: 600; }
.char-card .character-type-toggle { margin-top: 8px; padding: 2px; }
.char-card .form-row { margin-top: 8px; }
.char-card .char-card-desc { margin-top: 8px; }
.char-card .type-pill { padding: 6px 13px; font-size: 12.5px; }

.char-card-readonly-name {
    font-size: .98rem; font-weight: 700; color: var(--ink, #22263A);
    line-height: 1.3;
}
.char-card-readonly-desc {
    font-size: .82rem; color: var(--text-muted, #6B7086);
    line-height: 1.45; margin-top: 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.char-card-upload {
    display: inline-block; margin-top: 8px;
    padding: .38rem .8rem;
    font-size: .8rem; font-weight: 700;
    color: var(--ink, #22263A);
    background: var(--marigold-tint, #FFF1C9);
    border: 1.5px dashed var(--marigold-deep, #D99A00);
    border-radius: var(--pill, 999px);
    cursor: pointer;
}
.char-card-upload:hover { background: var(--marigold, #FFB100); }
.char-card-status {
    display: inline-block; margin-top: 8px;
    padding: .28rem .7rem;
    font-size: .76rem; font-weight: 700;
    color: var(--moss, #3E7C59);
    background: var(--moss-tint, #E1F0E6);
    border: 1.5px solid var(--moss, #3E7C59);
    border-radius: var(--pill, 999px);
}
.char-card-error {
    margin-top: 8px; font-size: .8rem; font-weight: 600;
    color: var(--danger, #C2413B);
}

.char-card-actions { flex-shrink: 0; }
.char-card-btn {
    width: 32px; height: 32px; padding: 0;
    border: 1.5px solid var(--rule, #DCD4C4);
    border-radius: 50%;
    background: var(--paper, #FFFDF8);
    color: var(--text-muted, #6B7086);
    font-size: 1rem; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.char-card-btn:hover {
    background: var(--raspberry-tint, #FBE1EA);
    border-color: var(--raspberry, #E0457B);
    color: var(--raspberry, #E0457B);
}

/* ---------- "add a character" ---------- */
.add-char-divider {
    display: flex; align-items: center; gap: 14px;
    margin: 20px 0 12px;
    color: var(--text-muted, #6B7086);
    font-size: .78rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
.add-char-divider::before,
.add-char-divider::after { content: ""; flex: 1; height: 1.5px; background: var(--rule, #DCD4C4); }
.add-char-divider span { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.add-char-divider b {
    font-family: var(--hand, cursive);
    font-weight: 600; font-size: .95rem;
    letter-spacing: .02em; text-transform: none;
    color: var(--ink, #22263A);
    background: var(--marigold-tint, #FFF1C9);
    border: 1.5px solid var(--marigold-deep, #D99A00);
    border-radius: var(--pill, 999px);
    padding: .05rem .6rem;
}

.add-char-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.add-char-btn {
    display: flex; align-items: center; gap: 12px;
    text-align: left;
    padding: 14px;
    margin: 0;
    border: 1.5px dashed var(--rule, #DCD4C4);
    border-radius: var(--radius, 14px);
    background: var(--paper, #FFFDF8);
    color: var(--ink, #22263A);
    font-family: var(--body);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.add-char-btn svg {
    width: 40px; height: 40px; flex-shrink: 0;
    padding: 7px; border-radius: 50%;
    border: 1.5px solid currentColor;
    background: var(--lagoon-tint, #DDF1F2);
    color: var(--lagoon, #0E7C86);
}
.add-char-upload  svg { background: var(--moss-tint, #E1F0E6);     color: var(--moss, #3E7C59); }
.add-char-library svg { background: var(--marigold-tint, #FFF1C9); color: var(--marigold-deep, #D99A00); }
.add-char-btn span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.add-char-btn strong { font-size: .92rem; font-weight: 700; color: var(--ink, #22263A); }
.add-char-btn small { font-size: .76rem; color: var(--text-muted, #6B7086); line-height: 1.3; }
.add-char-btn:hover {
    border-style: solid;
    border-color: var(--lagoon, #0E7C86);
    background: var(--card, #fff);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}
.add-char-upload:hover  { border-color: var(--moss, #3E7C59); }
.add-char-library:hover { border-color: var(--marigold-deep, #D99A00); }

/* Free tier: the library button is an invitation, not a dead end. */
.add-char-btn.is-locked { opacity: .8; }
.add-char-btn.is-locked small { color: var(--marigold-deep, #D99A00); font-weight: 700; }

.add-char-max {
    margin: 20px 0 0;
    padding: 14px 16px;
    font-size: .88rem; font-weight: 600;
    color: var(--ink, #22263A);
    background: var(--oat, #F3EDE2);
    border: 1.5px dashed var(--rule, #DCD4C4);
    border-radius: var(--radius, 14px);
    text-align: center;
}
.add-char-max a { color: var(--lagoon-deep, #0A5F67); font-weight: 700; }

.add-char-divider[hidden],
.add-char-row[hidden],
.add-char-max[hidden] { display: none !important; }

@media (max-width: 720px) {
    .add-char-row { grid-template-columns: 1fr; }
    .char-card { flex-wrap: wrap; gap: 12px; }
    .char-card-thumb { width: 64px; height: 64px; }
    .char-card-actions { margin-left: auto; }
    .char-card-info { flex: 1 1 100%; order: 3; }
    .char-card .form-row { flex-wrap: wrap; }
}

/* ---------- saved-character library ---------- */
.char-library-modal {
    display: none; position: fixed; inset: 0; z-index: 1100;
    background: rgba(27, 35, 64, .55);
    backdrop-filter: blur(4px);
    align-items: center; justify-content: center;
    padding: 4.5rem 1rem 1rem;
}
.char-library-modal.open { display: flex; }
.char-library-card {
    background: var(--paper, #FFFDF8);
    border: 1.5px solid var(--rule, #DCD4C4);
    border-radius: var(--radius-lg, 20px);
    box-shadow: var(--shadow-lift);
    max-width: 560px; width: 100%;
    max-height: calc(100vh - 6rem);
    overflow: hidden; display: flex; flex-direction: column;
}
.char-library-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1.5px solid var(--rule, #DCD4C4);
}
.char-library-header h3 {
    font-family: var(--display); font-size: 1.2rem; font-weight: 400;
    color: var(--ink, #22263A); margin: 0;
}
.char-library-close {
    width: 34px; height: 34px; padding: 0;
    border: 1.5px solid var(--rule, #DCD4C4); border-radius: 50%;
    background: var(--card, #fff); color: var(--text-muted, #6B7086);
    font-size: .9rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.char-library-close:hover { background: var(--oat, #F3EDE2); color: var(--ink, #22263A); }

.char-library-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    padding: 1rem 1.25rem; overflow-y: auto; flex: 1;
    /* Both of these are load-bearing, and PersonalizedComics learned it the hard
       way. This grid is a flex:1 child of a max-height column, so it has a
       DEFINITE height: with the default stretch, rows divide that height between
       them, and at a few hundred saved characters that is a handful of pixels per
       row — every tile collapses to its own border and the modal fills with thin
       dark lines. And rows must size to their CONTENT: with aspect-ratio on a
       percentage-width child inside a 1fr column, the row intrinsic height
       resolves to 0 and the tiles collapse the same way. Do not remove either. */
    align-content: start;
    grid-auto-rows: max-content;
}
.char-lib-item {
    background: var(--card, #fff);
    border: 1.5px solid var(--rule, #DCD4C4);
    border-radius: var(--radius-xs, 8px);
    overflow: hidden; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.char-lib-item:hover {
    border-color: var(--lagoon, #0E7C86);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}
.char-lib-item.disabled { opacity: .35; pointer-events: none; }
.char-lib-item .lib-img {
    position: relative;
    width: 100%; aspect-ratio: 1;
    overflow: hidden;
    border-bottom: 1.5px solid var(--rule, #DCD4C4);
    /* Shimmer while the sheet arrives. The image is NEVER hidden by CSS — an
       opacity:0 plus an onload reveal is one broken handler away from artwork
       that loads and then stays invisible forever. */
    background-color: var(--oat, #F3EDE2);
    background-image: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.65) 50%, transparent 80%);
    background-size: 220% 100%;
    animation: ltr-lib-shimmer 1.3s linear infinite;
}
@keyframes ltr-lib-shimmer { to { background-position: -220% 0; } }
.char-lib-item .lib-img img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; background: var(--oat, #F3EDE2);
}
.char-lib-item .lib-name {
    padding: .5rem .6rem .1rem;
    font-size: .82rem; font-weight: 700; color: var(--ink, #22263A);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.char-lib-item .lib-style {
    padding: 0 .6rem .5rem;
    font-size: .7rem; color: var(--text-muted, #6B7086);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.char-lib-empty {
    grid-column: 1 / -1; text-align: center;
    padding: 2.5rem 1rem; color: var(--text-muted, #6B7086); font-size: .9rem;
    line-height: 1.6;
}
.char-lib-empty a { color: var(--lagoon-deep, #0A5F67); font-weight: 700; }

/* "Improve" badge on legacy characters with no vision-extracted description. */
.char-enrich-badge {
    position: absolute; top: 6px; right: 6px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    padding: .2rem .5rem;
    font-family: var(--body); font-size: .66rem; font-weight: 700;
    color: var(--ink, #22263A);
    background: var(--marigold, #FFB100);
    border: 1.5px solid var(--marigold-deep, #D99A00);
    border-radius: var(--pill, 999px);
    cursor: pointer;
}
.char-enrich-badge:hover { background: var(--marigold-deep, #D99A00); color: #fff; }

.char-lib-more {
    grid-column: 1 / -1;
    padding: .7rem 1rem;
    border: 1.5px dashed var(--rule, #DCD4C4);
    border-radius: var(--radius-xs, 8px);
    background: var(--paper, #FFFDF8);
    color: var(--text-soft, #464B60);
    font-family: var(--body); font-size: .85rem; font-weight: 700;
    cursor: pointer;
}
.char-lib-more:hover { background: var(--oat, #F3EDE2); }

@media (max-width: 640px) {
    .char-library-grid { grid-template-columns: repeat(2, 1fr); }
    .char-library-modal { padding: 4rem .75rem .75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .char-lib-item .lib-img { animation: none; background-image: none; }
    .add-char-btn:hover, .char-lib-item:hover { transform: none; }
}

/* ---------- reclaiming what app.css stomps ----------
   app.css carries a blanket rebrand rule:
     [class*="-card"], [class$="card"] {
         border-radius: var(--radius-lg) !important; border-color: var(--rule) !important; }
   Every .char-card* element matches it on its NAME alone, which rounds the
   thumbnail and the remove button to 20px, rounds the text inputs into
   lozenges, and repaints the coloured borders grey. Load order cannot beat
   !important, so these re-assert the values this component actually needs.
   Keep this block last. */
.char-card                       { border-radius: var(--radius, 14px) !important; border-color: var(--rule, #DCD4C4) !important; }
.char-card.slot-invalid          { border-color: var(--danger, #C2413B) !important; }
.char-card-thumb                 { border-radius: var(--radius-xs, 8px) !important; }
.char-card-name,
.char-card-desc                  { border-radius: 10px !important; }
.char-card-name:focus,
.char-card-desc:focus            { border-color: var(--lagoon, #0E7C86) !important; }
.char-card-btn                   { border-radius: 50% !important; }
.char-card-btn:hover             { border-color: var(--raspberry, #E0457B) !important; }
.char-card-upload                { border-radius: var(--pill, 999px) !important; border-color: var(--marigold-deep, #D99A00) !important; }
.char-card-status                { border-radius: var(--pill, 999px) !important; border-color: var(--moss, #3E7C59) !important; }
.char-library-card               { border-radius: var(--radius-lg, 20px) !important; }