/**
 * collections.css
 * 📚 The saved Collections on the website: the shelf of your collections and one collection's quotes (leather and gold glass over
 * the Hall gallery's painting, or the classic purple look), and the dialogs around them (add to collection, create, confirm,
 * account prompt). The screens are built on the painted-canvas shell of world_clock.css (.wc-root, .wc-canvas, .wc-header,
 * .wc-icon-btn, .wc-plaque …); this file adds what is the collections' own, under the prefix .awc-. The dialogs live in their own
 * layer (#awgCollectionsLayer, z-index 12000) so they can open above any painted screen, the Immersive Reader included.
 * Everything is sized in em of the screen's font-size, which grows with the window, so a 4K display gets larger cards, not just
 * more stretched ones. Like the Hall the shelf scrolls, so there is no --u here.
 */

.awc-root,
.awc-layer {
    --awc-gold: #d4af37;
    --awc-gold-hi: #ffd700;
    --awc-gold-line: rgba(212, 175, 55, 0.34);
    --awc-gold-faint: rgba(212, 175, 55, 0.2);
    --awc-leather: #2c1810;
    --awc-leather-deep: #1a0f08;
    --awc-muted: #b39a76;
    --awc-text: #f6efe0;
    --awc-danger: #ff6b6b;
    --awc-serif: 'Baskerville', 'Baskervville', 'Libre Baskerville', 'Hoefler Text', Georgia, 'Times New Roman', serif;
    --awc-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, 'Courier New', monospace;
    --awc-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(16px, calc(0.6vw + 7.4px), 24px);
}

/* one point under the other painted screens (9000): the Immersive Reader or the Hall, opened from here, always stacks above it */
.wc-root.awc-root {
    z-index: 8999;
    --awc-min: 8.5em;
    --awc-gap: 0.75em;
}

@media (min-width: 600px) {
    .wc-root.awc-root { --awc-min: 12em; --awc-gap: 1em; }
}

@media (min-width: 900px) {
    .wc-root.awc-root { --awc-min: 13.5em; }
}

@media (min-width: 1400px) {
    .wc-root.awc-root { --awc-min: 14.5em; --awc-gap: 1.125em; }
}

/* a little more of the painting shows through: the cards are glass, the gaps are not */
.awc-root .wc-veil-dark {
    background: linear-gradient(to bottom, rgba(3, 6, 4, 0.82) 0%, rgba(3, 6, 4, 0.46) 24%, rgba(3, 6, 4, 0.5) 62%, rgba(3, 6, 4, 0.92) 100%);
}

/* The page's own typography (enhanced_typography.js) dresses every h2, h3 and p it meets with margins, shadows and sizes.
   These resets come before every component rule below, so what the collections set for themselves always wins.
   The shell's museum plaque (p.wc-plaque) is left out: it keeps the look world_clock.css gives it. */
.awc-root :where(h2, h3, p:not(.wc-plaque), ul, ol, blockquote),
.awc-layer :where(h2, h3, p, ul, ol, blockquote) {
    margin: 0;
    padding: 0;
    font: inherit;
    letter-spacing: normal;
    color: inherit;
    text-shadow: none;
}

.awc-layer :where(*, *::before, *::after) {
    box-sizing: border-box;
}

.awc-layer :where(button) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.awc-layer :where(button:disabled) {
    cursor: default;
}

.awc-layer :where(ul) {
    list-style: none;
}

.awc-layer :where(:focus) {
    outline: none;
}

/* ---------- the scrolling body ---------- */
.awc-body {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.4) transparent;
}

.awc-body::-webkit-scrollbar {
    width: 8px;
}

.awc-body::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(212, 175, 55, 0.35);
}

.awc-inner {
    width: min(112em, 100%);
    margin: 0 auto;
    padding: 0.125em clamp(0.875em, 3.4vw, 2.25em) calc(2.75em + env(safe-area-inset-bottom));
}

.awc-inner > .wc-plaque {
    margin-top: 2em;
}

/* ---------- ornaments and the shelf's hero ---------- */
.awc-rule {
    flex: none;
    width: clamp(2.5em, 12vw, 7.5em);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--awc-gold), transparent);
    opacity: 0.55;
}

.awc-glyph {
    font-size: 0.7em;
    color: var(--awc-gold);
    opacity: 0.85;
}

.awc-hero {
    padding: clamp(0.25em, 1.6vh, 1.1em) 0 clamp(1em, 3vh, 1.9em);
    text-align: center;
}

.awc-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75em;
    margin-bottom: 1em;
}

.awc-lede {
    max-width: 30ch;
    margin: 0 auto;
    font-family: var(--awc-serif);
    font-style: italic;
    font-size: clamp(1.3em, 3.3vw, 2.1em);
    line-height: 1.28;
    color: var(--awc-text);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
    text-wrap: balance;
}

