/* ============================================================
   10X CRM — Page layouts
   Auth screens, dashboard grid, clients toolbar/list, profile columns.
   Depends on tokens.css + base.css + components.css.
   ============================================================ */

/* ============================================================
   AUTH — Login (P2.1) and Sign Up (P1.1)
   A single centred window, max-width 420px per the PRD.
   ============================================================ */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-5) var(--sp-4);
}

.auth__card {
  width: 100%;
  max-width: var(--card-max);
}

/* The login screen is the first thing anyone sees, including the examiner,
   so it gets the full power-on: the card arrives as a CRT snapping awake and
   the brand name burns in above it. */
.auth__card {
  animation: crt-on 420ms steps(9, end) both;
}

.auth__brand {
  display: block;
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-display);
  color: var(--accent);
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-shadow: 0 0 20px var(--accent);
  animation: brand-warm 1.6s ease-out both;
}

/* Filament warming up: over-bright and washed out, settling to colour. */
@keyframes brand-warm {
  0%   { opacity: 0; filter: brightness(4) saturate(0); letter-spacing: 0.4em; }
  45%  { opacity: 1; filter: brightness(2.4) saturate(0.5); }
  100% { opacity: 1; filter: none; letter-spacing: 0.04em; }
}

.auth__heading {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}

.auth__footer {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  text-align: center;
}

/* One short typed line on the login screen — a nod to a boot sequence
   without making the user wait for one. */
.auth__boot {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--phosphor);
  text-align: center;
  margin-top: var(--sp-3);
  text-shadow: 0 0 8px var(--phosphor);

  /* Typed out by clipping the line's own width in steps, one character at a
     time — no JavaScript involved. The step count is roughly the character
     count of the two boot lines (34 and 36); CSS cannot count characters, so
     this is approximate by nature. Being a step or two out only changes how
     many characters appear per tick, never whether the effect works. */
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--phosphor);
  animation: type-line 1.4s steps(35, end) 400ms both,
             blink-caret 800ms steps(2, end) infinite;
}

@keyframes type-line {
  from { width: 0; }
  to   { width: max-content; }
}

/* ============================================================
   DASHBOARD (P3)
   ============================================================ */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

/* HUD framing: the angle brackets a targeting overlay puts round a label. */
.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.page-title::before,
.page-title::after {
  color: var(--accent);
  opacity: 0.8;
}

.page-title::before { content: "[ "; }
.page-title::after  { content: " ]"; }

.greeting {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  color: var(--text);
}

/* Live clock (P3.1) — tabular figures stop the seconds digit from
   shifting the whole line every tick. */
/* Live clock (P3.1) — set into a dark instrument well so the glowing digits
   read as a readout rather than as body text that happens to be coloured. */
.clock {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--phosphor);
  background: var(--bg-deep);
  border: 1px solid color-mix(in srgb, var(--phosphor) 45%, transparent);
  border-radius: var(--r-pill);
  box-shadow: var(--bevel-in), var(--bloom-sm) var(--phosphor);
  text-shadow: 0 0 10px var(--phosphor);
}

.stat-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: var(--sp-5);
}

.dash-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

@media (max-width: 860px) {
  .dash-grid { grid-template-columns: 1fr; }
}

.recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.recent-row:last-of-type { border-bottom: 0; }

/* ============================================================
   CLIENTS (P4.1)
   ============================================================ */
.toolbar {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.toolbar__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.toolbar__search { flex: 1; min-width: 200px; }
.toolbar__sort { max-width: 220px; }

.client-list {
  display: grid;
  gap: var(--sp-3);
}

/* Reads as a line of terminal output rather than a caption. */
.result-count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--phosphor);
  opacity: 0.85;
}

.result-count::before {
  content: "> ";
  opacity: 0.7;
}

/* ============================================================
   ANALYTICS — dressed as a mainframe terminal
   ============================================================ */

/* The one panel in the app that drops the chrome entirely. A phosphor
   terminal has no moulded plastic on it, so the gloss is replaced by a
   flat dark well and the whole thing glows instead.

   It stays dark in BOTH themes, and that is deliberate twice over: a
   real CRT is dark in a lit room, and in the light theme one black
   rectangle sitting in a pale fogged interface is quietly wrong in
   exactly the way that theme is trying to be. */
