/* ============================================================
   TIME UNTIL LAUNCH - a moment, and the countdown Discord keeps live
   Palette: deep aubergine ground · amethyst interaction ·
            antique gold for the numbers that matter
   Type:    Cinzel (ceremonial) · Spectral (reading) · Plex Mono (data)

   The token block and page furniture are shared with Triviagon and
   Dividendrum so the three read as one hand. Everything below the
   "countdown" divider is this tool's own.
   ============================================================ */

:root{
  --bg:#EDEAF2; --surface:#FBFAFD; --surface-2:#E4DFEE; --sunken:#E9E5F1;
  --ink:#1C1526; --ink-soft:#5F5673; --ink-faint:#6D6380;
  --line:#D3CBE0; --line-soft:#E2DCEC;
  --accent:#6D3FBF; --accent-2:#8B62D9; --accent-soft:#EDE4FB; --accent-ink:#FFFFFF;
  --gold:#8F6B18; --gold-2:#B8912F; --gold-soft:#F6EED9;
  --good:#2C7350; --good-bg:#DEEFE6; --bad:#A5364A; --bad-bg:#F8E1E5; --warn:#8E6415; --warn-bg:#F5EAD6;
  --glow:rgba(109,63,191,.10);
  --shadow-sm:0 1px 2px rgba(28,21,38,.06);
  --shadow:0 2px 4px rgba(28,21,38,.05), 0 12px 32px rgba(28,21,38,.10);
  --shadow-lg:0 4px 8px rgba(28,21,38,.06), 0 24px 60px rgba(28,21,38,.16);
  --display:"Cinzel",Georgia,serif;
  --body:"Spectral",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#120E1A; --surface:#1C1628; --surface-2:#261E36; --sunken:#171223;
    --ink:#EFE9F6; --ink-soft:#A79CBC; --ink-faint:#877C9C;
    --line:#332942; --line-soft:#2A2138;
    --accent:#B48CF7; --accent-2:#C9AAFF; --accent-soft:#291F44; --accent-ink:#150F22;
    --gold:#E2BA5F; --gold-2:#F0D28E; --gold-soft:#2E2413;
    --good:#5DC694; --good-bg:#14301F; --bad:#E7768A; --bad-bg:#2E1720; --warn:#E0B45C; --warn-bg:#2E2413;
    --glow:rgba(180,140,247,.13);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
    --shadow-lg:0 4px 8px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#120E1A; --surface:#1C1628; --surface-2:#261E36; --sunken:#171223;
  --ink:#EFE9F6; --ink-soft:#A79CBC; --ink-faint:#877C9C;
  --line:#332942; --line-soft:#2A2138;
  --accent:#B48CF7; --accent-2:#C9AAFF; --accent-soft:#291F44; --accent-ink:#150F22;
  --gold:#E2BA5F; --gold-2:#F0D28E; --gold-soft:#2E2413;
  --good:#5DC694; --good-bg:#14301F; --bad:#E7768A; --bad-bg:#2E1720; --warn:#E0B45C; --warn-bg:#2E2413;
  --glow:rgba(180,140,247,.13);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
  --shadow-lg:0 4px 8px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(130% 70% at 50% -8%, var(--glow) 0%, transparent 62%);
}
#app{max-width:41rem; margin:0 auto; padding:1.5rem 1.15rem 4.5rem; position:relative}
a{color:inherit}

/* ---------------- masthead ---------------- */
.masthead{text-align:center; padding:1.1rem 0 1rem; position:relative}
.crest{
  font-family:var(--display); font-weight:700; letter-spacing:.02em;
  font-size:clamp(1.25rem,5.6vw,2rem); line-height:1.12; margin:0; color:var(--ink); text-wrap:balance;
}
.crest a{text-decoration:none}
.crest .glyph{
  display:block; font-size:.62em; color:var(--gold); margin:0 auto .5rem;
  letter-spacing:.3em; text-indent:.3em; line-height:1;
}
.rule{display:flex; align-items:center; gap:.7rem; margin:.85rem auto 0; max-width:32rem; color:var(--line)}
.rule::before,.rule::after{content:""; flex:1; height:1px; background:currentColor}
.rule span{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap;
}
@media (max-width:34rem){
  .rule{max-width:none}
  .rule span{white-space:normal; text-align:center; text-wrap:balance}
}
.homebtn{
  position:absolute; top:.9rem; left:0; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink); text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:.45rem .85rem; line-height:1; display:inline-block; box-shadow:var(--shadow-sm);
}
.homebtn:hover{color:var(--gold); border-color:var(--gold)}
.homebtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.hdr-actions{position:absolute; top:.9rem; right:0; display:flex; align-items:center; gap:.35rem}
.themebtn, .patbtn{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:.4rem .6rem; cursor:pointer; line-height:1; min-width:2rem; text-align:center;
  box-shadow:var(--shadow-sm);
}
.themebtn:hover, .patbtn:hover{color:var(--gold); border-color:var(--gold)}
.themebtn:focus-visible, .patbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------------- controls ---------------- */
input, select{
  font-family:var(--body); font-size:1.02rem; padding:.68rem .85rem;
  border:1.5px solid var(--line); border-radius:4px; background:var(--surface); color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease; min-width:0; width:100%;
}
input::placeholder{color:var(--ink-faint); font-style:italic}
input:focus, select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
input[type=date], input[type=time]{font-family:var(--mono); font-size:.95rem}
button{
  font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; border-radius:4px; padding:.72rem 1.1rem; cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .14s ease, filter .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); box-shadow:0 3px 12px var(--glow)}
