/* ── Secret Santa ──────────────────────────────────────────────────────────────
   Festive red/gold identity, but every surface colour comes from the theme vars so
   the page follows light / dark / high contrast like the rest of the site (the
   /embed lesson: never hardcode a page's background). */

.page-secret-santa {
    --ss-red: #c1272d;
    --ss-red-dk: #8e1b20;
    --ss-gold: #e6b422;
    --ss-green: #0f766e;
}

/* ── cards + form ─────────────────────────────────────────────────────────── */
.ss-card {
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e3e8ef);
    border-radius: 16px;
    padding: 22px;
}
.ss-h { font-size: 1.05rem; font-weight: 800; margin: 0 0 4px; color: var(--theme-text, #1f2937); }
.ss-sub { font-size: .875rem; color: var(--theme-muted, #6b7280); margin: 0 0 14px; line-height: 1.6; }
.ss-lbl {
    display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--theme-muted, #9aa3af); margin-bottom: 4px;
}
.ss-in {
    width: 100%; border: 1px solid var(--theme-border, #e3e8ef); border-radius: 9px;
    padding: 9px 12px; font-size: .95rem; background: var(--theme-bg, #fff);
    color: var(--theme-text, #1f2937);
}
.ss-in:focus { outline: none; border-color: var(--ss-red); box-shadow: 0 0 0 3px rgba(193,39,45,.12); }

.ss-person, .ss-excl { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ss-in-name { flex: 1 1 40%; }
.ss-in-mail { flex: 1 1 55%; }
/* ── the exclusion dropdowns ───────────────────────────────────────────────────
   ⚠️ A <select> given only border/padding keeps the NATIVE OS caret, which on
   Windows is a small square-ish arrow tight against the edge — it looks bolted on
   next to these rounded inputs, which is what the owner spotted. Suppress it with
   `appearance: none` (plus ::-ms-expand for old Edge) and draw our own chevron.
   ⚠️ The chevron is a background-image, so its colour cannot inherit — it is set
   from a variable and re-declared for dark/high-contrast below, otherwise a dark
   arrow disappears on a dark field. */
.ss-sel {
    flex: 1 1 auto;
    --ss-caret: %236b7280;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 15px 15px;
    cursor: pointer;
    text-overflow: ellipsis;
}
.ss-sel::-ms-expand { display: none; }
.ss-sel:hover { border-color: var(--ss-red); }

/* lighter chevron on dark surfaces, or it vanishes into the field */
[data-theme="dark"] .ss-sel,
[data-theme="studio"] .ss-sel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
[data-theme="high-contrast"] .ss-sel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
.ss-excl-mid { font-size: .8rem; font-weight: 700; color: var(--theme-muted, #6b7280); white-space: nowrap; }
.ss-x {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--theme-border, #e3e8ef); background: transparent;
    color: var(--theme-muted, #9aa3af); font-size: 18px; line-height: 1;
}
.ss-x:hover { border-color: var(--ss-red); color: var(--ss-red); }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.ss-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; padding: 9px 18px; font-weight: 700; font-size: .9rem;
    cursor: pointer; border: 1.5px solid transparent; text-decoration: none;
}
.ss-btn-go { background: var(--ss-red); color: #fff; }
.ss-btn-go:hover { background: var(--ss-red-dk); color: #fff; }
.ss-btn-ghost { background: transparent; color: var(--ss-red); border-color: var(--ss-red); }
.ss-btn-ghost:hover { background: rgba(193,39,45,.07); color: var(--ss-red); }
.ss-btn-copy { padding: 6px 14px; font-size: .8rem; background: transparent;
    border-color: var(--theme-border, #e3e8ef); color: var(--theme-muted, #5b6470); }
.ss-btn-copy:hover { border-color: var(--ss-red); color: var(--ss-red); }
.ss-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ── alerts ───────────────────────────────────────────────────────────────── */
.ss-alert { border-radius: 11px; padding: 12px 15px; font-size: .875rem; line-height: 1.6; }
.ss-alert-warn { background: #fff8e6; border: 1px solid #f0d9a0; color: #7a5b12; }
.ss-alert-ok { background: #eafaf3; border: 1px solid #a8e0c8; color: #14603f; }

/* ── organiser link rows ──────────────────────────────────────────────────── */
.ss-link-row {
    display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
    padding: 10px 0; border-bottom: 1px solid var(--theme-border, #eef1f6);
}
.ss-link-who { flex: 0 0 170px; display: flex; flex-direction: column; }
.ss-link-mail { font-size: 11.5px; color: var(--theme-muted, #9aa3af); }
.ss-link-nomail { font-style: italic; }
.ss-link-url {
    flex: 1 1 240px; min-width: 0; font-family: ui-monospace, Menlo, monospace;
    font-size: 11.5px; border: 1px solid var(--theme-border, #e3e8ef); border-radius: 7px;
    padding: 6px 9px; background: var(--theme-bg, #f8fafc); color: var(--theme-text, #1f2937);
}

/* ── house rules chips ────────────────────────────────────────────────────── */
.ss-rules { display: flex; gap: 8px; flex-wrap: wrap; }
.ss-rule {
    display: inline-flex; align-items: center; font-size: .82rem; font-weight: 600;
    background: var(--theme-surface, #f1f5f9); border: 1px solid var(--theme-border, #e3e8ef);
    border-radius: 999px; padding: 5px 13px; color: var(--theme-text, #343f52);
}
.ss-note-txt { font-style: italic; color: var(--theme-muted, #6b7280); margin: 12px 0 0; }
.ss-secret { font-size: .82rem; font-weight: 600; color: var(--ss-green); }
.ss-hat { font-size: 42px; line-height: 1; margin-bottom: 6px; }
.ss-kick {
    font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
    color: var(--theme-muted, #9aa3af); margin-bottom: 2px;
}
.ss-hello { font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; }

/* ── the unwrap ───────────────────────────────────────────────────────────── */
.ss-gift-stage { display: flex; flex-direction: column; align-items: center; padding: 18px 0 6px; }
.ss-gift-wrap {
    background: none; border: none; padding: 0; cursor: pointer; line-height: 0;
    /* ⚠️ site.css applies a broad `transition: all`, which fights per-frame SVG
       changes and makes elements smear in from the SVG origin. Kill it here — the
       animation below is @keyframes, which `transition: none` does not touch. */
    transition: none !important;
}
.ss-gift-wrap * { transition: none !important; }
.ss-gift-svg, .ss-tag-svg { width: 210px; height: 210px; display: block; }
.ss-gift-hint {
    font-size: .82rem; font-weight: 700; color: var(--theme-muted, #6b7280);
    margin: 10px 0 0; animation: ss-nudge 2.4s ease-in-out infinite;
}
@keyframes ss-nudge { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

.ss-gift-wrap:not(.is-open):hover .ss-gift-svg { animation: ss-shake .5s ease-in-out; }
@keyframes ss-shake {
    0%,100% { transform: rotate(0) }
    25% { transform: rotate(-3deg) } 75% { transform: rotate(3deg) }
}
.is-unwrapping .ss-lid { animation: ss-lid-off .6s cubic-bezier(.3,-.4,.6,1.5) both; }
@keyframes ss-lid-off {
    0%   { transform: translate(0,0) rotate(0deg) }
    100% { transform: translate(2px,-46px) rotate(-13deg) }
}
.is-unwrapping .ss-scrap path { animation: ss-scrap-fly .6s ease-out both; }
@keyframes ss-scrap-fly {
    0% { opacity: 0; transform: translate(0,10px) scale(.7) }
    100% { opacity: .95; transform: translate(0,0) scale(1) }
}
.is-tagged .ss-tag-svg { animation: ss-tag-drop .45s cubic-bezier(.34,1.4,.64,1) both; }
@keyframes ss-tag-drop {
    0% { opacity: 0; transform: translateY(-26px) rotate(-9deg) }
    100% { opacity: 1; transform: translateY(0) rotate(0) }
}

.ss-winner {
    font-size: clamp(2rem, 7vw, 3.2rem); font-weight: 800; line-height: 1.1;
    overflow-wrap: anywhere; margin-bottom: 12px;
}
.ss-wish { margin: 0; padding-left: 20px; font-size: .95rem; line-height: 1.9; }

@media (max-width: 575px) {
    .ss-person, .ss-excl { flex-wrap: wrap; }
    .ss-in-name, .ss-in-mail { flex: 1 1 100%; }
    .ss-link-who { flex: 1 1 100%; }
}

/* A link that has been emailed is no longer shown — see the note in organiser.php */
.ss-link-sent {
    flex: 1 1 240px; font-size: .82rem; font-weight: 700; color: var(--ss-green);
    display: inline-flex; align-items: center;
}

/* organiser: has this person opened their link yet? Reveals no pairing — just
   answers the question every organiser asks before the big day. */
.ss-opened {
    font-size: .9rem; font-weight: 700; color: var(--theme-text, #343f52);
    background: var(--theme-surface, #f8fafc); border: 1px solid var(--theme-border, #e3e8ef);
    border-radius: 10px; padding: 9px 13px; margin: 0 0 14px;
}
.ss-open-flag { flex: 0 0 auto; color: var(--theme-border, #cbd5e1); font-size: 1rem; }
.ss-open-flag.is-open { color: var(--ss-green); }

/* busy state while a mail server is being talked to (secret-santa-busy.js) */
.ss-spin {
    display: inline-block; width: 13px; height: 13px; margin-right: 7px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: ss-spin 0.7s linear infinite; vertical-align: -2px;
}
@keyframes ss-spin { to { transform: rotate(360deg) } }
.ss-btn[disabled] { opacity: .72; cursor: progress; }
.ss-link-sent.is-waiting { color: var(--theme-muted, #9aa3af); font-weight: 600; }
/* a quiet prompt on the one field that actually needs filling in */
.ss-need {
    font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--ss-red);
    margin-left: 6px; vertical-align: 1px;
}