/* Small custom layer on top of Tailwind (loaded via CDN in head.php).
   Tailwind handles general responsive layout; this file only covers things
   Tailwind utility classes don't cleanly express, like the fixed-size
   screenshot-ready card. "Lovey Dovey" theme: warm cream base, rose/blush
   accents, Fraunces for headings, Quicksand for body/UI, Caveat used
   sparingly for handwritten flourishes. */

body {
    font-family: 'Quicksand', ui-sans-serif, sans-serif;
    overflow-x: hidden;
}

/* Global film grain overlay, injected once via head.php on every page.
   Kept very subtle on the light theme so it warms the flat cream without
   turning it muddy. */
#grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.035;
    overflow: hidden;
}

#grain-overlay::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Wax seal stamp component (see includes/partials/wax_seal.php). Recolored
   to the rose accent so it reads as a love-letter seal, not a legal one. */
.wax-seal {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.wax-seal__circle {
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ef7592 0%, #E4577A 55%, #b73955 100%);
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.35),
        inset 0 -3px 5px rgba(0, 0, 0, 0.2),
        0 3px 8px -2px rgba(228, 87, 122, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wax-seal__number {
    font-family: 'Caveat', cursive;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #4A2B33;
}

.wax-seal--stamping {
    animation: wax-stamp 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes wax-stamp {
    0% { transform: scale(1.4); opacity: 0; }
    60% { transform: scale(0.95); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Small hand-drawn squiggle/heart accent, used sparingly (see spec). */
.doodle-heart {
    display: inline-block;
    color: #E4577A;
}

/* Site nav: logo heart gives a little wag on hover instead of sitting static. */
.nav-heart {
    width: 20px;
    height: auto;
    transition: transform 0.3s ease;
}

.group:hover .nav-heart {
    transform: scale(1.2) rotate(-8deg);
}

/* Site nav: pill links with a playful lift + fill on hover, not a flat underline. */
.nav-pill {
    display: inline-block;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-family: 'Quicksand', ui-sans-serif, sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    color: #7A6560;
    border: 2px solid transparent;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.nav-pill:hover {
    color: #C93F5F;
    background: #FFD9E0;
    border-color: #E4577A;
    transform: translateY(-2px) rotate(-1deg);
    box-shadow: 0 6px 14px -6px rgba(228, 87, 122, 0.45);
}

.nav-pill--active {
    color: #FFFFFF;
    background: #C93F5F;
    box-shadow: 0 4px 12px -4px rgba(201, 63, 95, 0.5);
}

.nav-pill--active:hover {
    color: #FFFFFF;
    background: #C93F5F;
    border-color: transparent;
}

/* Home page confession textarea, styled as a soft "love note" card. */
.note-card {
    transform: rotate(-0.5deg);
    transition: transform 0.2s ease;
}

.note-card__textarea {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.note-card__textarea:focus {
    border-color: #E4577A;
    box-shadow: 0 0 0 3px rgba(228, 87, 122, 0.18);
}

.note-card__placeholder {
    position: absolute;
    top: 1rem;
    left: 1.25rem;
    color: #7A6560;
    font-size: 1rem;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.note-card__placeholder.is-hidden {
    display: none;
}

#typewriter-cursor {
    margin-left: 2px;
    animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* Crushmeter: ticket-stub name inputs with a perforation divider. */
.ticket-row {
    display: flex;
    align-items: stretch;
    background: #FFF1E8;
    border: 1px solid rgba(74, 43, 51, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.ticket-stub {
    flex: 1;
    padding: 1rem clamp(0.75rem, 4vw, 1.25rem);
    min-width: 0;
}

.ticket-stub__input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: clamp(0.95rem, 3vw, 1.1rem);
    color: #3D2C2A;
}

.ticket-stub__input::placeholder {
    color: #7A6560;
}

.ticket-divider {
    width: 0;
    border-left: 2px dashed rgba(74, 43, 51, 0.2);
    position: relative;
    margin: 0.5rem 0;
}

.ticket-divider::before,
.ticket-divider::after {
    content: '';
    position: absolute;
    left: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FFF9F4;
}

.ticket-divider::before { top: -0.5rem; }
.ticket-divider::after { bottom: -0.5rem; }

/* Crushmeter: vintage gauge dial, peach-to-rose arc. */
.gauge-wrap {
    position: relative;
    max-width: 320px;
    margin: 0 auto;
}

.gauge-svg {
    width: 100%;
    height: auto;
    display: block;
}

#gauge-needle {
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: 100px 100px;
}

.gauge-value {
    /* Normal flow below the dial, not absolutely stacked over the needle
       pivot, so the percentage never sits behind/under the gauge artwork. */
    text-align: center;
    margin-top: 0.5rem;
    font-family: 'Fraunces', ui-serif, serif;
    font-size: 2rem;
    font-weight: 600;
    color: #3D2C2A;
}

.gauge-quote {
    font-family: 'Caveat', cursive;
    font-size: 1.5rem;
    font-weight: 600;
    color: #C93F5F;
}

/* Admin: folder-tab Unread/Read/Archived toggle. */
.folder-tab {
    font-family: 'Quicksand', ui-sans-serif, sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.6rem 1.1rem;
    color: #7A6560;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    white-space: nowrap;
    position: relative;
    top: 1px;
    transition: color 0.15s ease, background 0.15s ease;
}

.folder-tab:hover {
    color: #3D2C2A;
}

.folder-tab--active {
    color: #3D2C2A;
    background: #FFFFFF;
    border-color: rgba(74, 43, 51, 0.1);
    box-shadow: 0 -2px 6px rgba(74, 43, 51, 0.06);
}

.folder-panel {
    background: #FFFFFF;
    border: 1px solid rgba(74, 43, 51, 0.1);
    border-radius: 0 12px 12px 12px;
    padding: 1.5rem;
}

/* Admin: simple phone-frame mockup around the confession card preview,
   so the admin sees precisely what will be screenshotted. */
.phone-frame {
    width: 100%;
    max-width: 320px;
    padding: 14px 10px;
    background: #FFFFFF;
    border: 1px solid rgba(74, 43, 51, 0.1);
    border-radius: 32px;
    box-shadow: 0 10px 28px -10px rgba(74, 43, 51, 0.18);
}

.phone-frame::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(74, 43, 51, 0.15);
    margin: 0 auto 10px;
}

/* Admin: security log, deliberately plain and functional, not a shareable surface. */
.security-log {
    background: #FFFFFF;
    border: 1px solid rgba(74, 43, 51, 0.1);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-family: 'Quicksand', ui-monospace, monospace;
    font-size: 0.8rem;
}

.security-log__row {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(74, 43, 51, 0.08);
    color: #3D2C2A;
}

.security-log__row:last-child {
    border-bottom: none;
}

.security-log__row span:first-child {
    flex: 0 0 140px;
    color: #7A6560;
}

.security-log__row span:last-child {
    flex: 1;
    word-break: break-word;
}

.security-log__row--wrap span:last-child {
    word-break: break-all;
}

/* Reveal-on-scroll, used sparingly (see spec). */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.confession-card,
.result-card {
    width: 100%;
    max-width: 540px;
    aspect-ratio: 4 / 5;
    margin: 0 auto;
    /* 96px on a 1080-wide export card = 8.89% of width. CSS resolves
       percentage padding against width on every side, so this scales the
       96px minimum correctly at any rendered size while keeping the 4:5
       ratio, instead of eating the card at small phone-frame widths. */
    padding: 8.89%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background: #FFF3E9;
    color: #4A2B33;
    font-family: 'Fraunces', ui-serif, Georgia, serif;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='none'><path fill='white' d='M0,0 H400 V490 L390,500 L380,490 L370,500 L360,490 L350,500 L340,490 L330,500 L320,490 L310,500 L300,490 L290,500 L280,490 L270,500 L260,490 L250,500 L240,490 L230,500 L220,490 L210,500 L200,490 L190,500 L180,490 L170,500 L160,490 L150,500 L140,490 L130,500 L120,490 L110,500 L100,490 L90,500 L80,490 L70,500 L60,490 L50,500 L40,490 L30,500 L20,490 L10,500 L0,490 Z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='none'><path fill='white' d='M0,0 H400 V490 L390,500 L380,490 L370,500 L360,490 L350,500 L340,490 L330,500 L320,490 L310,500 L300,490 L290,500 L280,490 L270,500 L260,490 L250,500 L240,490 L230,500 L220,490 L210,500 L200,490 L190,500 L180,490 L170,500 L160,490 L150,500 L140,490 L130,500 L120,490 L110,500 L100,490 L90,500 L80,490 L70,500 L60,490 L50,500 L40,490 L30,500 L20,490 L10,500 L0,490 Z'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    box-shadow: 0 10px 30px -10px rgba(74, 43, 51, 0.25);
}

.confession-card--preview,
.result-card--preview {
    transform: rotate(-1deg);
}

.result-card {
    justify-content: flex-start;
}

.card-watermark {
    position: absolute;
    bottom: 2.1%;
    right: 3%;
    font-family: 'Quicksand', ui-sans-serif, sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    opacity: 0.55;
    text-transform: uppercase;
    color: #4A2B33;
}

.card-meta {
    position: absolute;
    top: 2.1%;
    left: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-body-text {
    font-size: clamp(1.15rem, 2.2vw + 0.8rem, 1.6rem);
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
    text-align: center;
}

.card-tag-badge {
    display: inline-block;
    align-self: center;
    margin-top: 1.5rem;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(74, 43, 51, 0.25);
    background: rgba(228, 87, 122, 0.08);
    font-family: 'Quicksand', ui-sans-serif, sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4A2B33;
}

.card-percentage {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

@media print {
    body * {
        visibility: hidden;
    }
    #printable-log, #printable-log * {
        visibility: visible;
    }
    #printable-log {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    .no-print {
        display: none !important;
    }
}