.awc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    margin-top: 1.35em;
}

.awc-toolbar[hidden],
.awc-count[hidden],
.awc-note[hidden],
.awc-banner[hidden],
.awc-state[hidden],
.awc-detail-hero[hidden],
.awc-detail-desc[hidden],
.awc-detail-count[hidden],
.awc-answer[hidden] {
    display: none;
}

.awc-count,
.awc-detail-count {
    display: inline-block;
    padding: 0.5em 1.1em;
    border-radius: 999px;
    border: 1px solid var(--awc-gold-line);
    background: rgba(8, 10, 7, 0.55);
    font-family: var(--awc-mono);
    font-weight: 700;
    font-size: 0.72em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--awc-gold-hi);
}

.awc-tool {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.75em;
    height: 2.75em;
    border-radius: 50%;
    border: 1px solid var(--awc-gold-line);
    background: rgba(10, 10, 7, 0.74);
    color: var(--awc-gold);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.awc-tool svg {
    width: 1.3em;
    height: 1.3em;
}

.awc-tool:active {
    transform: scale(0.94);
}

@media (hover: hover) {
    .awc-tool:hover {
        border-color: rgba(255, 215, 0, 0.7);
        background: rgba(34, 27, 7, 0.86);
    }
}

.awc-screen.is-busy .awc-tool-refresh svg {
    animation: awc-spin 0.9s linear infinite;
}

.awc-note {
    margin-top: 0.9em;
    font-family: var(--awc-serif);
    font-style: italic;
    font-size: 0.95em;
    line-height: 1.4;
    color: var(--awc-muted);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.awc-banner {
    display: flex;
    align-items: center;
    gap: 0.75em;
    max-width: 44em;
    margin: 0 auto 1.2em;
    padding: 0.8em 1em;
    border-radius: 0.8em;
    border: 1px solid var(--awc-danger);
    background: rgba(48, 12, 12, 0.82);
    font-family: var(--awc-sans);
    font-size: 0.92em;
    line-height: 1.4;
    color: #ffd6d6;
}

.awc-banner-text {
    flex: 1;
    min-width: 0;
}

.awc-banner-btn {
    flex: none;
    padding: 0.55em 1.1em;
    border-radius: 999px;
    border: 1px solid rgba(255, 214, 214, 0.55);
    font-family: var(--awc-mono);
    font-weight: 700;
    font-size: 0.78em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}

@media (hover: hover) {
    .awc-banner-btn:hover {
        background: rgba(255, 255, 255, 0.12);
    }
}

/* ---------- the shelf: a card for each collection ---------- */
.awc-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--awc-min), 1fr));
    gap: var(--awc-gap);
}

.awc-grid[hidden],
.awc-entries[hidden] {
    display: none;
}

/* with nothing else on the shelf, the Favorites card stands alone, in the middle */
.awc-grid.is-solo {
    grid-template-columns: minmax(0, 15em);
    justify-content: center;
}

.awc-item {
    display: flex;
    min-width: 0;
}

.awc-card {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    aspect-ratio: 1 / 1.12;
    container-type: inline-size; /* what is inside the card is sized by the card's own width (cqw): the same proportions from a phone to 4K */
    border-radius: 1.1em;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(44, 24, 16, 0.84), rgba(26, 15, 8, 0.9));
    border: 1px solid var(--awc-gold-line);
    box-shadow: 0 0.75em 1.75em rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
    color: var(--awc-text);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

/* the card's decorative inner hairline, as on the app's cards */
.awc-card::after {
    content: '';
    position: absolute;
    inset: 0.5em;
    border: 1px solid var(--awc-gold-faint);
    border-radius: 0.75em;
    pointer-events: none;
}

.awc-card:active {
    transform: scale(0.985);
}

@media (hover: hover) {
    .awc-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 215, 0, 0.7);
        box-shadow: 0 1.1em 2.4em rgba(0, 0, 0, 0.6), 0 0 1.9em rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
}

.awc-card:has(.awc-card-open:focus-visible) {
    border-color: var(--awc-gold-hi);
}

.awc-card-open {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75em;
    gap: 4.6cqw;
    padding: 1.1em 0.9em;
    padding: 5cqw 4cqw;
    text-align: center;
    color: inherit;
}

.awc-card-open:focus-visible {
    outline-offset: -6px;
}

/* the emoji in a round, gold-tinted medallion */
.awc-medal {
    --tint: 212, 175, 55;
    flex: none;
    display: grid;
    place-items: center;
    width: 2em;
    height: 2em;
    font-size: 2.1em;
    line-height: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(var(--tint), 0.3), rgba(26, 15, 8, 0.88) 72%);
    border: 1px solid rgba(var(--tint), 0.55);
    box-shadow: 0 0 0 0.14em rgba(var(--tint), 0.08), 0 0 0.8em rgba(var(--tint), 0.28);
}