.terminal {
  margin-bottom: var(--sp-4);
}

.terminal .window__body {
  background: var(--terminal-well);
  color: var(--phosphor);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.9),
              inset 0 0 100px color-mix(in srgb, var(--phosphor) 8%, transparent);
}

.terminal__log,
.terminal__table {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--phosphor);
  text-shadow: 0 0 8px var(--phosphor);
  /* A wide monospace table must not stretch the page. It scrolls inside its
     own box instead, which is the only thing that keeps the layout intact on
     a narrow screen. */
  overflow-x: auto;
  white-space: pre;
}

.terminal__table {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed color-mix(in srgb, var(--phosphor) 35%, transparent);
}

/* ---- Findings: the actionable half of the diagnostic ----------------
   Colour-coded by severity, but never by colour alone — the level is
   also spelled out in words in the title bar, so the panel still reads
   correctly without colour perception. */
.finding {
  border-color: var(--accent);
}

.finding .window__bar {
  background-image: var(--gloss-spec),
    linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #000));
  animation: none;   /* no iridescent pan on a warning */
}

.finding--fail {
  border-color: var(--danger);
  box-shadow: var(--lift), var(--bloom-md) var(--danger);
}

.finding--fail .window__bar {
  background-image: var(--gloss-spec),
    linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--danger) 45%, #000));
}

.finding--warn {
  border-color: var(--warning);
  box-shadow: var(--lift), var(--bloom-sm) var(--warning);
}

.finding--warn .window__bar {
  background-image: var(--gloss-spec),
    linear-gradient(90deg, var(--warning), color-mix(in srgb, var(--warning) 45%, #000));
}

.finding__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}

.finding__row:last-child { border-bottom: 0; }

.finding__name {
  font-size: var(--fs-base);
  font-weight: 500;
}

.finding__meta {
  font-size: var(--fs-xs);
  color: var(--warning);
}

.finding__value {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

@media (max-width: 560px) {
  .finding__row { grid-template-columns: 1fr auto; }
  .finding__value { grid-column: 2; }
}

.analytics-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr 1fr;
  align-items: start;
  margin-bottom: var(--sp-4);
}

@media (max-width: 980px) {
  .analytics-grid { grid-template-columns: 1fr; }
}

/* The canvas is given a fixed drawing size in the HTML and told to scale
   down to whatever width it is given. Without max-width it would force the
   page wider than the viewport on a phone. */
.chart {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ============================================================
   PROFILE (P5)
   ============================================================ */
.profile-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 320px 1fr;
  align-items: start;
}

@media (max-width: 860px) {
  .profile-grid { grid-template-columns: 1fr; }
}

.profile-id {
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
  text-align: center;
}

.profile-id__name {
  font-family: var(--font-ui);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-tight);
}

.profile-id__meta {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* The one panel in the app that should make you hesitate. It stops the
   iridescent pan the other title bars run and switches to a hazard stripe
   that slides — the visual language of machinery you should not touch. */
.danger-zone {
  border-color: var(--danger);
  box-shadow: var(--lift), var(--bloom-md) var(--danger);
}

.danger-zone .window__bar {
  background-image: var(--gloss-spec),
    repeating-linear-gradient(
      45deg,
      var(--danger) 0 12px,
      color-mix(in srgb, var(--danger) 55%, #000) 12px 24px
    );
  background-size: 100% 100%, 34px 34px;
  animation: hazard-slide 1.4s linear infinite;
}

@keyframes hazard-slide {
  to { background-position: 0 0, 34px 0; }
}

/* ============================================================
   KEYBOARD SHORTCUT HELP (bonus)
   ============================================================ */
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}

.shortcut-row:last-child { border-bottom: 0; }

/* A real keycap: glossy top, hard bottom edge, sitting proud of the page. */
.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
  background-image: var(--gloss-face), linear-gradient(var(--surface-up), var(--surface-up));
  border: 1px solid var(--chrome-edge);
  border-radius: var(--r-2);
  box-shadow: var(--bevel-out), 0 2px 0 var(--bevel-dark);
}