/* Comic maker. The first half is the comic page itself — panels, pictures and bubbles — and is also embedded, as it stands, in the HTML reader a
   comic exports to, so it must not depend on anything else in the app: every colour has a fallback. The second half is the editor around it. */

/* ---- the page ---- */
.cpage {
    --cm-letter: 1;
    position: relative;
    width: 100%;
    max-width: 60rem;
    margin-inline: auto;
    aspect-ratio: 2 / 3;
    container-type: inline-size;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.12);
    font-family: "Comic Sans MS", "Comic Neue", "Segoe UI", system-ui, sans-serif;
    color: #111;
    user-select: none;
}

.cpage--bw { background: #fcfaf4; }

.cpanel {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    border: max(2px, 0.35cqw) solid #111;
    background: #e9e9ec;
}

.cpanel__art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
}

/* Black-and-white comics are shown grey even if a picture came back with a tint; the page images and the PDF do the same. */
.cpage--bw .cpanel__art { filter: grayscale(1) contrast(1.04); }

.cpanel.is-empty { display: grid; place-items: center; cursor: pointer; }

.cpanel__none {
    display: grid;
    gap: 0.15em;
    text-align: center;
    font: 600 clamp(0.7rem, 2.4cqw, 1.2rem) "Segoe UI", system-ui, sans-serif;
    color: #7a7a86;
}

.cpanel__none small { font-weight: 400; font-size: 0.78em; }