.awc-card .awc-medal {
    font-size: 2.45em;
    font-size: clamp(26px, 19cqw, 72px);
}

.awc-card-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-family: var(--awc-serif);
    font-weight: 700;
    font-size: 1.2em;
    font-size: clamp(14px, 8.6cqw, 30px);
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.awc-card-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--awc-mono);
    font-size: 0.78em;
    font-size: clamp(11px, 5.6cqw, 19px);
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--awc-gold);
}

.awc-card-count svg {
    flex: none;
    width: 1.2em;
    height: 1.2em;
}

.awc-card-hint {
    max-width: 24ch;
    font-family: var(--awc-mono);
    font-size: 0.74em;
    font-size: clamp(10.5px, 5cqw, 17px);
    line-height: 1.45;
    letter-spacing: 0.04em;
    color: var(--awc-muted);
}

.awc-card[data-kind="favorites"] .awc-medal {
    --tint: 255, 107, 129;
}

.awc-card-delete {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.25em;
    height: 2.25em;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.32);
    color: var(--awc-muted);
    transition: color 0.2s ease, background 0.2s ease;
}

.awc-card-delete svg {
    width: 1.1em;
    height: 1.1em;
}

@media (hover: hover) {
    .awc-card-delete:hover {
        color: #fff;
        background: rgba(255, 107, 107, 0.9);
    }
}

@media (pointer: coarse) {
    .awc-card-delete {
        width: 2.75em;
        height: 2.75em;
        top: 0.3em;
        right: 0.3em;
    }
}

/* "Create Collection": a dashed card in the grid */
.awc-card-new {
    background: rgba(8, 10, 7, 0.7);
    border: 1.5px dashed rgba(212, 175, 55, 0.55);
}

.awc-card-new::after {
    display: none;
}

.awc-card-new .awc-medal svg {
    width: 0.7em;
    height: 0.7em;
}

.awc-card-new .awc-card-name {
    color: var(--awc-gold);
}

@media (hover: hover) {
    .awc-card-new:hover {
        background: rgba(212, 175, 55, 0.12);
    }
}

/* ---------- loading, nothing yet, login required: a glass panel, readable over any painting ---------- */
.awc-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    width: min(30em, 100%);
    margin: 1.2em auto 0;
    padding: 2em 1.6em;
    border-radius: 1.2em;
    border: 1px solid var(--awc-gold-line);
    background: rgba(8, 10, 7, 0.7);
    box-shadow: 0 0.75em 1.75em rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
    text-align: center;
    color: var(--awc-text);
}

.awc-grid + .awc-state {
    margin-top: 2em;
}

.awc-state.is-guest {
    margin-top: 2.5em;
}

.awc-state-icon {
    font-size: 3.2em;
    line-height: 1;
}

.awc-state-title {
    font-family: var(--awc-serif);
    font-weight: 700;
    font-size: 1.55em;
    line-height: 1.2;
    color: var(--awc-gold);
}

.awc-state-text {
    max-width: 34ch;
    font-family: var(--awc-serif);
    font-style: italic;
    font-size: 1.15em;
    line-height: 1.45;
    color: rgba(243, 233, 210, 0.88);
}

.awc-spinner {
    width: 2.6em;
    height: 2.6em;
    border-radius: 50%;
    border: 3px solid rgba(212, 175, 55, 0.2);
    border-top-color: var(--awc-gold-hi);
    animation: awc-spin 1s linear infinite;
}

@keyframes awc-spin {
    to { transform: rotate(360deg); }
}

/* ---------- buttons ---------- */
.awc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 3.1em;
    padding: 0.7em 1.6em;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--awc-mono);
    font-weight: 700;
    font-size: 0.74em;
    line-height: 1.25;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    transition: transform 0.15s ease, filter 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

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

