/* NC Zoning Academy: boot / login view.
 * Geometry and colour are measured from the 0.1.0 monolith
 * (docs/monolith-parity-spec.md). Type comes from the --fs-* roles, re-bound
 * for this view on .boot-screen below (see docs/type-system.md).
 * The whole screen is click-to-skip during the typewriter animation; the form
 * appears only once the boot log completes (or is skipped).
 */

.boot-screen {
  /* A terminal, not a document: the log IS the content, so `code` carries the
     weight and no prose role is in play at all. */
  --fs-secondary: 16px;   /* the callsign field */
  --fs-ui:        14px;   /* [ ACCESS TERMINAL ] */
  --fs-code:      13.5px; /* boot log + welcome block */
  --fs-label:     11px;   /* titlebar, prompts, slot button */
  --fs-micro:     10px;   /* field caption, returning-operator hint */

  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: var(--z-view);
  padding: var(--space-6xl);
  overflow: hidden;
}

/* faint cyan halo behind the card, anchored to the top of the screen */
.boot-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgb(from var(--primary) r g b / 0.06), transparent 60%);
}

.boot-card {
  position: relative;
  width: 640px;
  max-width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--primary);
  box-shadow: var(--card-glow);
}

/* cyan titlebar: navy text on cyan */
.boot-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
  background: var(--primary);
  color: var(--bg);
  font-family: var(--font-identity);
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-tight);
  padding: var(--space-md) var(--space-4xl);
  white-space: nowrap;
}
.boot-tb-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boot-tb-id { opacity: 0.7; flex: none; }

.boot-body {
  padding: 26px 28px 28px;
}

/* boot log: one cyan mono block; height reserved so the card doesn't jump
   while the typewriter runs */
.boot-log {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  line-height: 1.85; /* measured: 24.975px / 13.5px */
  color: var(--primary);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 150px;
}

/* post-login confirmation readout (shows for 1.7s in place of the form) */
.boot-welcome {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  line-height: 1.85;
  color: var(--success);
  white-space: pre-wrap;
  word-break: break-word;
}

.boot-form { margin-top: var(--space-5xl); }

/* divider fades out to the right */
.boot-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--primary), transparent);
  margin: 0 0 var(--space-4xl);
}

.boot-prompt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-mid);
  color: var(--muted);
  margin: 0 0 var(--space-sm);
}

.boot-field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  color: var(--primary);
  margin: 0 0 var(--space-xs);
}

.boot-input {
  display: block;
  width: 100%;
  background: var(--field-bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-secondary);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  padding: var(--space-lg) var(--space-xl);
  margin: 0 0 var(--space-3xl);
  border: 1px solid rgb(from var(--primary) r g b / 0.4);
  border-radius: var(--radius);
  outline: none;

  &::placeholder {
    color: var(--placeholder);
    font-weight: 400;
    letter-spacing: normal;
  }
}

/* ACCESS TERMINAL, two states: ready (name typed, course loaded) is solid
   cyan; not-ready is the dimmed outline */
.boot-access {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  padding: var(--space-xl);
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid rgb(from var(--primary) r g b / 0.35);
  color: var(--primary-dim);
  cursor: not-allowed;

  &.ready {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg);
    cursor: pointer;
  }
}

/* [line] RETURNING OPERATOR? [line] */
.boot-returning {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin: var(--space-xl) 0 0;
}
.boot-rule {
  flex: 1;
  height: 1px;
  background: var(--line-faint);
}
.boot-returning-text {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mid);
  color: var(--placeholder);
  white-space: nowrap;
}

/* slot button (a label wrapping a hidden file input) */
.boot-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  cursor: pointer;
  margin: var(--space-xl) 0 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-mid);
  padding: var(--space-lg);
  border: 1px solid var(--line-muted);
  border-radius: var(--radius);
  transition: background 0.15s, border-color 0.15s, color 0.15s;

  &:hover {
    background: rgb(from var(--primary) r g b / 0.08);
    border-color: var(--primary);
    color: var(--primary);
  }
}
.boot-shard-icon {
  display: inline-block;
  width: 22px;
  height: 10.4px;
  flex: none;
  background: currentColor;
  -webkit-mask: url(../shard-icon.svg) center / contain no-repeat;
  mask: url(../shard-icon.svg) center / contain no-repeat;
}
.boot-file { display: none; }

/* import result line under the slot button: green ok / red rejection */
.boot-import-msg {
  margin: var(--space-xl) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--danger);

  &.ok { color: var(--success); }
}

/* skip hint, only while the typewriter is running */
.boot-skip-hint {
  margin-top: var(--space-2xl);
  text-align: center;
  color: var(--placeholder);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-mid);
}