/* Create By Asking: Secret Santa generator. Loaded after style.css, tools.css and family.css. */

.santa { position: relative; background: radial-gradient(120% 80% at 0% 0%, rgba(179, 36, 63, 0.35) 0%, transparent 55%), radial-gradient(100% 80% at 100% 100%, rgba(31, 122, 77, 0.3) 0%, transparent 60%), var(--screen); }
.santa h3 { font-size: var(--step-1); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.santa h3 small { font: 600 0.68rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #A597CC; }
#santa-tool { scroll-margin-top: 84px; grid-template-columns: minmax(0, 1fr); }
.santa > * { min-width: 0; }
.sa-setup, .sa-result { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.sa-result > * { min-width: 0; }
.sa-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.sa-col { display: grid; gap: 10px; align-content: start; }
.sa-col h3 + .tool-note { margin-top: -4px; }
.sa-col h3:not(:first-child) { margin-top: 10px; }
.sa-add { display: flex; gap: 8px; }
.sa-add input { flex: 1 1 auto; }
.sa-names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sa-names li:not(.tool-empty) { display: inline-flex; align-items: center; gap: 2px; background: rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 4px 4px 4px 12px; color: #fff; font-weight: 600; font-size: var(--step--1); max-width: 100%; }
.sa-names li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-x { flex: none; border: 0; width: 28px; height: 28px; border-radius: 50%; background: none; color: #A597CC; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.sa-x:hover { color: #FF7A62; background: rgba(255, 255, 255, 0.08); }
.sa-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.sa-pair > span { color: #A597CC; font-size: var(--step--1); }
.sa-pair select { width: 100%; }
.sa-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sa-rules li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--step--1); color: #CBBFE8; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 2px 0; }
.sa-rules b { color: #fff; }
.sa-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sa-details .sa-wide { grid-column: 1 / -1; }
.sa-details input, .sa-details textarea { width: 100%; }
.sa-details input[type="date"] { color-scheme: dark; }
.sa-alert { background: rgba(255, 122, 98, 0.16); color: #FFD3C9; border-radius: 10px; padding: 10px 14px; font-size: var(--step--1); }
.sa-alert.ok { background: rgba(91, 212, 143, 0.14); color: #C9F5DA; }
.santa .sa-draw { background: #B3243F; color: #fff; font-size: var(--step-0); padding: 14px 26px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2); }
.santa .sa-draw:hover { background: #C42B48; }

/* result */
.sa-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.sa-sub { color: #CBBFE8; font-size: var(--step--1); margin: 0 0 10px; }
.sa-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.sa-links li { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 10px 10px 10px 14px; }
.sa-links li > b { color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-links .f-row { flex-wrap: nowrap; flex: none; }
.sa-room { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sa-person { border: 0; border-radius: 12px; min-height: 56px; padding: 10px; background: rgba(255, 255, 255, 0.1); color: #fff; font: 700 var(--step-0)/1.2 var(--body); cursor: pointer; overflow-wrap: anywhere; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2); }
.sa-person:hover { background: rgba(255, 255, 255, 0.16); }
.sa-person.seen { background: rgba(255, 255, 255, 0.03); color: #7E71A8; box-shadow: none; }
.sa-person.seen::after { content: " ✓"; color: #5BD48F; }
.sa-pop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: #140B2E; overflow-y: auto; }
.sa-pop[hidden] { display: none; }
.sa-pop-in { width: 100%; display: grid; justify-items: center; }

/* the card */
.sa-card { position: relative; width: min(100%, 420px); background: #FFF8E8; color: #1C0F3F; border-radius: 16px; padding: 30px 22px 22px; text-align: center; display: grid; gap: 12px; justify-items: center; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6); }
.sa-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: repeating-linear-gradient(-45deg, #B3243F 0 12px, #FFF8E8 12px 20px, #1F7A4D 20px 32px, #FFF8E8 32px 40px); }
.sa-card .eyebrow { color: #B3243F; }
.sa-hi { font: 700 var(--step-1)/1.3 var(--display); margin: 0; }
.sa-hi b { color: #B3243F; }
.sa-gift { border: 0; border-radius: 16px; background: #1F7A4D; color: #fff; padding: 18px 28px; display: grid; gap: 6px; justify-items: center; font: 700 var(--step-0)/1 var(--body); cursor: pointer; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2); touch-action: manipulation; }
.sa-gift:hover { background: #22895A; }
.sa-bow { font-size: 2.6rem; line-height: 1; }
.sa-match { margin: 4px 0; font: 800 clamp(2rem, 9vw, 2.8rem)/1.05 var(--display); color: #B3243F; overflow-wrap: anywhere; }
.sa-match.pop { animation: sa-pop 0.5s ease; }
@keyframes sa-pop { from { transform: scale(0.4) rotate(-6deg); opacity: 0; } 70% { transform: scale(1.08); } }
.sa-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--step-0); }
.sa-info b { color: #1F7A4D; }
.sa-note { margin: 0; font-style: italic; color: #4A3D6B; border-top: 1px dashed rgba(28, 15, 63, 0.2); padding-top: 10px; width: 100%; overflow-wrap: anywhere; }
.sa-card .btn { background: #1C0F3F; color: #fff; justify-content: center; }
.sa-card .btn-ghost { background: rgba(28, 15, 63, 0.08); color: #1C0F3F; }
.sa-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* link view: only the card */
.sa-reveal { display: grid; justify-items: center; gap: 14px; padding: 16px 0 6px; text-align: center; }
.sa-own { color: #FFE08F; font-size: var(--step--1); font-weight: 600; }
body.sa-link-view .crumbs, body.sa-link-view .p-hero { display: none; }
body.sa-link-view .santa { margin-top: 20px; min-height: min(560px, 75vh); align-content: center; }

@media (max-width: 760px) { .sa-cols { grid-template-columns: 1fr; } }
@media (max-width: 420px) {
  .sa-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .sa-pair .btn { grid-column: 1 / -1; justify-content: center; }
  .sa-details { grid-template-columns: 1fr; }
  .sa-room { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sa-match.pop { animation: none; } }