/* Valar — Zcash testnet faucet
   The valargroup.dev language: dark vellum, cream ink, parchment hairlines, gold only for
   activation (hover / focus / active) and the V mark, lapis for data points and arrows.
   Tokens mirror valargroup/website src/styles.css. */

:root{
  --vellum:#17150f;
  --ink:#efe5d0;
  --gold:#c6a15b;
  --lapis:#3a95dc;
  --vermilion:#d57b63;
  --parchment-rgb:188,169,138;
  --parchment-85:rgba(var(--parchment-rgb),.85);
  --parchment-78:rgba(var(--parchment-rgb),.78);
  --parchment-62:rgba(var(--parchment-rgb),.62);
  --parchment-42:rgba(var(--parchment-rgb),.42);
  --parchment-33:rgba(var(--parchment-rgb),.33);
  --parchment-22:rgba(var(--parchment-rgb),.22);

  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;

  /* Page frame, as on valargroup.dev: outer margin line, sidebar seam, top rule. */
  --frame:48px;
  --seam:160px;
  --top:64px;
  /* Content: a right-aligned label gutter plus one content column. */
  --gutter:168px;
  --gap:40px;
  --content:720px;
  --radius:4px;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--vellum);-webkit-text-size-adjust:100%}
body{
  margin:0; min-width:320px; min-height:100vh; background:var(--vellum); color:var(--parchment-78);
  font-family:var(--sans); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
h1,h2,p,dl,dd{margin:0}
button{font:inherit}
code{font-family:var(--mono)}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

.grain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
.frame{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(var(--parchment-22),var(--parchment-22)) var(--frame) 0/1px 100% no-repeat,
    linear-gradient(var(--parchment-22),var(--parchment-22)) calc(100% - var(--frame)) 0/1px 100% no-repeat,
    linear-gradient(var(--parchment-22),var(--parchment-22)) var(--seam) 0/1px 100% no-repeat,
    linear-gradient(var(--parchment-22),var(--parchment-22)) 0 var(--top)/100% 1px no-repeat}

/* ---------- rail (sidebar) ---------- */
.rail{position:fixed;top:0;left:var(--frame);width:calc(var(--seam) - var(--frame));height:100vh;z-index:2;
  display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--top) + 64px)}
.mark img{display:block;width:46px;height:46px}
.rail-nav{margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-left:20px;width:100%}
.rail-nav a{position:relative;font-size:15px;color:var(--parchment-85);transition:color .16s}
.rail-nav a:hover{color:var(--gold)}
.rail-nav a.active{color:var(--ink)}
.rail-nav a.active::before{content:"";position:absolute;left:-20px;top:2px;bottom:2px;width:1px;background:var(--lapis)}
.arrow{font-family:var(--mono);color:var(--lapis);margin-left:5px;font-size:.85em}

/* ---------- content grid ---------- */
.page{position:relative;z-index:1;margin-left:var(--seam);margin-right:var(--frame);
  padding:calc(var(--top) + 64px) 40px 72px}
.row{display:grid;grid-template-columns:var(--gutter) minmax(0,var(--content));column-gap:var(--gap);
  justify-content:center;margin-bottom:64px}
.gutter{grid-column:1;margin:0;padding-top:6px;text-align:right;font-family:var(--mono);font-weight:400;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--parchment-62)}
.label-lapis,.kicker{color:var(--lapis)}
.body{grid-column:2;min-width:0}

/* ---------- intro ---------- */
.intro .gutter{padding-top:22px}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,4.5vw,58px);line-height:1.05;
  letter-spacing:-.012em;color:var(--ink);margin-bottom:24px}
.lede{font-size:17px;line-height:1.5;color:var(--parchment-85);max-width:60ch}
.mono-inline{font-family:var(--mono);font-size:.92em;color:var(--ink)}

/* ---------- claim panel ---------- */
.panel{border:1px solid var(--lapis);border-radius:var(--radius);padding:28px 32px 30px;
  background:linear-gradient(180deg,rgba(58,149,220,.035),transparent 55%)}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:26px}
.panel-title{font-family:var(--serif);font-weight:300;font-size:44px;line-height:1;color:var(--ink)}
.unit{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lapis);margin-left:8px;vertical-align:.18em}
.panel-title .unit{font-size:12px;vertical-align:.35em}

.state{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--parchment-62);white-space:nowrap}
.state::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--parchment-42)}
.state[data-tone="ok"]{color:var(--lapis)}
.state[data-tone="ok"]::before{background:var(--lapis);box-shadow:0 0 8px rgba(58,149,220,.8)}
.state[data-tone="warn"]{color:var(--gold)}
.state[data-tone="warn"]::before{background:var(--gold)}
.state[data-tone="bad"]{color:var(--vermilion)}
.state[data-tone="bad"]::before{background:var(--vermilion)}

