/* The Jar — styles for index.html. Loaded with a plain <link>, no build step. */

:root{
  --night: #0A0A0C;
  --night-2: #151517;
  --amber: #E4A94A;
  --paper: #F6F1E4;
  --rose: #D98A99;
  --line: rgba(246,241,228,0.10);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(228,169,74,0.07), transparent 60%),
    var(--night);
  color: var(--paper);
  font-family:'Work Sans', sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow-x:hidden;
  position:relative;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

header{ width:100%; max-width:640px; padding: 56px 24px 8px; text-align:center; }
h1{ font-family:'Roboto Slab', serif; font-weight:400; font-size: clamp(30px, 7vw, 46px); margin: 14px 0 6px; line-height:1.15; letter-spacing:-0.01em; }
.subtitle{ font-size:14px; font-weight:300; color: rgba(246,241,228,0.5); max-width:380px; margin: 0 auto; letter-spacing:0.01em; white-space: pre-wrap; }
.countdown-card{
  margin: 26px auto 0; width:fit-content; display:flex; padding: 22px 28px; border-radius:20px;
  background: rgba(246,241,228,0.045); border:1px solid var(--line);
}
.countdown-wrap{ display:flex; flex-direction:row; align-items:center; gap:16px; }
.countdown-meta{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.flip-clock{ display:flex; gap:8px; }
.flip-card{
  position:relative; width:50px; height:68px; border-radius:8px;
  background: var(--paper); box-shadow: 0 10px 24px rgba(0,0,0,0.4);
  overflow:hidden;
}
.flip-card-half{
  position:absolute; left:0; right:0; height:50%; overflow:hidden;
  display:flex; justify-content:center; background: var(--paper);
}
.flip-card-half.top{ top:0; align-items:flex-end; border-radius:8px 8px 0 0; background: linear-gradient(to bottom, rgba(255,255,255,0.06), transparent); }
.flip-card-half.bottom{ bottom:0; align-items:flex-start; border-radius:0 0 8px 8px; background: linear-gradient(to top, rgba(0,0,0,0.08), transparent); }
.flip-card-half span{
  font-family:'Roboto Slab', serif; font-weight:600; font-size:40px; line-height:1;
  color:#2A2318; transform:translateY(50%);
}
.flip-card-half.top span{ transform:translateY(50%); }
.flip-card-half.bottom span{ transform:translateY(-50%); }
.flip-card-seam{ position:absolute; left:0; right:0; top:50%; height:2px; background: rgba(10,10,12,0.18); transform:translateY(-50%); z-index:1; }
.flip-unit-label{
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; color: rgba(246,241,228,0.4); text-align:left; margin-top:0;
}
.countdown-caption{
  font-family:'JetBrains Mono', monospace; font-size:12px; color: rgba(246,241,228,0.55);
  letter-spacing:0.04em; display:flex; align-items:center; justify-content:flex-start; gap:8px; text-align:left;
}

.view-tabs{
  display:inline-flex; gap:2px; margin: 28px auto 4px; padding:4px;
  border-radius:999px; background: rgba(246,241,228,0.03); border:1px solid var(--line);
}
.view-tab{
  background: transparent; border:none; color: rgba(246,241,228,0.55);
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  padding: 8px 18px; border-radius: 999px; cursor:pointer; transition: background 0.2s, color 0.2s;
}
.view-tab.active{ background: var(--paper); color: var(--night); }
.view-tab:focus-visible{ outline: 2px solid var(--amber); outline-offset:2px; }

.view{ display:none; width:100%; align-items:center; flex-direction:column; }
.view.active{ display:flex; }

.jar-wrap{ position:relative; width:min(78vw, 320px); margin: 18px auto 6px; }
svg#jarSvg{ width:100%; height:auto; display:block; }
.dot{ cursor:pointer; transition: r 0.2s ease, opacity 0.2s ease; fill: var(--amber); animation: pulse 2.6s ease-in-out infinite; }
.dot:focus-visible{ outline: 2px solid var(--amber); outline-offset: 2px; }
@keyframes pulse{ 0%,100%{ filter: drop-shadow(0 0 2px var(--amber)); } 50%{ filter: drop-shadow(0 0 7px var(--amber)); } }
.dot-travel{ fill: var(--amber); filter: drop-shadow(0 0 4px var(--amber)); transform-box: fill-box; transform-origin: center; }
.dot-travel.fly{ animation: flyOut 0.55s cubic-bezier(.25,.6,.3,1) forwards; }
@keyframes flyOut{
  0%{ transform: translate(0,0) scale(1); opacity:1; }
  55%{ transform: translate(0,-150px) scale(2.4); opacity:1; }
  100%{ transform: translate(0,-210px) scale(2.8); opacity:0; }
}

footer{ margin: 8px 0 40px; text-align:center; font-size:12px; color: rgba(246,241,228,0.35); padding: 0 20px; }

.prev-wrap{ width: min(90vw, 440px); margin: 18px auto 0; display:flex; flex-direction:column; gap:10px; }
.prev-item{
  background: transparent; border:1px solid var(--line); border-radius:12px;
  padding: 16px 18px; text-align:left; cursor:pointer; color: var(--paper); font-family:'Work Sans', sans-serif;
  transition: background 0.2s, border-color 0.2s;
}
.prev-item:hover{ background: rgba(246,241,228,0.04); border-color: rgba(246,241,228,0.2); }
.prev-item:focus-visible{ outline: 2px solid var(--amber); }
.prev-item .prev-snip{
  font-family:'Fraunces', serif; font-size:14px; color: rgba(246,241,228,0.8);
  white-space: nowrap; overflow:hidden; text-overflow: ellipsis; display:block;
}
.prev-empty{ color: rgba(246,241,228,0.35); font-size:13px; text-align:center; padding: 20px; }
.load-error{ color: var(--rose); font-size:13px; text-align:center; padding: 20px; max-width:320px; }

.jar-card{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.jar-card-toggle{
  display:flex; align-items:center; gap:12px; width:100%; background:transparent; border:none;
  padding: 12px 14px; cursor:pointer; color: var(--paper); font-family:'Work Sans', sans-serif; text-align:left;
  transition: background 0.2s;
}
.jar-card-toggle:hover{ background: rgba(246,241,228,0.04); }
.jar-card-toggle:focus-visible{ outline: 2px solid var(--amber); }
.jar-mini-icon{ width:28px; height:36px; flex-shrink:0; display:block; }
.jar-mini-icon path:first-child{ fill: rgba(246,241,228,0.05); stroke: rgba(246,241,228,0.28); stroke-width:2; }
.jar-card.is-past .jar-mini-icon path:first-child{ stroke: rgba(246,241,228,0.16); }
.jar-card-meta{ flex:1; min-width:0; }
.jar-card-label{ font-family:'Fraunces', serif; font-size:15px; color: rgba(246,241,228,0.85); }
.jar-card.is-past .jar-card-label{ color: rgba(246,241,228,0.5); }
.jar-card-count{ font-family:'JetBrains Mono', monospace; font-size:11px; color: rgba(246,241,228,0.4); margin-top:2px; }
.jar-card-chevron{ flex-shrink:0; color: rgba(246,241,228,0.4); transition: transform 0.2s; }
.jar-card.expanded .jar-card-chevron{ transform: rotate(180deg); }
.jar-card-body{ display:none; flex-direction:column; gap:8px; padding: 0 14px 14px; }
.jar-card.expanded .jar-card-body{ display:flex; }
.jar-card-body .prev-item{ padding:12px 14px; }
.jar-card-body .prev-item .prev-snip{ color: rgba(246,241,228,0.65); }

/* Visible by default so no jar content can paint before the passphrase check. */
.gate{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(228,169,74,0.07), transparent 60%),
    var(--night);
}
.gate.gate-hidden{ display:none; }
.gate-card{
  width:100%; max-width:360px; padding: 32px 28px; border-radius:20px; text-align:center;
  background: rgba(246,241,228,0.045); border:1px solid var(--line);
}
.gate-title{ font-family:'Roboto Slab', serif; font-size:30px; margin-bottom:10px; }
.gate-copy{ font-size:14px; font-weight:300; color: rgba(246,241,228,0.5); margin: 0 0 22px; line-height:1.5; }
.gate-input{
  width:100%; padding: 12px 14px; border-radius:10px; font-family:'Work Sans', sans-serif; font-size:15px;
  background: var(--night-2); border:1px solid var(--line); color: var(--paper); margin-bottom:12px;
}
.gate-input::placeholder{ color: rgba(246,241,228,0.3); }
.gate-input:focus{ outline:none; border-color: rgba(228,169,74,0.6); }
.gate-submit{
  width:100%; padding: 12px; border-radius:10px; border:none; cursor:pointer;
  background: var(--amber); color: var(--night); font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase; transition: opacity 0.2s;
}
.gate-submit:focus-visible{ outline: 2px solid var(--paper); outline-offset:2px; }
.gate-input:disabled, .gate-submit:disabled{ opacity:0.45; cursor:default; }
.gate-error{ min-height:18px; margin-top:12px; font-size:12px; color: var(--rose); }

.overlay{
  position:fixed; inset:0; background: rgba(0,0,0,0.78); display:none;
  align-items:center; justify-content:center; z-index:50; padding:20px;
}
.overlay.show{ display:flex; }
.note-paper{
  background: var(--paper); color:#2A2318; max-width: 420px; width:100%; padding: 40px 34px;
  border-radius: 8px; box-shadow: 0 30px 90px rgba(0,0,0,0.55); position:relative;
  transform: scale(0.85) rotate(-1deg); opacity:0; animation: unfold 0.45s cubic-bezier(.2,.9,.3,1.1) forwards;
}
@keyframes unfold{ to{ transform: scale(1) rotate(0deg); opacity:1; } }
.note-text{ font-family:'Fraunces', serif; font-size: 19px; line-height:1.6; white-space: pre-wrap; }
.note-close{ position:absolute; top:12px; right:14px; background:none; border:none; font-size:18px; cursor:pointer; color:#8a7550; }