.cpanel.is-selected {
    outline: 3px solid var(--rl-accent, #2f6df6);
    outline-offset: -3px;
    z-index: 2;
}

.cpanel.has-gif::after {
    content: "GIF";
    position: absolute;
    right: 0.4em;
    bottom: 0.4em;
    padding: 0.05em 0.4em;
    border-radius: 0.3em;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font: 700 clamp(0.55rem, 1.4cqw, 0.8rem) "Segoe UI", system-ui, sans-serif;
    pointer-events: none;
}

/* Reading and exporting do not label a GIF. */
.creader .cpanel.has-gif::after,
.cm-read .cpanel.has-gif::after { display: none; }

/* ---- bubbles: placed in percent of their panel, sized in percent of the PAGE (a panel is not a size container, so cqw here is the page's width) so every
   bubble on a page has the same lettering size, as on a printed page ---- */
.cbubble {
    --cm-ink: #111;
    position: absolute;
    isolation: isolate;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: max-content;
    max-width: 46%;
    padding: 0.7em 1em;
    border: max(1.5px, 0.14em) solid var(--cm-ink);
    border-radius: 50% / 46%;
    background: #fff;
    color: var(--cm-ink);
    --cm-bubble: 1;
    font-size: calc(1.7cqw * var(--cm-letter) * var(--cm-bubble));
    line-height: 1.18;
    text-align: center;
    overflow-wrap: break-word;
    word-break: normal;
    pointer-events: none;
}

.cbubble > span { display: block; }

/* A tail is a rotated square with two of its edges inked, painted over the bubble's own outline so the join is clean. */
.cbubble--speech::after,
.cbubble--whisper::after {
    content: "";
    position: absolute;
    bottom: -0.55em;
    width: 0.95em;
    height: 0.95em;
    background: #fff;
    border-right: max(1.5px, 0.14em) solid var(--cm-ink);
    border-bottom: max(1.5px, 0.14em) solid var(--cm-ink);
    transform: rotate(45deg) skew(12deg, 12deg);
    z-index: 1;
}

.cbubble--lean-l::after { left: 24%; }
.cbubble--lean-r::after { right: 24%; }

.cbubble--whisper { border-style: dashed; font-style: italic; }
.cbubble--whisper::after { border-style: dashed; }

.cbubble--thought { border-radius: 50% / 50%; }

.cbubble--thought::before,
.cbubble--thought::after {
    content: "";
    position: absolute;
    border: max(1.5px, 0.12em) solid var(--cm-ink);
    border-radius: 50%;
    background: #fff;
}

.cbubble--thought::before { width: 0.6em; height: 0.6em; bottom: -0.85em; }
.cbubble--thought::after { width: 0.34em; height: 0.34em; bottom: -1.5em; }
.cbubble--thought.cbubble--lean-l::before { left: 28%; }
.cbubble--thought.cbubble--lean-l::after { left: 22%; }
.cbubble--thought.cbubble--lean-r::before { right: 28%; }
.cbubble--thought.cbubble--lean-r::after { right: 22%; }

.cbubble--shout {
    padding: 1.1em 1.4em;
    border: 0;
    border-radius: 0;
    background: none;
    font-weight: 800;
    font-size: calc(2cqw * var(--cm-letter) * var(--cm-bubble));
}

.cbubble--shout::before,
.cbubble--shout::after {
    content: "";
    position: absolute;
    z-index: -1;
    clip-path: polygon(50.0% 0.0%, 57.8% 10.8%, 69.1% 3.8%, 72.2% 16.7%, 85.4% 14.6%, 83.3% 27.8%, 96.2% 30.9%, 89.2% 42.2%, 100.0% 50.0%, 89.2% 57.8%, 96.2% 69.1%, 83.3% 72.2%, 85.4% 85.4%, 72.2% 83.3%, 69.1% 96.2%, 57.8% 89.2%, 50.0% 100.0%, 42.2% 89.2%, 30.9% 96.2%, 27.8% 83.3%, 14.6% 85.4%, 16.7% 72.2%, 3.8% 69.1%, 10.8% 57.8%, 0.0% 50.0%, 10.8% 42.2%, 3.8% 30.9%, 16.7% 27.8%, 14.6% 14.6%, 27.8% 16.7%, 30.9% 3.8%, 42.2% 10.8%);
}

.cbubble--shout::before { inset: -3%; background: var(--cm-ink); }
.cbubble--shout::after { inset: 0; background: #fff; }

.cbubble--narration {
    max-width: 86%;
    border-radius: 0;
    background: #fff4c2;
    text-align: left;
    padding: 0.4em 0.65em;
    font-size: calc(1.55cqw * var(--cm-letter) * var(--cm-bubble));
}

.cbubble--sound {
    max-width: 90%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #c81e1e;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: calc(3.8cqw * var(--cm-letter) * var(--cm-bubble));
    transform: translate(-50%, -50%) rotate(-7deg);
    -webkit-text-stroke: 0.14em #fff;
    paint-order: stroke fill;
}

/* ---- the reader a comic exports to ---- */
.creader { margin: 0; background: #1c1d22; color: #e8e8ec; font-family: "Segoe UI", system-ui, sans-serif; }

.creader__bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #111216;
}

.creader__nav { display: inline-flex; align-items: center; gap: 0.75rem; }

.creader__nav button {
    padding: 0.35rem 0.8rem;
    border: 1px solid #44464f;
    border-radius: 8px;
    background: #23252c;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.creader__nav button:hover { background: #2d3039; }
.creader__stage { padding: 1rem; }
.creader__page[hidden] { display: none; }
.creader .cpage { max-width: min(46rem, calc((100vh - 5.5rem) * 2 / 3)); }

/* ---- the editor ---- */
.cm { max-width: 92rem; }

.cm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin: 0 0 1rem;
    padding: 0.25rem;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    background: var(--rl-surface-raised);
}

.cm-tab {
    padding: 0.32rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 7px;
    background: none;
    color: var(--rl-text-muted);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.cm-tab:hover { color: var(--rl-text); background: var(--rl-surface-sunken); }
.cm-tab.is-on { color: var(--rl-text); font-weight: 600; background: var(--rl-surface); border-color: var(--rl-border); }

.cm-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    background: var(--rl-surface-raised);
}

.cm-bar__text { flex: 1 1 14rem; min-width: 0; font-size: 0.9rem; }
.cm-bar__text strong { font-weight: 600; }
.cm-bar__meter { display: block; height: 4px; margin-top: 0.35rem; border-radius: 2px; background: var(--rl-surface-sunken); overflow: hidden; }
.cm-bar__meter > i { display: block; height: 100%; background: var(--rl-accent); transition: width 0.3s; }

/* The comic's title, edited where it stands on the page's banner (PageHero): it reads as the heading until it is pointed
   at, then shows itself as a field on the glass. */
.cm-hero .hero__title { flex: 1 1 18rem; }
.cm-title {
    box-sizing: border-box;
    width: 100%;
    max-width: 40rem;
    min-width: 0;
    margin-left: -0.4rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-shadow: inherit;
}
.cm-title:hover { border-color: rgb(255 255 255 / 0.28); }
.cm-title:focus { outline: none; border-color: rgb(255 255 255 / 0.55); background: rgb(10 12 18 / 0.38); }
.cm-hero a.hero__chip { text-decoration: none; }
.cm-hero a.hero__chip:hover { background: rgb(255 255 255 / 0.24); }
/* The save state's live region stays in the page while there is nothing to say, so later news is announced; it just
   draws no pill. */
.cm-hero__save:has(> span:empty) { padding: 0; border: 0; background: none; }

.cm-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cm-badge { padding: 0.1rem 0.55rem; border: 1px solid var(--rl-border); border-radius: 999px; background: var(--rl-surface-raised); font-size: 0.78rem; color: var(--rl-text-muted); }
.cm-badge--ok { color: var(--rl-ok); }
.cm-badge--warn { color: var(--rl-danger); }

.cm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1rem; align-items: start; }
.cm-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; }
.cm-row > .field { flex: 1 1 10rem; margin: 0; }
.cm-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.cm-hint { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--rl-text-muted); }
.cm-err { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--rl-danger); }