.field-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--parchment-62);margin-bottom:10px}
.field{display:flex;gap:10px}
.field input{flex:1;min-width:0;height:50px;padding:0 16px;background:rgba(16,14,10,.55);border:1px solid var(--parchment-33);
  border-radius:3px;color:var(--ink);font-family:var(--mono);font-size:14px;text-overflow:ellipsis;transition:border-color .16s}
.field input::placeholder{color:var(--parchment-42)}
.field input:focus{outline:none;border-color:var(--gold)}
.btn-primary{height:50px;padding:0 22px;border:1px solid var(--ink);border-radius:3px;background:var(--ink);color:var(--vellum);
  font-family:var(--sans);font-weight:500;font-size:15px;cursor:pointer;white-space:nowrap;
  transition:background .16s,border-color .16s,color .16s}
.btn-primary:hover:not(:disabled),.btn-primary:focus-visible{background:var(--gold);border-color:var(--gold)}
.btn-primary:disabled{background:transparent;border-color:var(--parchment-33);color:var(--parchment-42);cursor:not-allowed}
.btn-primary.busy{opacity:.7;cursor:progress}
.hint{margin-top:12px;font-size:13px;color:var(--parchment-42)}

.btn-ghost{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--parchment-33);border-radius:3px;
  background:transparent;color:var(--parchment-85);font-family:var(--mono);font-size:12px;cursor:pointer;white-space:nowrap;
  transition:border-color .16s,color .16s}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-ghost.done{border-color:var(--lapis);color:var(--lapis)}

.alert{margin-top:18px;padding:12px 14px;border-left:2px solid var(--vermilion);background:rgba(213,123,99,.07);
  color:#e6b5a6;font-size:14px}
.alert[data-tone="warn"]{border-left-color:var(--gold);background:rgba(198,161,91,.07);color:var(--parchment-85)}
.alert strong{color:var(--ink);font-weight:500}

/* ---------- claim progress ---------- */
.result{margin-top:24px;padding-top:22px;border-top:1px solid var(--parchment-22)}
.steps{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.steps li{display:flex;align-items:center;gap:9px;flex:1;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--parchment-42)}
.steps li:last-child{flex:none}
.steps li:not(:last-child)::after{content:"";flex:1;height:0;border-top:1px dotted var(--parchment-33);margin:0 12px}
.steps .dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--parchment-42);flex:none}
.steps li.done{color:var(--parchment-78)}
.steps li.done .dot{background:var(--parchment-78);border-color:var(--parchment-78)}
.steps li.done:not(:last-child)::after{border-top-color:var(--lapis)}
.steps li.active{color:var(--ink)}
.steps li.active .dot{border-color:var(--lapis);background:var(--lapis)}
.steps li.ok{color:var(--lapis)}
.steps li.ok .dot{background:var(--lapis);border-color:var(--lapis);box-shadow:0 0 8px rgba(58,149,220,.7)}
.result-msg{margin-top:16px;font-size:15px;color:var(--ink)}
.tx{margin-top:14px;padding:14px 16px;border:1px solid var(--parchment-22);border-radius:3px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center}
.tx-label{grid-column:1/-1;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--parchment-62)}
.tx-id{font-size:13px;color:var(--ink);word-break:break-all}
.tx-actions{display:flex;gap:8px}
.tx-broadcast{grid-column:1/-1;font-size:13px;color:var(--parchment-78)}
.tx-broadcast::before{content:"● ";color:var(--lapis)}

/* ---------- ledger ---------- */
/* The two wide figures (balance, height) get more room than the two short counts. */
.ledger{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,.85fr);border-top:1px solid var(--parchment-33);
  border-bottom:1px solid var(--parchment-33)}
