/*
 * The server's own pages. Their language is the mark's: an F built from
 * separate tiles. Codes are typed into tiles, a person's number is a tile,
 * the three setup steps are the stem's three tiles. Orange belongs to the
 * brand (the mark and those tiles); actions use the apps' blue.
 */

:root {
  color-scheme: dark;
  --ground: #121315;
  --plate: #17181b;
  --plate-up: #1c1e22;
  --well: #0d0e10;
  --edge: #25272b;
  --edge-strong: #3a3e43;
  --ink: rgba(255, 255, 255, 0.92);
  --ink-2: rgba(255, 255, 255, 0.64);
  --ink-3: rgba(255, 255, 255, 0.46);
  --brand: #ea580c;
  --on-brand: #1a0d05;
  --act: #6b8afd;
  --act-ink: #9fb2ff;
  --act-ring: rgba(107, 138, 253, 0.32);
  --ok: #6fcf8e;
  --warn: #d9b45b;
  --danger: #ff9c90;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --tile: 6px;
  --plate-r: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--ground); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font: 14.5px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--act-ink); text-underline-offset: 3px; }
p { margin: 0; }

/* ---------------------------------------------------------------- frames */

.page { max-width: 520px; margin: 0 auto; padding: 56px 20px 72px; }
.page.wide { max-width: 1040px; padding-top: 24px; }
/* The server's front door stands in the middle of the screen. */
.page.door { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.page.door .title { font-size: 46px; }

.lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.lockup .word { font: 300 19px/1 var(--display); letter-spacing: -0.02em; }
.lockup .server { color: var(--ink-3); font-size: 13.5px; padding-left: 10px; border-left: 1px solid var(--edge-strong); }
.lockup .server:empty { display: none; }

.mark { display: block; flex: none; }

/* ------------------------------------------------------------------ type */

.eyebrow {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.title { font: 300 34px/1.12 var(--display); letter-spacing: -0.025em; margin: 12px 0 10px; }
.lead { color: var(--ink-2); max-width: 44ch; }
.note { color: var(--ink-3); font-size: 12.5px; margin-top: 6px; }
.done { color: var(--ok); }

.head { margin: 36px 0 26px; }

/* -------------------------------------------------------------- controls */

.field { margin-top: 16px; }
.field label, .label { display: block; margin-bottom: 7px; color: var(--ink-2); font-size: 13px; }

input, select {
  width: 100%;
  padding: 11px 12px;
  border-radius: 9px;
  border: 1px solid var(--edge);
  background: var(--well);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  color: var(--ink);
  font: inherit;
}
input::placeholder { color: var(--ink-3); }
input:hover, select:hover { border-color: var(--edge-strong); }
input:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--act);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--act-ring);
}
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--act); box-shadow: none; }

.check { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); cursor: pointer; }
.check input { margin-top: 3px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 9px;
  border: 1px solid var(--edge-strong);
  background: transparent;
  color: var(--ink);
  font: 500 13.5px/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--plate-up); }
.btn:focus-visible, .tab:focus-visible, a:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary { background: var(--act); border-color: var(--act); color: #fff; font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: #7d98ff; }
.btn.danger { color: var(--danger); }
.btn.big { width: 100%; padding: 13px; margin-top: 26px; font-size: 14.5px; }
.btn.quiet { border-color: transparent; color: var(--ink-2); padding-left: 6px; padding-right: 6px; }

.error { color: var(--danger); font-size: 13px; margin-top: 12px; min-height: 1.4em; }
.error::first-letter, .done::first-letter { text-transform: uppercase; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }

/* ---------------------------------------------------------------- plates */

.plate {
  background: var(--plate);
  border: 1px solid var(--edge);
  border-radius: var(--plate-r);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.plate.pad { padding: 20px; }
.plate.pad > .field:first-child { margin-top: 0; }

/* A spec plate: labelled cells, the way equipment wears its facts. */
.plate .block { padding: 18px; }
.spec { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--edge); }
.spec .cell { padding: 14px 18px; min-width: 0; }
.spec .cell + .cell { border-left: 1px solid var(--edge); }
.value { font: 13px/1.4 var(--mono); margin-top: 7px; overflow-wrap: anywhere; }
.value.big { font-size: 15px; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 8px; background: var(--ink-3); vertical-align: 1px; }
.dot.ok { background: var(--ok); }
.dot.bad { background: var(--danger); }

.copy-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.copy-row input { font: 13px var(--mono); }

/* ----------------------------------------------------------------- tiles */

.tile {
  display: inline-grid;
  place-items: center;
  border-radius: var(--tile);
  font: 600 12px/1 var(--mono);
}
.tile.brand { background: var(--brand); color: var(--on-brand); }

/* The setup steps: the three tiles of the mark's stem. */
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: 30px 1fr; gap: 16px; padding-top: 22px; }
.step + .step { margin-top: 18px; border-top: 1px solid var(--edge); }
.step .tile { width: 30px; height: 30px; font-size: 13px; }
.step h2 { font: 500 15px/30px var(--sans); margin: 0; }
.step .field:first-of-type { margin-top: 10px; }

/* A code typed the way it is printed: four tiles of four. */
.code { display: flex; align-items: center; gap: 6px; }
.code input {
  width: 0;
  flex: 1;
  padding: 12px 0;
  text-align: center;
  font: 500 16px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.code .dash { color: var(--ink-3); font-family: var(--mono); }

/* A person's number on the server, as a tile. */
.number { width: 92px; height: 92px; font-size: 26px; letter-spacing: -0.02em; margin-bottom: 22px; }

/* ----------------------------------------------------------------- motion */

/* The mark assembles once: the stem's tiles land, then the arms slide home. */
.mark.assemble .mk-tile,
.mark.assemble .mk-arm {
  transform-box: fill-box;
  animation: mk-land 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.mark.assemble .mk-t1 { animation-delay: 80ms; }
.mark.assemble .mk-t2 { animation-delay: 160ms; }
.mark.assemble .mk-t3 { animation-delay: 240ms; }
.mark.assemble .mk-arm { animation-name: mk-slide; }
.mark.assemble .mk-a1 { animation-delay: 380ms; }
.mark.assemble .mk-a2 { animation-delay: 460ms; }

@keyframes mk-land { from { opacity: 0; transform: translateY(-60%); } }
@keyframes mk-slide { from { opacity: 0; transform: translateX(-40%); } }

@media (prefers-reduced-motion: reduce) {
  .mark.assemble .mk-tile, .mark.assemble .mk-arm { animation: none; }
}

/* ----------------------------------------------------------------- small */

@media (max-width: 560px) {
  .page { padding-top: 36px; }
  .title, .page.door .title { font-size: 30px; }
  .page.door { justify-content: flex-start; }
  .spec .cell { padding: 12px; }
}