/* ==========================================================================
   SecureCloud — foundations

   The interface is built to read like a piece of instrumentation: machined
   graphite, hairline rules, monospace readouts, and exactly two signal
   colours that mean something rather than decorate. Amber is "sealed",
   jade is "open". Nothing else competes with them.

   Everything is self-hosted or system-provided: a strict CSP forbids remote
   fonts, so the type stacks lean on faces that ship with the OS and still
   have real character (Cascadia Mono, SF Mono, Palatino, Iowan Old Style).
   ========================================================================== */

:root {
  /* --- surface ------------------------------------------------------- */
  --ink-000: #08090a;
  --ink-050: #0b0c0e;
  --ink-100: #101215;
  --ink-200: #16181c;
  --ink-300: #1d2025;
  --ink-400: #262a30;
  --hairline: #23262b;
  --hairline-bright: #32363d;

  /* --- type ---------------------------------------------------------- */
  --paper: #e9e7e2;
  --paper-dim: #a8a9ad;
  --paper-mute: #74777e;
  --paper-faint: #4e525a;

  /* --- signal -------------------------------------------------------- */
  --amber: #f0a23c;
  --amber-dim: #7a5320;
  --amber-glow: rgba(240, 162, 60, 0.16);
  --jade: #5fdcae;
  --jade-dim: #1f6b53;
  --jade-glow: rgba(95, 220, 174, 0.14);
  --rust: #f0644f;
  --rust-dim: #7a3128;
  --rust-glow: rgba(240, 100, 79, 0.14);

  /* --- fonts --------------------------------------------------------- */
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia,
    'Times New Roman', serif;
  --font-mono: 'Cascadia Mono', 'SF Mono', ui-monospace, 'JetBrains Mono', 'Roboto Mono', Menlo,
    Consolas, 'Liberation Mono', monospace;
  --font-ui: var(--font-mono);

  /* --- metrics ------------------------------------------------------- */
  --radius: 3px;
  --radius-lg: 6px;
  --rail: 60px;
  --pad: clamp(1rem, 2.5vw, 2rem);
  --tap: 44px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 140ms;
  --med: 260ms;
  --slow: 520ms;

  color-scheme: dark;
}

/* --------------------------------------------------------------------- */
/* reset                                                                   */
/* --------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background: var(--ink-050);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  font-feature-settings: 'ss01', 'cv01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: not-allowed;
}

a {
  color: var(--jade);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Focus rings are for keyboards; a pointer press should not paint one. */
:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: var(--amber);
  color: var(--ink-000);
}

/* --------------------------------------------------------------------- */
/* texture — a fine film grain keeps large dark fields from banding        */
/* --------------------------------------------------------------------- */

.grain::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------- */
/* shared primitives                                                       */
/* --------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-mute);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--paper);
}

.wordmark em {
  font-style: italic;
  color: var(--amber);
}

/* --- status lamp ----------------------------------------------------- */

.lamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-mute);
  white-space: nowrap;
}

.lamp::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper-faint);
  box-shadow: 0 0 0 0 transparent;
  flex: none;
}

.lamp[data-state='sealed']::before {
  background: var(--amber);
  box-shadow: 0 0 10px 1px var(--amber-glow);
  animation: pulse 2.8s var(--ease) infinite;
}

.lamp[data-state='open']::before {
  background: var(--jade);
  box-shadow: 0 0 10px 1px var(--jade-glow);
}

.lamp[data-state='fault']::before {
  background: var(--rust);
  box-shadow: 0 0 10px 1px var(--rust-glow);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* --- buttons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--hairline-bright);
  border-radius: var(--radius);
  background: var(--ink-200);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    background var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}

.btn:hover:not(:disabled) {
  background: var(--ink-300);
  border-color: var(--paper-faint);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.4;
}

.btn--primary {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink-000);
}

.btn--primary:hover:not(:disabled) {
  background: #ffb653;
  border-color: #ffb653;
  color: var(--ink-000);
}

.btn--ghost {
  background: transparent;
  border-color: var(--hairline);
  color: var(--paper-dim);
}

.btn--ghost:hover:not(:disabled) {
  color: var(--paper);
  border-color: var(--paper-faint);
  background: var(--ink-200);
}

.btn--danger:hover:not(:disabled) {
  border-color: var(--rust);
  color: var(--rust);
  background: var(--rust-glow);
}

.btn--sm {
  min-height: 34px;
  padding: 0 12px;
  font-size: 11px;
}

.btn__icon {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- fields ---------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-mute);
}

.field__input {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 13px;
  background: var(--ink-000);
  border: 1px solid var(--hairline-bright);
  border-radius: var(--radius);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  transition:
    border-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
}

.field__input::placeholder {
  color: var(--paper-faint);
  letter-spacing: 0.08em;
}

.field__input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

.field__input[type='password'] {
  letter-spacing: 0.22em;
}

.field__hint {
  font-size: 11px;
  line-height: 1.5;
  color: var(--paper-faint);
}

/* Wide, evenly-spaced digits for the six-digit second factor. */
.field__input--code {
  font-size: 22px;
  letter-spacing: 0.55em;
  text-align: center;
  padding-left: 0.55em;
}

/* --- messages -------------------------------------------------------- */

.notice {
  display: none;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline-bright);
  background: var(--ink-200);
  font-size: 12.5px;
  line-height: 1.5;
}

.notice[data-show='1'] {
  display: flex;
  animation: notice-in var(--med) var(--ease-out);
}

.notice[data-tone='error'] {
  border-color: var(--rust-dim);
  background: var(--rust-glow);
  color: #ffb3a7;
}

.notice[data-tone='ok'] {
  border-color: var(--jade-dim);
  background: var(--jade-glow);
  color: #a5f0d5;
}

.notice[data-tone='warn'] {
  border-color: var(--amber-dim);
  background: var(--amber-glow);
  color: #f5cc8f;
}

@keyframes notice-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* --- utility --------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none !important;
}

.spin {
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}