.cell{padding:18px 16px 20px;min-width:0}
.cell + .cell{border-left:1px solid var(--parchment-22)}
.cell:first-child{padding-left:0}
.cell dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--parchment-62)}
.cell .figure{margin-top:12px;font-family:var(--serif);font-weight:300;font-size:31px;line-height:1.05;color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell .figure .unit{font-size:10px;margin-left:6px}
.cell .note{margin-top:8px;font-size:12.5px;color:var(--parchment-42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- recent payouts ---------- */
.recent{list-style:none;margin:0;padding:0;border-top:1px solid var(--parchment-33)}
.recent li{display:grid;grid-template-columns:minmax(0,1fr) auto 7ch;gap:20px;align-items:baseline;padding:13px 0;
  border-bottom:1px solid var(--parchment-22)}
.recent li.empty{display:block;color:var(--parchment-42);font-size:14px}
.recent .r-addr{font-family:var(--mono);font-size:13px;color:var(--parchment-85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent a.r-addr{color:var(--ink)}
.recent a.r-addr:hover{color:var(--gold)}
.recent .r-amount{font-family:var(--serif);font-weight:300;font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums}
.recent .r-amount .unit{font-size:10px;margin-left:5px}
.recent .r-time{font-family:var(--mono);font-size:12px;color:var(--parchment-42);text-align:right}
.recent-count{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--parchment-42)}

/* ---------- give back ---------- */
.give-text{font-size:15px;color:var(--parchment-85);margin-bottom:14px}
.addr-row{display:flex;gap:12px;align-items:flex-start}
.addr{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--parchment-22);border-radius:3px;font-size:12px;line-height:1.55;
  color:var(--parchment-85);word-break:break-all}
.addr-row .btn-ghost{margin-top:6px}

/* ---------- footer ---------- */
.foot{position:relative;z-index:1;margin-left:var(--frame);margin-right:var(--frame);padding:22px 0 40px;
  border-top:1px solid var(--parchment-22);display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wordmark{font-family:var(--serif);font-weight:300;font-size:30px;letter-spacing:.12em;color:var(--parchment-62);line-height:1}
.foot-meta{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--parchment-42);padding-right:4px}
.foot-meta a{color:var(--parchment-62)}
.foot-meta a:hover{color:var(--gold)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference){
  .intro .body > *,.panel{opacity:0;transform:translateY(10px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .lede{animation-delay:.06s}
  .panel{animation-delay:.12s}
  .steps li.active .dot{animation:pulse 1.4s ease-in-out infinite}
}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(58,149,220,.12)}}

/* ---------- responsive ---------- */
/* Narrower desktops: the label gutter moves above each section's content. */
@media (max-width:1180px){
  :root{--gutter:0px;--gap:0px}
  .row{grid-template-columns:minmax(0,var(--content))}
  .gutter{grid-column:1;text-align:left;padding:0 0 12px}
  .intro .gutter{padding:0 0 14px}
  .body{grid-column:1}
}
/* Phones and small tablets: the rail becomes a top bar; the frame tightens to 16px. */
@media (max-width:760px){
  :root{--frame:16px;--seam:16px;--top:60px}
  .frame{background:
    linear-gradient(var(--parchment-22),var(--parchment-22)) var(--frame) 0/1px 100% no-repeat,
    linear-gradient(var(--parchment-22),var(--parchment-22)) calc(100% - var(--frame)) 0/1px 100% no-repeat,
    linear-gradient(var(--parchment-22),var(--parchment-22)) 0 var(--top)/100% 1px no-repeat}
  .rail{position:absolute;left:var(--frame);right:var(--frame);width:auto;height:var(--top);flex-direction:row;
    align-items:center;justify-content:space-between;padding:0 14px}
  .mark img{width:34px;height:34px}
  .rail-nav{margin:0;flex-direction:row;gap:16px;width:auto;padding:0}
  .rail-nav a{font-size:14px}
  .rail-nav a.active{display:none}
  .page{margin:0 var(--frame);padding:calc(var(--top) + 32px) 18px 56px}
  .row{margin-bottom:44px}
  h1{font-size:40px;margin-bottom:18px}
  .lede{font-size:16px}
  .panel{padding:22px 18px 24px}
  .panel-title{font-size:38px}
  .field{flex-direction:column}
  /* 16px keeps iOS from zooming the page when the field is focused. */
  .field input{flex:none;width:100%;font-size:16px}
  .btn-primary{width:100%}
  .steps li{letter-spacing:.06em}
  .steps li:not(:last-child)::after{margin:0 8px}
  .ledger{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cell{padding:16px 14px 18px}
  .cell:nth-child(odd){padding-left:0;border-left:none}
  .cell:nth-child(n+3){border-top:1px solid var(--parchment-22)}
  .cell .figure{font-size:28px}
  .tx{grid-template-columns:minmax(0,1fr)}
  .recent li{grid-template-columns:minmax(0,1fr) auto}
  .recent .r-time{display:none}
  .addr-row{flex-direction:column}
  .addr-row .btn-ghost{margin-top:0}
  .foot{margin:0 var(--frame);padding:18px 14px 32px}
  .wordmark{font-size:24px}
}