/* ============================================================
   CodePass — buying a key, finding a key, and the policies.

   These pages load styles.css first and this file on top. Every
   colour, radius and typeface here comes from there: same
   graphite chassis, same porcelain keycaps, same one aqua
   backlight. What is added below is only what a checkout needs
   and a landing page does not.

   The idea: a pass is a key you press. The three prices are
   real keycaps, built from the same .keycap the landing page
   uses for Download, so buying a pass is the same gesture as
   the product itself — press, and it travels.
   ============================================================ */

:root{
  /* The one colour the landing page never needed: something has
     gone wrong. Kept close to the app's own halt red. */
  --halt:#B3372B;
  --halt-wash:rgba(179,55,43,.08);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --halt:#E2897E;
    --halt-wash:rgba(226,137,126,.10);
  }
}

/* A task page is read straight down and needs no second column,
   so it is set much narrower than the landing page's shell. */
.page{max-width:720px}

/* The landing page gives every <section> a rule and a chapter's
   worth of padding, which is right when sections are chapters
   and wrong here, where they are steps in one short task. The
   rhythm on these pages is set deliberately, below. */
.page section{border-top:0;padding-block:0}

.head{padding-block:clamp(26px,5vw,42px) 0}
.head h1{font-size:clamp(1.85rem,1.2rem + 1.9vw,2.5rem);line-height:1.08}
.head .lede{margin-top:16px;font-size:1.0625rem;color:var(--legend-soft)}

/* ---------- the passes ---------- */

/* Three keys on the plate. They size themselves to the row and
   drop to one column on a phone. */
.passes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
  margin-top:30px;
}

/* .keycap carries the edge and the travel; this makes one fill
   its grid cell and behave as a button rather than a link. */
.pass{
  display:block;width:100%;
  padding:0 0 5px;border:0;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
}
/* The legend sits low on the cap, where it is printed on a real
   one, rather than floating in the middle of a card. */
.pass .keycap__face{
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  min-height:96px;
  padding:20px 20px 17px;
}
.pass__price{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,1.1rem + 1.3vw,1.95rem);
  font-weight:500;letter-spacing:-.02em;line-height:1;
}
.pass__days{font-size:.875rem;font-weight:400;opacity:.72}
.pass[disabled]{cursor:progress}
.pass[disabled] .keycap__face{opacity:.6}

.passes-note{
  margin-top:16px;font-size:.875rem;color:var(--legend-faint);
  max-width:52ch;
}

/* ---------- what you get back ---------- */

/* The key lands on the same recessed surface the landing page
   types its demo onto: this is a machine value, sitting in the
   case rather than on it. */
.keyout{
  margin-top:18px;padding:20px 22px;
  background:var(--well);border-radius:var(--r-well);
  box-shadow:inset 0 1px 3px var(--well-shadow);
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.2rem,.95rem + 1.3vw,1.7rem);
  font-weight:500;letter-spacing:.06em;color:var(--legend);
  overflow-wrap:anywhere;user-select:all;
}

/* The result of paying, set off from the passes above it. */
#done{margin-top:38px}

.status{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;
  font-size:.9375rem;color:var(--signal-text);
}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:20px}

/* The quieter of two actions. The keycap stays the thing you
   press; this is the thing you can also do. */
.btn{
  padding:13px 20px;
  border:1px solid var(--rule);border-radius:var(--r-key);
  background:transparent;color:var(--legend);
  font:inherit;font-size:.9375rem;font-weight:500;
  cursor:pointer;transition:background .16s ease,border-color .16s ease;
}
.btn:hover{background:var(--hover);border-color:var(--legend-faint)}

/* ---------- things the reader must not miss ---------- */

/* Backlit rather than alarming: this is important, not wrong. */
.warn{
  margin-top:22px;padding:16px 18px;
  background:var(--signal-wash);
  border-left:2px solid var(--signal-line);
  border-radius:var(--r-well);
}
.warn p{font-size:.9375rem;color:var(--legend-body)}
.warn p + p{margin-top:10px}

/* Something is actually wrong, or there is nothing to show. */
.alert{
  margin-top:22px;padding:16px 18px;
  background:var(--halt-wash);
  border-left:2px solid var(--halt);
  border-radius:var(--r-well);
  font-size:.9375rem;color:var(--legend-body);
}

/* Genuinely a sequence, so it is genuinely numbered. Named .howto
   rather than .steps because the landing page already has a
   .steps, and its setup guide wants 44px gaps and no markers. */
.howto{
  margin:22px 0 0;padding-left:1.35em;
  list-style:decimal;color:var(--legend-body);
}
.howto li{margin-top:9px}
.howto li::marker{color:var(--legend-faint);font-variant-numeric:tabular-nums}

.note{margin-top:20px;font-size:.9375rem;color:var(--legend-soft);max-width:62ch}
.muted{color:var(--legend-soft)}

/* ---------- looking a key up ---------- */

.lookup{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin-top:28px}
.field{display:flex;flex-direction:column;gap:8px;flex:1 1 250px}
.field > span{font-size:.8125rem;color:var(--legend-faint)}
.field input{
  width:100%;padding:14px 15px;
  background:var(--well);color:var(--legend);
  border:1px solid var(--rule);border-radius:var(--r-well);
  box-shadow:inset 0 1px 3px var(--well-shadow);
  font-family:var(--mono);font-size:1rem;letter-spacing:.04em;
}
.field input::placeholder{color:var(--legend-faint);letter-spacing:.04em}
.lookup .keycap{padding-bottom:5px}

code{
  font-family:var(--mono);font-size:.9em;
  background:var(--well);color:var(--legend);
  padding:2px 7px;border-radius:5px;
}

/* ---------- the policies ---------- */

/* The landing page already sets .prose for its guides: one
   measure, 1.72 leading, aqua list markers. These pages use that
   as it is; below is only what a policy page needs on top.

   The link rule is not cosmetic. styles.css sets a{color:inherit}
   because every link on the landing page carries .textlink, and a
   bare <a> in a policy page would otherwise be the same colour as
   the sentence around it — an invisible link in the one place
   someone is looking for the refund address. */
.prose{padding-top:6px}
.prose h2{margin-top:36px;font-size:1.1875rem}
.prose a{color:var(--signal-text);text-decoration:underline;text-underline-offset:3px}
.prose .keyout{font-size:1.0625rem;letter-spacing:.02em}

/* ---------- foot ---------- */

.foot{
  display:flex;flex-wrap:wrap;gap:6px 22px;
  margin-top:clamp(44px,7vw,72px);
  padding-block:22px 40px;
  border-top:1px solid var(--rule);
  font-size:.875rem;color:var(--legend-faint);
}
.foot a{color:var(--legend-faint);text-decoration:none}
.foot a:hover{color:var(--signal-text)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}