/* THE ROOM: The Field by day (the BLEND), from atmosphere.kavitasingh.today.
   Light, spacious, delightful. Only the builder's own chrome: slides keep their own colours (--s-*). */
:root {
  --bg: #f7f2e8;
  --deep: rgba(255, 252, 246, .82);
  --panel: rgba(255, 253, 249, .80);
  --panel-2: #fffdf9;
  --border: rgba(122, 96, 58, .16);
  --accent: #9c7330;
  --accent-lt: #b8893c;
  --accent-dim: rgba(156, 115, 48, .38);
  --on-accent: #2a1d08;
  --text: #2c2533;
  --muted: #7b7287;
  --purple: #6e5a8f;
  --silver: #8d8a96;
  --error: #b3392f;
  --done: #c7bfb2;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(90, 70, 40, .05), 0 12px 34px rgba(90, 70, 40, .08);
  --foil: linear-gradient(120deg, #b98a3e, #d9ae5f 30%, #9c7330 55%, #c99a52 80%, #b98a3e);
}
html { background: #f7f2e8; }
body {
  background:
    linear-gradient(rgba(250, 246, 238, .50), rgba(250, 246, 238, .66) 60%, rgba(250, 246, 238, .78)),
    url('/atmos/field-day-backdrop.jpg') center / cover no-repeat fixed,
    #f7f2e8;
  color: var(--text);
  font-size: 18px;
}
@media (max-width: 700px) {
  body { background: linear-gradient(rgba(250, 246, 238, .58), rgba(250, 246, 238, .78)), url('/atmos/field-day-916.jpg') center / cover no-repeat fixed, #f7f2e8; }
}
::selection { background: rgba(217, 174, 95, .35); }

/* the stage and the studio stay dark: you present in the night room */
#stage, #studio {
  --bg: #0f0e17; --panel: #1a1924; --panel-2: #232231; --deep: #0b0a12; --text: #e8e6f0; --muted: #8a87a3;
  --accent: #c9a96e; --accent-lt: #d4b87a; --accent-dim: #6b5d3f; --on-accent: #1a1310; --purple: #9d8fb8; --border: #2d2c3d;
  --radius: 10px; --radius-sm: 6px; color: var(--text);
}

/* leaves drifting at the edges of the room */
.field-leaves { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .55; }
#shell { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .field-leaves .drift { animation: fdrift 26s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
  .field-leaves .drift.b { animation-duration: 31s; animation-delay: -9s; }
  .field-leaves .drift.c { animation-duration: 23s; animation-delay: -15s; }
  @keyframes fdrift { from { transform: translateY(-12px) rotate(-1deg); } to { transform: translateY(14px) rotate(1.5deg); } }
  .brand-mark { display: inline-block; animation: twinkle 5s ease-in-out infinite; }
  @keyframes twinkle { 0%, 100% { opacity: .65; transform: scale(1) rotate(0); } 50% { opacity: 1; transform: scale(1.18) rotate(20deg); } }
  #main > * { animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* foil: gold that is drawn, not written */
.brand-name, .gate-card h1, .modal-tabs b, .meter-top h2, .five-head h2, .lib-hello b {
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
h1, .hs-h1 { color: var(--accent); }
.brand-mark { color: #c99a52; }

/* the gate: you arrive in the garden by day */
#gate { background: linear-gradient(rgba(250, 246, 238, .30), rgba(250, 246, 238, .55)), url('/atmos/field-day-backdrop.jpg') center / cover no-repeat, #f7f2e8 !important; }
.gate-card { background: rgba(255, 253, 249, .72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(156, 115, 48, .2); border-radius: 26px; padding: 44px 36px 38px; box-shadow: var(--shadow); max-width: 460px; }
.gate-card h1 { font-size: clamp(26px, 4.4vw, 38px); letter-spacing: .1em; font-weight: 600; }
.gate-mark { font-size: 30px; color: #c99a52; }
.gate-line { color: var(--muted); }
.gate-era { font-family: var(--font-mono); letter-spacing: .4em; text-transform: uppercase; font-size: 11px; color: var(--accent); margin: 0 0 8px; }
#gate-pass { background: #fffdf9; }

/* spacious shell */
#topbar { padding: 18px 36px; background: rgba(255, 252, 246, .72); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-bottom: 1px solid var(--border); }
.brand-name { font-size: 16px; letter-spacing: .2em; font-weight: 600; }
#library { width: 290px; padding: 32px 22px 40px; top: 62px; max-height: calc(100vh - 62px); border-right: 1px solid var(--border); background: rgba(255, 252, 246, .42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#main { padding: 40px 48px 72px; }
@media (max-width: 900px) { #main { padding: 28px 20px 56px; } #topbar { padding: 14px 18px; } }

/* surfaces: soft cream glass, gently lifted */
.five, .meter, .editor, .ed-tools, .ed-panel, .beat-card, .modal-card, .choice, .export-card, .meter-chip, .empty {
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.five, .meter, .editor, .ed-tools, .ed-panel, .modal-card { box-shadow: var(--shadow); }
.five { padding: 28px 28px 12px; }
.meter { padding: 24px 28px; margin-bottom: 30px; }
.editor { padding: 28px; margin-top: 32px; }
.ed-panel { padding: 20px 22px; }
.ed-tools { padding: 8px; gap: 6px; margin-bottom: 18px; }
.ed-stage { background: linear-gradient(160deg, #ebe2d2, #e2d7c4); border-color: rgba(122, 96, 58, .12); padding: 28px; box-shadow: inset 0 2px 14px rgba(90, 70, 40, .10); }
.modal-card { background: rgba(255, 253, 249, .96); padding: 34px 34px 28px; }
#modal { background: rgba(60, 48, 30, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pop { background: #fffdf9; box-shadow: 0 22px 60px rgba(90, 70, 40, .20); }
.deck-title { font-size: 30px; }
.deck-sub { margin-bottom: 30px; }
.steps { margin-bottom: 32px; gap: 10px; }
.step { padding: 12px 16px; }
.choice-row { gap: 14px; }
.choice { border-radius: var(--radius-sm); }
.choice:hover, .export-card:hover, .beat-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(90, 70, 40, .12); }
.choice, .export-card, .beat-card, .lib-item, button { transition: transform .25s ease, box-shadow .25s ease, border-color .2s, color .2s, background .2s; }
.choice.on { box-shadow: inset 0 0 0 1px var(--accent), 0 8px 24px rgba(156, 115, 48, .14); }
.thumb .frame { border-radius: 8px; box-shadow: 0 4px 14px rgba(90, 70, 40, .10); }
.thumb:hover .frame { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(90, 70, 40, .16); }
.thumb .frame { transition: transform .25s, box-shadow .25s, outline-color .2s; }
.thumb.on .frame { outline: 2px solid var(--accent); }
.thumb-vis, .thumb-dup { background: rgba(255, 253, 249, .94) !important; color: var(--accent) !important; border: 1px solid var(--border); }

/* labels: spaced, quiet, plum and gold */
.lib-label, .sec-label { color: var(--purple); letter-spacing: .3em; }

/* buttons */
button { background: rgba(255, 253, 249, .85); }
button.primary, .btn-primary {
  background: linear-gradient(120deg, #e3bb76, #c99a52 55%, #b8893c) !important; color: #2a1d08 !important; border: none !important;
  box-shadow: 0 8px 22px rgba(185, 137, 60, .28); font-weight: 500;
}
button.primary:hover, .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(185, 137, 60, .36); color: #2a1d08 !important; }
button:not(.primary):hover { background: #fffdf9; }
.step:hover, .step, .thumb, .lib-item { background: transparent; }

/* inputs */
input[type=text], input:not([type]), input[type=email], input[type=search], textarea, select { background: #fffdf9; border-color: rgba(122, 96, 58, .2); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(201, 154, 82, .14); }

/* the library: a quiet shelf of your decks */
.lib-hello { font-family: var(--font-body); font-style: italic; font-size: 19px; color: var(--muted); margin: 0 0 20px; line-height: 1.3; }
.lib-hello b { font-family: var(--font-display); font-style: normal; font-weight: 600; letter-spacing: .08em; font-size: 20px; display: block; }
.lib-new { margin-bottom: 12px; padding: 12px 16px; }
.lib-collab { width: 100%; margin-bottom: 8px; }
.lib-label { margin: 26px 0 10px; display: flex; align-items: center; gap: 10px; }
.lib-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.lib-row { position: relative; display: flex; align-items: stretch; border-radius: 14px; margin: 0 0 6px; transition: background .2s, box-shadow .2s, transform .2s; }
.lib-row:hover { background: rgba(255, 253, 249, .75); }
.lib-row.on { background: #fffdf9; box-shadow: 0 6px 18px rgba(90, 70, 40, .10); }
.lib-row.on::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: linear-gradient(#e3bb76, #b8893c); }
.lib-item { flex: 1; min-width: 0; border: none !important; padding: 12px 6px 12px 14px; margin: 0; font-size: 18px; border-radius: 14px; }
.lib-row.on .lib-item, .lib-item:hover { color: var(--text); background: transparent !important; }
.lib-item small { color: var(--muted); }
.lib-grip { cursor: grab; color: transparent; padding: 0 2px 0 6px; display: flex; align-items: center; font-size: 14px; user-select: none; letter-spacing: -2px; }
.lib-row:hover .lib-grip, .lib-row:focus-within .lib-grip { color: rgba(122, 96, 58, .5); }
.lib-pin { flex: none; align-self: flex-start; margin: 8px 6px 0 0; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: none; background: transparent !important; color: transparent; font-size: 16px; line-height: 1; }
.lib-row:hover .lib-pin, .lib-pin:focus-visible { color: rgba(122, 96, 58, .45); }
.lib-pin:hover { color: var(--accent) !important; transform: scale(1.15); }
.lib-pin.on { color: #c99a52 !important; }
.lib-row.dragging { opacity: .45; }
.lib-row.drop-before { box-shadow: inset 0 3px 0 #c99a52; }
.lib-row.drop-after { box-shadow: inset 0 -3px 0 #c99a52; }
.lib-tip { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); margin: 14px 4px 0; opacity: .8; }

.save-state.saved { color: var(--accent); }
#toast { background: #2c2533; color: #f7f2e8; }
.lib-row.on small.lib-stamp { color: var(--accent); }
@media (max-width: 900px) {
  #library { position: static; width: 100%; max-height: none; border-right: none; border-bottom: 1px solid var(--border); padding: 20px 16px; }
  .lib-grip, .lib-pin { color: rgba(122, 96, 58, .45); }
}
#stage button, #studio button, #stage button:not(.primary):hover, #studio button:not(.primary):hover { background: var(--panel-2); color: var(--text); }
#studio .rec-btn { background: #e0524a; color: #fff; }
#studio .rec-btn.on { background: #fff; color: #e0524a; }