/* ───────────────────────────────────────────────────────────────
   Local Test, licensing pages (thanks.html, license.html)

   An extension of styles.css, not a second design. Everything here is
   built from the tokens defined in section 1 of that file, so all four
   themes (system, light, dark, pocket) keep working without this file
   knowing they exist. No colour is written down below: if a value is
   not a var(), it is a shadow or a shape.

   The key display and its copy button are deliberately the site's own
   .terminal and .copy-btn, borrowed as they are. A licence key belongs
   in the same monospaced frame as everything else the app shows.

    1. Page furniture   2. Forms   3. Notices   4. Key   5. Machines
   ─────────────────────────────────────────────────────────────── */

/* ─── 1. Page furniture ─────────────────────────────────────── */

.page-head {
  text-align: center;
  padding-top: clamp(1.6rem, 6vw, 3rem);
}
.page-head h1 { font-size: clamp(2rem, 5.5vw, 2.7rem); }
.page-head .lede { margin-top: .8rem; }

/* Two independent tasks on license.html, each in its own frame, so it is
   never ambiguous which button belongs to which text box. */
.panel {
  margin-top: 1.6rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.2rem 1.3rem 1.4rem;
}
.panel h2 {
  font-size: 1.15rem;
  margin-bottom: .5rem;
  padding-bottom: 0;
  border-bottom: 0;
}
.panel > p { font-size: .95rem; }

.panel-foot {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
  font-size: .88rem;
  color: var(--ink-3);
}

/* ─── 2. Forms ──────────────────────────────────────────────── */

.lt-form { margin-top: 1.1rem; }

.field { display: grid; gap: .35rem; }
.field + .field { margin-top: .9rem; }

.field label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field input {
  width: 100%;
  padding: .62rem .8rem;
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: .95rem;
  /* Recessed, against the moulded-plastic press the buttons have. */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07);
  transition: border-color .15s var(--ease);
}
.field input::placeholder { color: var(--ink-3); opacity: 1; }
.field input:hover { border-color: var(--ink-3); }
.field input.mono { font-family: var(--mono); letter-spacing: .04em; }

.field-hint { font-size: .84rem; color: var(--ink-3); }

.form-actions {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* A button that is mid-request says so, and cannot be pressed twice. */
.btn[aria-busy="true"], .btn:disabled {
  opacity: .55;
  cursor: progress;
  transform: none;
}
.btn:disabled:hover { transform: none; border-color: var(--rule-2); }

/* ─── 3. Notices ────────────────────────────────────────────── */

/* One shape, three moods, all of them drawn from the wash colours the rest
   of the site already uses for its numbered steps. */
.notice {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-radius: 9px;
  font-size: .93rem;
  background: var(--sky);
  color: var(--sky-ink);
}
.notice[hidden] { display: none; }
.notice.is-good { background: var(--sage); color: var(--sage-ink); }
.notice.is-warn { background: var(--blush); color: var(--blush-ink); }
.notice a { color: inherit; text-decoration: underline; }
.notice p { margin-bottom: .4em; }
.notice p:last-child { margin-bottom: 0; }

/* Waiting for the payment provider's webhook to land. */
.waiting {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.4rem;
  font-size: .95rem;
  color: var(--ink-3);
}
.waiting[hidden] { display: none; }

/* ─── 4. The key ────────────────────────────────────────────── */

.key-block { margin-top: 1.6rem; }
.key-block[hidden] { display: none; }

/* Inside the borrowed .terminal frame: bigger, looser, made to be read out
   loud over the phone and to survive being retyped. */
.key-value {
  font-size: clamp(.95rem, 3.6vw, 1.25rem);
  letter-spacing: .08em;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.key-sent {
  margin-top: .8rem;
  font-size: .9rem;
  color: var(--ink-3);
}

/* A class rather than a style attribute: the page's CSP has style-src 'self'
   with no 'unsafe-inline', which blocks inline style attributes too. */
.steps-note { margin-top: 1.4rem; }

.next-steps { margin-top: 2rem; }
.next-steps h2 {
  font-size: 1.2rem;
  margin-bottom: 1.1rem;
  padding-bottom: .5rem;
}

/* ─── 5. Machines ───────────────────────────────────────────── */

.seat-count {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: 1.2rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.seat-count strong {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

.machine-list {
  list-style: none;
  margin: .7rem 0 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

.machine {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem .9rem;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--paper);
}
.machine-text { flex: 1; min-width: 0; }
.machine-name {
  color: var(--ink);
  font-size: .97rem;
  overflow-wrap: anywhere;
}
.machine-meta {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-3);
}
.machine .btn { flex: none; }

.machine-empty {
  margin-top: .7rem;
  padding: .9rem;
  border: 1px dashed var(--rule-2);
  border-radius: 9px;
  font-size: .93rem;
  color: var(--ink-3);
  text-align: center;
}

@media (max-width: 30rem) {
  .machine { align-items: flex-start; flex-direction: column; gap: .55rem; }
  .machine .btn { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .field input, .btn { transition: none; }
}