.awc-btn-primary {
    background: linear-gradient(135deg, #d4af37, #c5a028);
    color: #1a0f08;
    box-shadow: 0 0.4em 1.1em rgba(212, 175, 55, 0.3);
}

.awc-btn-ghost {
    border-color: rgba(212, 175, 55, 0.55);
    color: var(--awc-gold);
}

.awc-btn-danger {
    background: linear-gradient(135deg, #ff6b6b, #e55555);
    color: #fff;
    box-shadow: 0 0.4em 1.1em rgba(255, 107, 107, 0.28);
}

.awc-btn-small {
    min-height: 2.7em;
    padding: 0.5em 1.2em;
}

.awc-btn:disabled {
    background: linear-gradient(135deg, #4a4a4a, #3a3a3a);
    border-color: transparent;
    box-shadow: none;
    color: #9a8a70;
    transform: none;
}

@media (hover: hover) {
    .awc-btn-primary:hover:not(:disabled),
    .awc-btn-danger:hover:not(:disabled) {
        filter: brightness(1.1);
    }

    .awc-btn-ghost:hover:not(:disabled) {
        background: rgba(212, 175, 55, 0.14);
        border-color: var(--awc-gold);
    }
}

/* ---------- one collection ---------- */
.awc-detail-hero {
    padding: 0.5em 0 1.8em;
    text-align: center;
}

.awc-detail-hero[data-kind="sage"] .awc-medal {
    --tint: 110, 140, 255;
}

.awc-detail-hero[data-kind="council"] .awc-medal {
    --tint: 176, 120, 255;
}

.awc-medal-big {
    font-size: 2.7em;
    margin: 0 auto 0.3em;
}

.awc-detail-name {
    max-width: 24ch;
    margin: 0 auto;
    overflow-wrap: anywhere;
    font-family: var(--awc-serif);
    font-weight: 700;
    font-size: clamp(1.7em, 4.2vw, 2.6em);
    line-height: 1.14;
    color: var(--awc-text);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
    text-wrap: balance;
}

.awc-detail-desc {
    max-width: 48ch;
    margin: 0.7em auto 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
    font-family: var(--awc-serif);
    font-style: italic;
    font-size: 1.1em;
    line-height: 1.5;
    color: rgba(243, 233, 210, 0.84);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95);
    -webkit-user-select: text;
    user-select: text;
}

.awc-detail-count {
    margin-top: 1em;
}

.awc-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6em;
    margin-top: 1.2em;
}

.awc-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    min-height: 3em;
    padding: 0 1.25em;
    border-radius: 999px;
    border: 1px solid var(--awc-gold-line);
    background: rgba(10, 10, 7, 0.74);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
    font-family: var(--awc-mono);
    font-weight: 700;
    font-size: 0.74em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--awc-gold);
    transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease, filter 0.2s ease;
}

.awc-pill svg {
    flex: none;
    width: 1.55em;
    height: 1.55em;
}

.awc-pill:active {
    transform: scale(0.96);
}

.awc-pill-gold {
    border-color: transparent;
    background: linear-gradient(135deg, #d4af37, #c5a028);
    color: #1a0f08;
}

.awc-pill-danger {
    border-color: rgba(255, 107, 107, 0.5);
    color: var(--awc-danger);
}

@media (hover: hover) {
    .awc-pill:hover {
        border-color: rgba(255, 215, 0, 0.7);
    }

    .awc-pill-gold:hover {
        filter: brightness(1.1);
    }

    .awc-pill-danger:hover {
        background: rgba(255, 107, 107, 0.16);
        border-color: var(--awc-danger);
    }
}

/* ---------- a collection's quotes (a saved answer opens inside its card) ---------- */
.awc-entries {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22em), 1fr));
    gap: var(--awc-gap);
}

/* answers are long to read: one wide column */
.awc-entries.is-answers {
    grid-template-columns: minmax(0, 1fr);
    max-width: 52em;
    margin-inline: auto;
}

.awc-entry-item {
    display: flex;
    min-width: 0;
}

.awc-entry {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-radius: 1.1em;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(44, 24, 16, 0.92), rgba(26, 15, 8, 0.95));
    border: 1px solid var(--awc-gold-line);
    box-shadow: 0 0.6em 1.5em rgba(0, 0, 0, 0.45);
    color: var(--awc-text);
}

.awc-entry[data-kind="sage"] {
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.94), rgba(15, 15, 30, 0.96));
}

.awc-entry[data-kind="council"] {
    background: linear-gradient(145deg, rgba(46, 26, 76, 0.94), rgba(26, 15, 46, 0.96));
}

.awc-entry-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    padding: 1.15em 1.25em 0.5em;
    text-align: left;
    color: inherit;
}

.awc-entry-main:focus-visible {
    outline-offset: -4px;
}

.awc-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.35em 0.8em;
    border-radius: 0.55em;
    background: rgba(212, 175, 55, 0.2);
    font-family: var(--awc-sans);
    font-weight: 700;
    font-size: 0.72em;
    color: var(--awc-gold);
}

.awc-entry-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-family: var(--awc-serif);
    font-style: italic;
    font-size: 1.08em;
    line-height: 1.5;
    color: var(--awc-text);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.awc-entry-author {
    align-self: flex-end;
    margin-top: auto;
    max-width: 100%;
    text-align: right;
    font-family: var(--awc-mono);
    font-size: 0.68em;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--awc-gold);
}

.awc-entry-author::before {
    content: '— ';
}

.awc-toggle-hint {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-family: var(--awc-mono);
    font-weight: 700;
    font-size: 0.68em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--awc-gold-hi);
}

.awc-toggle-hint svg {
    width: 1.5em;
    height: 1.5em;
    transition: transform 0.2s ease;
}

