/* The free-key gateway: the step list and the method popup.
 *
 * No colour literals and no undefined tokens; check-shell-css.mjs reads every
 * stylesheet in this directory.
 */

/* ── steps ─────────────────────────────────────────────────────────────────
   A real ordered list. The state lives on the element rather than in three
   class names, so a step cannot be both current and done, which is what a
   half-updated render used to look like. */
.gwsteps { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; }
.gwstep {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--ln);
}
.gwstep:last-child { border-bottom: 0; }
.gwstep > i {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--ln); border-radius: var(--rad-pill);
  font-style: normal; font-size: var(--t-xs); font-weight: 500;
  color: var(--mut);
  transition: color var(--t-tint) ease, border-color var(--t-tint) ease, box-shadow var(--t-move) var(--ease);
}
.gwstep em { display: block; font-style: normal; font-weight: 500; }
/* The LABEL treatment, for the tags the steps carry: "12 hour key", "24 hour
   key". Uppercase and label tracking are what make those read as a tag rather
   than as a sentence somebody forgot to finish. */
.gwstep small { display: block; color: var(--rank); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; margin-top: 2px; }
/* And the opt-out, for the one `small` that holds an actual sentence. Uppercase
   removes the word shapes a reader navigates by, which is a real cost on a
   line of prose and none on a two-word tag. */
.gwstep small.sentence { text-transform: none; letter-spacing: inherit; font-size: var(--t-sm); line-height: 1.5; }

/* Current: lit. Done: quiet and confirmed. Locked: present but clearly not yet.
   Three visibly different states, because a list where they look alike is a list
   that does not tell you where you are. */
.gwstep[data-state="cur"] > i { color: var(--acc-txt); border-color: var(--acc); box-shadow: 0 0 12px -3px var(--acc); }
.gwstep[data-state="done"] > i { color: var(--ok); border-color: var(--ok); }
.gwstep[data-state="locked"] { opacity: 0.42; }
.gwstep[data-state="locked"] em { color: var(--mut); }

.gwback { padding: 0 0 var(--s-3); border: 0; }
.gwact { margin-top: var(--s-3); }
.gwnote { color: var(--mut); font-size: var(--t-sm); margin: var(--s-2) 0 0; }
.gwnote.bad { color: var(--warn); }
.gwnote.good { color: var(--ok); }

/* ── the method popup ──────────────────────────────────────────────────────
   A dialog, not two cards inlined into the page. The choice changes what every
   step below says, so it is worth being a moment rather than a paragraph: it is
   what stops somebody reading three work.ink steps while believing they picked
   YouTube.

   Animated on opacity and transform with visibility stepped at the end, for the
   same reason as the language menu: display cannot be transitioned, so a dialog
   hidden that way cannot be seen to arrive or leave. */
.gwpicker {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: var(--s-5);
  background: var(--scrim-mid);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-move) var(--ease), visibility 0s linear var(--t-move);
}
.gwpicker[data-open="1"] {
  opacity: 1; visibility: visible;
  transition: opacity var(--t-move) var(--ease), visibility 0s;
}
.gwdialog {
  width: min(680px, 100%);
  background: var(--sur); border: 1px solid var(--ln); border-radius: var(--rad-large);
  box-shadow: 0 40px 90px -50px var(--bloom);
  transform: translateY(10px) scale(0.985);
  transition: transform var(--t-enter) var(--ease);
  overflow: hidden;
}
.gwpicker[data-open="1"] .gwdialog { transform: none; }
.gwdhead { padding: var(--s-5) var(--s-6) var(--s-4); border-bottom: 1px solid var(--ln); }
.gwdhead h3 { margin-bottom: var(--s-1); }
.gwdhead p { margin: 0; color: var(--mut); font-size: var(--t-sm); }

.gwpick { display: grid; grid-template-columns: 1fr 1fr; }
.gwmethod {
  appearance: none; text-align: left; cursor: pointer;
  background: none; border: 0; border-top: 0; padding: var(--s-6);
  font: inherit; color: inherit;
  display: flex; flex-direction: column; gap: var(--s-2);
  transition: background-color var(--t-tint) ease;
}
.gwmethod + .gwmethod { border-left: 1px solid var(--ln); }
.gwmethod:hover, .gwmethod:focus-visible { background: var(--hov); }
/* The badge, which is the first thing read.
 *
 * A filled pill rather than the uppercase label that was here, because the two
 * options are genuinely different recommendations and the old treatment made
 * them look like two headings of equal weight. Recommended is the one that
 * WORKS everywhere; Best value is the one that gives twice the key for a few
 * more steps. Naming both stops "recommended" reading as "the other one is
 * worse". */
.gwmethod .gwbadge {
  align-self: start;
  display: inline-flex; align-items: center;
  padding: 2px var(--s-2); border-radius: var(--rad-pill);
  font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label);
  text-transform: uppercase; border: 1px solid currentColor;
}
.gwmethod .b-rec { color: var(--acc2); }
.gwmethod .b-best { color: var(--warn); }

/* The icon sits in its own tile so the two cards line up whatever the label
   length, which they did not when the badge alone set the first row height. */
.gwmethod .gwicon {
  width: 38px; height: 38px; border-radius: var(--rad-soft);
  display: grid; place-items: center;
  border: 1px solid var(--ln); color: var(--acc-txt);
  transition: border-color var(--t-tint) ease, color var(--t-tint) ease;
}
.gwmethod .gwicon .ic { width: 19px; height: 19px; }
.gwmethod[data-method="workink"] .gwicon { color: var(--acc2); }
.gwmethod:hover .gwicon, .gwmethod:focus-visible .gwicon { border-color: currentColor; }

.gwmethod b { font-size: var(--t-h3); font-weight: 600; letter-spacing: var(--track-display); }
.gwmethod .gwmeta {
  color: var(--mut); font-size: var(--t-xs);
  font-variant-numeric: tabular-nums; margin-top: -4px;
}
.gwmethod p { margin: 0; color: var(--mut); font-size: var(--t-sm); flex: 1; }
.gwmethod .gwgo { color: var(--acc-txt); font-size: var(--t-sm); }
/* The recommended one leans on the second accent, so "recommended" is a
   different colour from "accent" rather than a louder version of it. */
.gwmethod[data-method="workink"] .gwgo { color: var(--acc2); }

@media (max-width: 620px) {
  .gwpick { grid-template-columns: 1fr; }
  .gwmethod + .gwmethod { border-left: 0; border-top: 1px solid var(--ln); }
}

.gwdfoot { padding: var(--s-4) var(--s-6); border-top: 1px solid var(--ln); text-align: right; }

@media (max-width: 640px) {
  .gwpick { grid-template-columns: 1fr; }
  .gwmethod + .gwmethod { border-left: 0; border-top: 1px solid var(--ln); }
}
@media (prefers-reduced-motion: reduce) {
  .gwpicker, .gwdialog, .gwstep > i { transition: none; }
}