.cm-new { display: grid; gap: 0.9rem; }
.cm-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.6rem; }

.cm-choice label {
    display: grid;
    gap: 0.15rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    cursor: pointer;
}

.cm-choice label:has(input:checked) { border-color: var(--rl-accent); box-shadow: 0 0 0 1px var(--rl-accent); }
.cm-choice small { color: var(--rl-text-muted); }

/* The index's comics: a cover tile each, lifted on hover like the kit's tiles, a comic with no pictures yet shown in
   its own hue (--tile-hue) rather than as a grey box. */
.cm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.9rem; }

.cm-card {
    --tile-hue: 285;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0.5rem;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--rl-border);
    border-radius: 14px;
    background: var(--rl-surface);
    color: inherit;
    box-shadow: var(--rl-shadow-sm);
    transition: border-color var(--rl-dur) var(--rl-ease), transform var(--rl-dur) var(--rl-ease), box-shadow var(--rl-dur) var(--rl-ease);
}

.cm-card:hover { border-color: color-mix(in srgb, hsl(var(--tile-hue) 70% 55%) 55%, var(--rl-border)); transform: translateY(-2px); box-shadow: var(--rl-shadow-md); }
.cm-card:focus-within { border-color: var(--rl-accent); }
.cm-card__cover { aspect-ratio: 2 / 3; background: var(--rl-surface-sunken); display: grid; place-items: center; color: var(--rl-text-muted); overflow: hidden; }
.cm-card__cover img { width: 100%; height: 100%; object-fit: cover; }

.cm-card__blank {
    display: grid;
    place-items: center;
    gap: 0.4rem;
    width: 100%;
    height: 100%;
    background: linear-gradient(150deg, hsl(var(--tile-hue) 55% 50% / 0.22), hsl(calc(var(--tile-hue) + 50) 55% 40% / 0.12));
    font-size: 0.85rem;
    align-content: center;
}