.awc-entry.is-open .awc-toggle-hint svg {
    transform: rotate(180deg);
}

@media (hover: hover) {
    .awc-entry-main:hover .awc-entry-text {
        color: #fff;
    }
}

.awc-entry-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    padding: 0.35em 0.6em 0.6em 1.25em;
}

.awc-entry-meta {
    min-width: 0;
    font-family: var(--awc-mono);
    font-size: 0.7em;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--awc-muted);
}

.awc-entry-actions {
    flex: none;
    display: inline-flex;
    gap: 0.3em;
}

.awc-icon-action {
    display: grid;
    place-items: center;
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    color: var(--awc-gold);
    transition: color 0.2s ease, background 0.2s ease;
}

.awc-icon-action svg {
    width: 1.15em;
    height: 1.15em;
}

.awc-icon-danger {
    color: var(--awc-muted);
}

@media (hover: hover) {
    .awc-icon-action:hover {
        background: rgba(212, 175, 55, 0.22);
        color: #fff;
    }

    .awc-icon-danger:hover {
        background: rgba(255, 107, 107, 0.9);
        color: #fff;
    }
}

@media (pointer: coarse) {
    .awc-icon-action {
        width: 2.75em;
        height: 2.75em;
    }
}

/* ---------- a saved Sage or Council answer ---------- */
.awc-answer {
    padding: 0.4em 1.25em 1.25em;
    border-top: 1px solid var(--awc-gold-faint);
    cursor: auto;
    -webkit-user-select: text;
    user-select: text;
}

.awc-answer-head {
    margin: 1em 0 0.4em;
}

.awc-answer-title {
    font-family: var(--awc-serif);
    font-weight: 700;
    font-size: 1.3em;
    line-height: 1.25;
    color: var(--awc-gold-hi);
}

.awc-answer-sub {
    margin-top: 0.3em;
    font-family: var(--awc-serif);
    font-style: italic;
    font-size: 1em;
    line-height: 1.4;
    color: var(--awc-muted);
}

.awc-section {
    margin-top: 1.3em;
}

.awc-section-head {
    display: flex;
    align-items: center;
    gap: 0.55em;
    margin-bottom: 0.6em;
}

.awc-section-head h3 {
    font-family: var(--awc-mono);
    font-weight: 700;
    font-size: 0.74em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--awc-gold);
}

.awc-answer-card {
    padding: 0.95em 1.05em;
    border-radius: 0.85em;
    background: rgba(212, 175, 55, 0.07);
    border: 1px solid var(--awc-gold-faint);
}

.awc-answer-short {
    margin: 0 0 0.7em;
    font-family: var(--awc-serif);
    font-weight: 700;
    font-size: 1.05em;
    line-height: 1.55;
    color: #fff;
}

.awc-answer-short:last-child {
    margin-bottom: 0;
}

.awc-practice {
    margin-top: 0.65em;
    padding: 0.85em 1em;
    border-radius: 0.85em;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--awc-gold-faint);
}

.awc-practice-head {
    display: flex;
    align-items: center;
    gap: 0.75em;
}

.awc-practice-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: var(--awc-gold);
    font-family: var(--awc-sans);
    font-weight: 700;
    font-size: 0.85em;
    color: #1a0f08;
}

.awc-practice-title {
    font-family: var(--awc-serif);
    font-weight: 700;
    font-size: 1.02em;
    line-height: 1.3;
    color: #fff;
}

.awc-practice-time {
    margin-top: 0.15em;
    font-family: var(--awc-mono);
    font-size: 0.7em;
    color: var(--awc-muted);
}

.awc-practice-desc {
    margin-top: 0.5em;
    font-family: var(--awc-serif);
    font-size: 1em;
    line-height: 1.55;
    color: rgba(246, 239, 224, 0.9);
}

.awc-challenge {
    padding: 0.95em 1.05em;
    border-radius: 0.85em;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--awc-gold-line);
    font-family: var(--awc-serif);
    font-style: italic;
    font-size: 1.02em;
    line-height: 1.55;
    color: #fff;
}

.awc-prompt {
    display: flex;
    gap: 0.65em;
    margin-top: 0.5em;
    font-family: var(--awc-serif);
    font-size: 1.02em;
    line-height: 1.5;
    color: rgba(246, 239, 224, 0.92);
}

.awc-prompt > span:first-child {
    color: var(--awc-gold);
}

/* the Council: one card per philosopher, in the colours of the app */
.awc-philosopher {
    margin-top: 0.95em;
    padding: 1.05em 1.15em;
    border-radius: 0.95em;
    background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)), linear-gradient(135deg, var(--from), var(--to));
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
}

.awc-philosopher:first-child {
    margin-top: 1em;
}