.btn-primary:hover:not(:disabled){filter:brightness(1.1)}
.btn-ghost{background:transparent; color:var(--ink-faint); border-color:var(--line)}
.btn-ghost:hover:not(:disabled){color:var(--ink); border-color:var(--ink-soft)}
.btn-sm{font-size:.58rem; padding:.44rem .7rem; letter-spacing:.13em}
button:disabled{cursor:default; opacity:.45}

.feedback{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; line-height:1.65;
  margin-top:.8rem; padding:.6rem .85rem; border-radius:4px; border-left:3px solid currentColor;
}
.feedback.bad{background:var(--bad-bg); color:var(--bad)}
.feedback.warn{background:var(--warn-bg); color:var(--warn)}
.feedback.good{background:var(--good-bg); color:var(--good)}

footer{
  margin-top:3.5rem; padding-top:1.3rem; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:.6rem; color:var(--ink-faint);
  letter-spacing:.07em; text-align:center; line-height:1.9;
}
/* The shared trust-page row sits under the note, not off on its own. */
footer .tg-sitelinks{margin-top:.9rem; padding-top:0}
footer .legal{
  color:var(--ink-faint); opacity:.85; font-size:.58rem; letter-spacing:.06em;
  max-width:32rem; margin:.4rem auto 0; line-height:1.75;
}

/* ---------------- section headings ---------------- */
.sect{display:flex; align-items:center; gap:.7rem; margin:2.3rem 0 .85rem; color:var(--line)}
.sect h2{
  font-family:var(--display); font-size:.68rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); margin:0; white-space:nowrap;
}
.sect::after{content:""; flex:1; height:1px; background:currentColor}
.sect .hint{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap; flex:0 0 auto;
}

/* ============================================================
   THE COUNTDOWN ITSELF
   ============================================================ */

/* ---------------- the picker ---------------- */
.composer{
  background:var(--surface); border:1px solid var(--line); border-radius:5px;
  padding:1.1rem 1.2rem 1.15rem; box-shadow:var(--shadow); position:relative;
}
.composer::before{content:""; position:absolute; inset:5px; border-radius:3px; border:1px solid var(--line-soft); pointer-events:none}
.field{margin-bottom:.7rem; position:relative}
.field:last-of-type{margin-bottom:0}
.field label{
  display:block; font-family:var(--mono); font-size:.55rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:.3rem;
}
/* Date and time sit together because they are one answer, and they are the
   only pair narrow enough to share a line on a phone. */
.when{display:flex; gap:.55rem}
.when .field{flex:1 1 0; margin-bottom:0}
.quick{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.85rem}
.quick button{
  font-family:var(--mono); font-weight:500; font-size:.58rem; letter-spacing:.08em;
  text-transform:none; padding:.36rem .6rem; border-radius:999px;
  background:var(--sunken); color:var(--ink-faint); border:1px solid var(--line);
}
.quick button:hover{color:var(--accent); border-color:var(--accent)}

/* ---------------- the clock ----------------
   Four cells rather than one string, because the eye reads a countdown by
   the unit that is changing and a run-together 03:14:22:07 makes you count
   colons to find it. */
.clockwrap{text-align:center; padding-top:.3rem}
.clock{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem;
  max-width:30rem; margin:0 auto;
}
.cell{
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:.85rem .3rem .7rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.cell .n{
  font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,8vw,2.5rem);
  line-height:1; color:var(--gold); font-variant-numeric:tabular-nums; display:block;
}
.cell .u{
  font-family:var(--mono); font-size:.5rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); display:block; margin-top:.4rem;
}
/* The seconds cell is the one that moves, so it is the one that gets the
   accent - the others would only flicker for no reason. */
