/* Sign-in, consent and account pages: a single terminal window. Builds on term.css. */

body { display: flex; justify-content: center; align-items: flex-start; padding: 11vh 16px 40px; }

.term {
  width: 100%; max-width: 560px;
  border: 1px solid var(--ink);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--ink) 14%, transparent);
  animation: power 0.32s steps(6, end) both;
}
@keyframes power {
  from { clip-path: inset(49% 0 49% 0); }
  to { clip-path: inset(0 0 0 0); }
}

.titlebar {
  display: flex; justify-content: space-between; gap: 2ch; padding: 0.35em 1.6ch;
  background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
}
.titlebar a { color: var(--paper); text-decoration: none; font-weight: 800; }
.titlebar a:hover { background: var(--paper); color: var(--ink); }

.screen { padding: 22px 3ch 26px; }
.screen > div > * { animation: print 0.4s steps(18, end) both; }
.screen > div > *:nth-child(2) { animation-delay: 0.08s; }
.screen > div > *:nth-child(3) { animation-delay: 0.16s; }
.screen > div > *:nth-child(4) { animation-delay: 0.24s; }
.screen > div > *:nth-child(5) { animation-delay: 0.32s; }
.screen > div > *:nth-child(n + 6) { animation-delay: 0.4s; }

p { margin: 0 0 12px; }
.small { font-size: 12px; }
.cmd { font-weight: 600; margin-bottom: 14px; }
h1 {
  font-size: 19px; line-height: 1.3; font-weight: 800; font-stretch: 100%; letter-spacing: -0.01em;
  margin: 0 0 10px; text-wrap: balance;
}

form { display: grid; gap: 8px; margin: 18px 0 4px; }
label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.field { display: flex; align-items: center; gap: 1.2ch; border-bottom: 1px dashed var(--ink); }
.field:focus-within { border-bottom-style: solid; }
input {
  flex: 1; min-width: 0; border: 0; padding: 0.55em 0; background: transparent; color: var(--ink);
  font: inherit; caret-color: var(--ink); outline: none;
}
input::placeholder { color: var(--faint); }
input.code { letter-spacing: 0.35em; font-size: 18px; font-weight: 700; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5ch 2.5ch; margin: 12px 0 14px; }

.divider { display: flex; align-items: center; gap: 1.5ch; color: var(--dim); font-size: 12px; margin: 16px 0 10px; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px dashed var(--faint); }

ul.dash { list-style: none; margin: 14px 0 18px; padding: 0; }
ul.dash li { padding-left: 3ch; text-indent: -3ch; margin-bottom: 7px; }
ul.dash li::before { content: "-  "; color: var(--dim); }

.ask { font-weight: 700; margin: 0; }
.key {
  display: inline-block; min-width: 2.2ch; text-align: center; margin-right: 0.6ch;
  border: 1px solid currentColor; font-size: 0.85em; line-height: 1.35;
}

/* Errors and confirmations stay two-ink: a heavy rule and a prefix instead of a colour. */
.error { border-left: 3px solid var(--ink); padding: 2px 0 2px 1.5ch; font-weight: 600; margin-top: 10px; }
.error::before { content: "error: "; font-weight: 800; }
.ok::before { content: "✓ "; }

.balance {
  font-size: clamp(34px, 9vw, 48px); font-weight: 800; font-stretch: 112.5%; letter-spacing: -0.03em;
  line-height: 1.05; margin: 6px 0 4px;
  /* "/ 500 credits" sits beside the number, or drops below it as one piece on narrow screens */
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 4px; /* px: 1ch here would be a 48px-font character */
}
.balance .unit { font-size: 15px; font-weight: 600; font-stretch: 87.5%; letter-spacing: 0; color: var(--dim); white-space: nowrap; }

.section { border-top: 1px dashed var(--faint); margin-top: 22px; padding-top: 16px; }
/* App name with its date underneath; remove sits to the right of both. The name column can shrink and
   wrap, so the button always stays on screen. */
.grant { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2ch; row-gap: 2px; align-items: center; padding: 8px 0; }
.grant .b { overflow-wrap: anywhere; }
.grant .dim { grid-column: 1; grid-row: 2; font-size: 12px; }
.grant .btn { grid-column: 2; grid-row: 1 / span 2; }
.grant + .grant { border-top: 1px dotted var(--faint); }

@media (max-width: 480px) {
  body { padding-top: 5vh; }
}
@media (prefers-reduced-motion: reduce) {
  .term, .screen > div > * { animation: none; }
}