.awc-philosopher-head {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin-bottom: 0.65em;
}

.awc-philosopher-icon {
    font-size: 1.9em;
    line-height: 1;
}

.awc-philosopher-name {
    font-family: var(--awc-serif);
    font-weight: 700;
    font-size: 1.12em;
    line-height: 1.25;
    color: #fff;
}

.awc-philosopher-tradition {
    margin-top: 0.15em;
    font-family: var(--awc-mono);
    font-size: 0.68em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.88;
}

/* the answers' Markdown */
.awc-md {
    font-family: var(--awc-serif);
    font-size: 1.02em;
    line-height: 1.6;
    color: rgba(246, 239, 224, 0.93);
}

.awc-md-p {
    margin: 0 0 0.75em;
}

.awc-md > :last-child {
    margin-bottom: 0;
}

.awc-md-h {
    margin: 1em 0 0.35em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--awc-gold-hi);
}

.awc-md-h1 { font-size: 1.15em; }
.awc-md-h2 { font-size: 1.08em; }
.awc-md-h3 { font-size: 1.02em; }

.awc-philosopher .awc-md-h {
    color: #fff;
}

.awc-md-list {
    margin: 0 0 0.75em;
    padding-left: 1.35em;
}

.awc-md-list li {
    margin: 0.25em 0;
}

.awc-md-quote {
    margin: 0.6em 0;
    padding: 0.1em 0 0.1em 0.9em;
    border-left: 3px solid var(--awc-gold-line);
    font-style: italic;
}

.awc-md-rule {
    margin: 1em 0;
    border: 0;
    border-top: 1px solid var(--awc-gold-faint);
}

.awc-md code {
    padding: 0.1em 0.35em;
    border-radius: 0.3em;
    background: rgba(255, 255, 255, 0.1);
    font-family: var(--awc-mono);
    font-size: 0.9em;
}

/* ---------- entrance: the cards rise one after the other (--i is the card's place) ---------- */
.awc-screen.is-entering .awc-item,
.awc-screen.is-entering .awc-entry-item {
    animation: awc-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: calc(var(--i, 0) * 45ms + 60ms);
}

@keyframes awc-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- the dialogs' layer: above every painted screen (9000), the site's modals (10000) and the quote detail (11000) ---------- */
.awc-layer {
    position: fixed;
    inset: 0;
    z-index: 12000;
    pointer-events: none;
    font-family: var(--awc-serif);
    line-height: 1.25;
    color: var(--awc-text);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

.awc-layer :focus-visible {
    outline: 2px solid var(--awc-gold-hi);
    outline-offset: 2px;
}

.awc-backdrop {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(0.75em, env(safe-area-inset-top)) max(0.75em, env(safe-area-inset-right)) max(0.75em, env(safe-area-inset-bottom)) max(0.75em, env(safe-area-inset-left));
    background: rgba(0, 0, 0, 0.82);
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.awc-backdrop.is-open {
    opacity: 1;
}

.awc-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(34em, 100%);
    max-height: 100%;
    border-radius: 1.25em;
    border: 1px solid var(--awc-gold-line);
    background: linear-gradient(160deg, var(--awc-leather), var(--awc-leather-deep));
    box-shadow: 0 1.5em 4em rgba(0, 0, 0, 0.75);
    opacity: 0;
    transform: translateY(0.75em) scale(0.97);
    transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.awc-backdrop.is-open .awc-dialog {
    opacity: 1;
    transform: none;
}

.awc-dialog-confirm,
.awc-dialog-account,
.awc-dialog-info {
    width: min(28em, 100%);
}

.awc-dialog-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 1em 0.9em 1em 1.3em;
    border-bottom: 1px solid var(--awc-gold-faint);
}

.awc-dialog-title {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: var(--awc-serif);
    font-weight: 700;
    font-size: 1.35em;
    line-height: 1.2;
    color: var(--awc-gold);
}

.awc-dialog-x {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.6em;
    height: 2.6em;
    border-radius: 50%;
    color: var(--awc-muted);
    transition: color 0.2s ease, background 0.2s ease;
}

.awc-dialog-x svg {
    width: 1.25em;
    height: 1.25em;
}

.awc-dialog-plus {
    color: var(--awc-gold);
}

@media (hover: hover) {
    .awc-dialog-x:hover {
        color: #fff;
        background: rgba(212, 175, 55, 0.16);
    }
}

.awc-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.1em 1.3em;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.4) transparent;
}

.awc-dialog-foot {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    padding: 1em 1.3em;
    border-top: 1px solid var(--awc-gold-faint);
}

.awc-dialog-foot .awc-btn {
    flex: 1 1 8.5em;
}

.awc-dialog-text {
    font-family: var(--awc-serif);
    font-size: 1.08em;
    line-height: 1.55;
    color: rgba(246, 239, 224, 0.92);
    overflow-wrap: anywhere;
}