.cm-card__blank svg { width: 1.8rem; height: 1.8rem; color: hsl(var(--tile-hue) 60% 55%); }
.cm-card__body { padding: 0 0.85rem 0.85rem; display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.cm-card__title { margin: 0; font-size: 0.97rem; font-weight: 650; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-card__title a { color: inherit; text-decoration: none; }
.cm-card__title a:hover { text-decoration: underline; }

/* characters and places */
.cm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 1rem; align-items: start; }
.cm-item { display: grid; gap: 0.6rem; padding: 0.9rem; border: 1px solid var(--rl-border); border-radius: 12px; background: var(--rl-surface); }
.cm-item__head { display: flex; gap: 0.5rem; align-items: center; }
.cm-item__head input { flex: 1; font-weight: 600; }
.cm-item textarea { min-height: 3.6rem; }

.cm-art { display: grid; gap: 0.4rem; }
.cm-art__main {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 9rem;
    border: 1px dashed var(--rl-border);
    border-radius: 10px;
    background: var(--rl-surface-sunken);
    overflow: hidden;
    color: var(--rl-text-muted);
    font-size: 0.9rem;
}

.cm-art__main img { display: block; width: 100%; max-height: 24rem; object-fit: contain; }
.cm-art__busy { position: absolute; inset: auto 0 0 0; padding: 0.3rem 0.6rem; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 0.8rem; }

.cm-takes { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cm-take { position: relative; width: 3.6rem; height: 3.6rem; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--rl-surface-sunken); cursor: pointer; }
.cm-take img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-take.is-on { border-color: var(--rl-accent); }
.cm-take small { position: absolute; left: 2px; bottom: 2px; padding: 0 0.25rem; border-radius: 4px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.62rem; }

/* pages */
.cm-pages { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }

.cm-rail { display: grid; gap: 0.6rem; position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); overflow: auto; padding-right: 0.2rem; }

.cm-pagebtn {
    display: grid;
    gap: 0.25rem;
    padding: 0.35rem;
    border: 1px solid var(--rl-border);
    border-radius: 8px;
    background: var(--rl-surface);
    color: inherit;
    font: inherit;
    font-size: 0.78rem;
    text-align: center;
    cursor: pointer;
}

.cm-pagebtn.is-on { border-color: var(--rl-accent); box-shadow: 0 0 0 1px var(--rl-accent); }
.cm-pagebtn .cpage { box-shadow: none; pointer-events: none; }
.cm-pagebtn .cpanel { border-width: 1px; }

.cm-work { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }

.cm-pagewrap .cpage { max-width: 60rem; }

.cm-editor { display: grid; gap: 0.8rem; }
.cm-editor .field { margin: 0; }
.cm-checks { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.cm-checks label { display: inline-flex; gap: 0.35rem; align-items: center; font-size: 0.9rem; }

.cm-bubbles { display: grid; gap: 0.5rem; }
.cm-bubble { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0.4rem; align-items: center; }
.cm-bubble select, .cm-bubble input { min-width: 0; width: 100%; }
.cm-bubble input { grid-column: 1 / -1; grid-row: 2; }
.cm-work > * { min-width: 0; }
.cm-editor .card__head { flex-wrap: wrap; gap: 0.4rem; }

.cm-preview { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.cm-letter { display: flex; gap: 0.5rem; align-items: center; }
.cm-letter input[type="range"] { flex: 1; min-width: 0; }
.cm-letter__value { min-width: 3.2rem; text-align: right; font-size: 0.85rem; color: var(--rl-text-muted); }
.cm-pbubble { display: grid; gap: 0.35rem; padding: 0.5rem; border: 1px solid var(--rl-border); border-radius: 8px; background: var(--rl-surface); }
.cm-pbubble__tag { font-size: 0.75rem; color: var(--rl-text-muted); }
.cm-pbubble input[type="text"], .cm-pbubble input:not([type]), .cm-pbubble select { width: 100%; min-width: 0; }
.cm-read { display: grid; gap: 0.8rem; justify-items: center; }
.cm-read__spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; width: 100%; max-width: 70rem; }
.cm-read__spread--rtl { direction: rtl; }
.cm-read__spread--rtl > * { direction: ltr; }
.cm-read__nav { display: flex; gap: 0.6rem; align-items: center; }
.cm-read .cpage { pointer-events: auto; }

.cm-exports { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.8rem; }
.cm-export { display: grid; gap: 0.4rem; align-content: start; padding: 0.9rem; border: 1px solid var(--rl-border); border-radius: 12px; background: var(--rl-surface); }
.cm-export p { margin: 0; color: var(--rl-text-muted); font-size: 0.88rem; }

@media (max-width: 62rem) {
    .cm-work { grid-template-columns: 1fr; }
    .cm-pages { grid-template-columns: 1fr; }
    .cm-rail { position: static; grid-auto-flow: column; grid-auto-columns: 6.5rem; max-height: none; overflow-x: auto; }
    .cm-bubble { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}