.cell.sec .n{color:var(--accent)}
.clock.past .cell .n{color:var(--ink-faint)}
.clock.past .cell.sec .n{color:var(--ink-faint)}

.verdictline{
  font-family:var(--body); font-style:italic; font-size:1.05rem; color:var(--ink-soft);
  margin:1.1rem 0 0; text-wrap:balance;
}
.absline{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; color:var(--ink-faint);
  margin:.5rem 0 0; line-height:1.9;
}
.absline b{color:var(--ink-soft); font-weight:600}

/* ---------------- the snippets ----------------
   A code block and its rendering, stacked, because the whole question a
   visitor has is "what will this look like when I paste it" and the answer
   should not be one click away. */
.snip{
  background:var(--surface); border:1px solid var(--line); border-radius:5px;
  padding:.85rem .95rem .9rem; margin-bottom:.6rem; box-shadow:var(--shadow-sm);
}
.snip.lead{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), var(--shadow-sm)}
.snip .top{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; margin-bottom:.5rem}
.snip .name{
  font-family:var(--display); font-size:.6rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}
.snip.lead .name{color:var(--accent)}
.snip .why{
  font-family:var(--mono); font-size:.53rem; letter-spacing:.05em; color:var(--ink-faint);
  text-align:right; flex:1 1 auto; min-width:0;
}
.snip .code{
  display:flex; align-items:center; gap:.5rem;
  background:var(--sunken); border:1px dashed var(--line); border-radius:4px;
  padding:.5rem .6rem;
}
.snip .code code{
  font-family:var(--mono); font-size:.72rem; color:var(--ink); flex:1 1 auto;
  overflow-x:auto; white-space:nowrap; letter-spacing:.01em;
}
.snip .code button{flex:0 0 auto}
/* The preview borrows Discord's own colouring rather than the page's, since
   the point of it is to show what the message will look like there. */
.snip .prev{
  margin-top:.5rem; padding:.5rem .65rem; border-radius:4px;
  background:#313338; color:#dbdee1;
  font-family:"gg sans","Noto Sans",Helvetica,Arial,sans-serif; font-size:.92rem; line-height:1.4;
}
.snip .prev .stamp{background:#3f4147; border-radius:3px; padding:0 2px}
.snip .prev b{font-weight:700; color:#f2f3f5}
.snip .prevlabel{
  font-family:var(--mono); font-size:.5rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); margin:.55rem 0 .25rem;
}

/* ---------------- share ---------------- */
.sharerow{
  display:flex; align-items:center; gap:.5rem;
  background:var(--sunken); border:1px dashed var(--line); border-radius:5px;
  padding:.55rem .7rem;
}
.sharerow input{
  flex:1 1 auto; font-family:var(--mono); font-size:.66rem; padding:.3rem 0;
  border:0; background:transparent; color:var(--ink-soft);
}
.sharerow input:focus{box-shadow:none}

/* ---------------- notes ---------------- */
.prose{
  background:var(--surface); border:1px solid var(--line); border-radius:5px;
  padding:1.15rem 1.3rem 1.2rem; box-shadow:var(--shadow); position:relative;
}
.prose::before{content:""; position:absolute; inset:5px; border-radius:3px; border:1px solid var(--line-soft); pointer-events:none}
.prose p{margin:0 0 .8rem; color:var(--ink-soft); font-size:.94rem; line-height:1.7}
.prose p:last-child{margin-bottom:0}
.prose code{
  font-family:var(--mono); font-size:.82em; background:var(--sunken); color:var(--ink);
  padding:.1em .35em; border-radius:3px; border:1px solid var(--line-soft);
}
.prose b{color:var(--ink)}

/* ---------------- narrow ---------------- */
@media (max-width:30rem){
  #app{padding-left:.85rem; padding-right:.85rem}
  .when{flex-wrap:wrap}
  .when .field{flex:1 1 100%; margin-bottom:.7rem}
  .when .field:last-child{margin-bottom:0}
  .clock{gap:.35rem}
  .cell{padding:.7rem .2rem .6rem}
  .cell .u{font-size:.44rem; letter-spacing:.1em}
  .snip .why{display:none}
  .prose{padding:1rem 1.05rem}
}

/* ---------------- motion ---------------- */
@media (prefers-reduced-motion: no-preference){
  .panel-in{animation:riseIn .4s cubic-bezier(.22,.72,.28,1) both}
  @keyframes riseIn{from{opacity:0; transform:translateY(12px) scale(.99)} to{opacity:1; transform:none}}
  .shake{animation:shakeX .34s cubic-bezier(.36,.07,.19,.97)}
  @keyframes shakeX{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
}