.awc-dialog-text + .awc-dialog-text {
    margin-top: 0.7em;
}

.awc-dialog-account .awc-dialog-body,
.awc-dialog-confirm .awc-dialog-body {
    text-align: center;
}

.awc-dialog-icon {
    margin-bottom: 0.25em;
    font-size: 3.2em;
    line-height: 1.1;
    text-align: center;
}

.awc-about {
    margin-top: 0.9em;
    padding-left: 1.3em;
    list-style: disc;
}

.awc-about li {
    margin: 0.4em 0;
    font-family: var(--awc-serif);
    font-size: 1.05em;
    line-height: 1.45;
    color: rgba(246, 239, 224, 0.92);
}

.awc-about li::marker {
    color: var(--awc-gold);
}

/* ---------- forms ---------- */
.awc-field {
    display: block;
    margin-bottom: 1.15em;
}

.awc-label {
    display: block;
    margin-bottom: 0.5em;
    font-family: var(--awc-mono);
    font-weight: 700;
    font-size: 0.74em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--awc-gold);
}

.awc-label b {
    color: var(--awc-danger);
}

.awc-input {
    display: block;
    width: 100%;
    padding: 0.8em 0.95em;
    border-radius: 0.8em;
    border: 1px solid rgba(212, 175, 55, 0.32);
    background: rgba(212, 175, 55, 0.06);
    font-family: var(--awc-sans);
    font-size: 1em;
    line-height: 1.35;
    color: #fff;
}

.awc-input::placeholder {
    color: #9d8663;
    opacity: 1;
}

.awc-input:focus {
    border-color: var(--awc-gold);
}

.awc-input[aria-invalid="true"] {
    border-color: var(--awc-danger);
}

.awc-textarea {
    min-height: 6.5em;
    resize: vertical;
}

.awc-field-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75em;
    min-height: 1.3em;
    margin-top: 0.4em;
}

.awc-error {
    font-family: var(--awc-sans);
    font-size: 0.82em;
    line-height: 1.35;
    color: var(--awc-danger);
}

.awc-counter {
    margin-left: auto;
    flex: none;
    font-family: var(--awc-mono);
    font-size: 0.68em;
    color: var(--awc-muted);
}

.awc-form-error {
    font-family: var(--awc-sans);
    font-size: 0.9em;
    line-height: 1.4;
    color: var(--awc-danger);
}

.awc-form-error:empty,
.awc-error:empty {
    display: none;
}

.awc-form-error {
    margin-top: 0.5em;
}

.awc-emojis {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5em;
}

@media (min-width: 440px) {
    .awc-emojis { grid-template-columns: repeat(8, 1fr); }
}

.awc-emoji {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    font-size: 1.6em;
    line-height: 1;
    border-radius: 0.6em;
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: rgba(212, 175, 55, 0.05);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.awc-emoji[aria-checked="true"] {
    border-color: var(--awc-gold);
    background: rgba(212, 175, 55, 0.22);
    box-shadow: inset 0 0 0 1px var(--awc-gold);
}

@media (hover: hover) {
    .awc-emoji:hover {
        border-color: var(--awc-gold);
        transform: scale(1.06);
    }
}

.awc-emojis.is-compact {
    gap: 0.35em;
}

.awc-emojis.is-compact .awc-emoji {
    font-size: 1.3em;
}

/* ---------- "Add to collection" ---------- */
.awc-preview {
    flex: none;
    padding: 0.9em 1.3em;
    border-bottom: 1px solid var(--awc-gold-faint);
    background: rgba(212, 175, 55, 0.05);
}

.awc-preview-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-family: var(--awc-serif);
    font-style: italic;
    font-size: 0.98em;
    line-height: 1.45;
    color: #fff;
}

.awc-preview-author {
    margin-top: 0.3em;
    font-family: var(--awc-mono);
    font-size: 0.66em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--awc-muted);
}

.awc-rows {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6em;
}

.awc-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85em;
    padding: 0.8em 0.95em;
    border-radius: 0.85em;
    border: 1px solid var(--awc-gold-faint);
    background: rgba(212, 175, 55, 0.05);
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.awc-row.is-on {
    border-color: var(--awc-gold);
    background: rgba(212, 175, 55, 0.16);
    box-shadow: inset 0 0 0 1px var(--awc-gold);
}

@media (hover: hover) {
    .awc-row:hover {
        border-color: var(--awc-gold-line);
        background: rgba(212, 175, 55, 0.1);
    }
}

.awc-check {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.55em;
    height: 1.55em;
    border-radius: 0.4em;
    border: 2px solid rgba(212, 175, 55, 0.5);
    color: #1a0f08;
}

.awc-check svg {
    width: 1.05em;
    height: 1.05em;
}

.awc-row.is-on .awc-check {
    border-color: var(--awc-gold);
    background: var(--awc-gold);
}

.awc-row-emoji {
    flex: none;
    font-size: 1.65em;
    line-height: 1;
}

.awc-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}

.awc-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--awc-sans);
    font-weight: 700;
    font-size: 1em;
    color: #fff;
}

.awc-row-count {
    font-family: var(--awc-mono);
    font-size: 0.72em;
    color: var(--awc-muted);
}

.awc-mini {
    display: grid;
    gap: 0.7em;
    margin-bottom: 1em;
    padding: 1em;
    border-radius: 0.95em;
    border: 1px dashed rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.05);
}

.awc-mini-title {
    font-family: var(--awc-mono);
    font-weight: 700;
    font-size: 0.74em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--awc-gold);
}

.awc-mini .awc-error {
    margin-top: -0.2em;
}

.awc-mini-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6em;
}

.awc-add-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7em;
    padding: 1.2em 0;
    text-align: center;
}

.awc-add-empty .awc-state-text {
    font-size: 1.05em;
}

.awc-dialog-body > .awc-note {
    text-align: center;
}

.awc-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    padding: 1.5em 0;
}

.awc-done-check {
    display: grid;
    place-items: center;
    width: 3.6em;
    height: 3.6em;
    margin-bottom: 0.4em;
    border-radius: 50%;
    background: var(--awc-gold);
    color: #1a0f08;
    animation: awc-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

.awc-done-check svg {
    width: 1.9em;
    height: 1.9em;
}

@keyframes awc-pop {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.awc-done-line {
    font-family: var(--awc-sans);
    font-weight: 700;
    font-size: 1.05em;
    text-align: center;
    color: #fff;
}

/* ---------- the toast: a line of confirmation over everything ---------- */
.awc-toast {
    position: absolute;
    left: 50%;
    bottom: max(1.25em, env(safe-area-inset-bottom));
    max-width: min(32em, calc(100% - 1.5em));
    padding: 0.8em 1.25em;
    border-radius: 0.95em;
    border: 1px solid var(--awc-gold-line);
    background: rgba(20, 14, 8, 0.96);
    box-shadow: 0 0.6em 1.6em rgba(0, 0, 0, 0.6);
    font-family: var(--awc-sans);
    font-weight: 700;
    font-size: 0.9em;
    line-height: 1.35;
    text-align: center;
    color: #fff;
    opacity: 0;
    transform: translate(-50%, 1em);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.awc-toast:empty {
    display: none;
}

.awc-toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

.awc-toast.is-error {
    border-color: var(--awc-danger);
    color: #ffd6d6;
}

/* ---------- a phone: the painting drifts behind every card and blurring it again and again is heavy,
   so the glass gets a little more body instead ---------- */
@media (max-width: 639px), (pointer: coarse) {
    .awc-card,
    .awc-state {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .awc-card {
        background: linear-gradient(145deg, rgba(44, 24, 16, 0.9), rgba(26, 15, 8, 0.94));
    }

    .awc-state {
        background: rgba(8, 10, 7, 0.84);
    }

    .awc-card-new {
        background: rgba(8, 10, 7, 0.78);
    }
}

@media (max-width: 599px) {
    .awc-medal-big {
        font-size: 2.3em;
    }

    .awc-pill {
        padding: 0 1em;
    }
}

/* ---------- classic look: purple glass, no painting ---------- */
.awc-root.is-classic .awc-card,
.awc-root.is-classic .awc-entry[data-kind="quote"] {
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(255, 215, 0, 0.12), transparent 62%),
        linear-gradient(135deg, rgba(42, 26, 58, 0.92), rgba(26, 15, 42, 0.92));
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.14);
}

.awc-root.is-classic .awc-card-new {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.4);
}

.awc-root.is-classic .awc-count,
.awc-root.is-classic .awc-detail-count {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.35);
}

.awc-root.is-classic .wc-plaque {
    display: none;
}

/* ---------- reduced motion: nothing rises, nothing lifts, nothing spins fast ---------- */
@media (prefers-reduced-motion: reduce) {
    .awc-screen.is-entering .awc-item,
    .awc-screen.is-entering .awc-entry-item {
        animation: none;
    }

    .awc-card,
    .awc-btn,
    .awc-pill,
    .awc-emoji,
    .awc-dialog,
    .awc-backdrop,
    .awc-toast {
        transition-duration: 0.01s;
    }

    .awc-card:hover,
    .awc-card:active,
    .awc-emoji:hover {
        transform: none;
    }

    .awc-dialog {
        transform: none;
    }

    .awc-done-check {
        animation: none;
    }

    .awc-spinner,
    .awc-screen.is-busy .awc-tool-refresh svg {
        animation-duration: 2.6s;
    }
}