/* fin-base.css — boot screen, login, Home, Jarvis, stub pages. Phase 1. */

* { box-sizing: border-box; }
#fin-root { min-height: 100vh; }

.fin-boot { min-height: 100vh; display: grid; place-items: center; background: var(--fin-bg); }
.fin-boot-mark {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--fin-r-md);
  background: var(--fin-accent); color: var(--fin-text-on-accent); font-family: var(--fin-font-display);
  font-weight: var(--fin-fw-bold); font-size: 20px; animation: fin-pulse 1.1s ease-in-out infinite;
}
@keyframes fin-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ── Login ─────────────────────────────────────────────────────────── */
.fin-login {
  min-height: 100vh; display: grid; place-items: center; padding: var(--fin-s-4);
  background: radial-gradient(circle at 50% 15%, var(--fin-accent-soft), transparent 55%), var(--fin-bg);
}
.fin-login-card {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--fin-s-4);
  padding: var(--fin-s-7) var(--fin-s-6); border-radius: var(--fin-r-xl); background: var(--fin-surface-1);
  box-shadow: 0 0 0 1px var(--fin-border-strong), var(--fin-shadow-pop);
}
.fin-login-mark {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--fin-r-md);
  background: var(--fin-accent); color: var(--fin-text-on-accent); font-family: var(--fin-font-display); font-weight: var(--fin-fw-bold); font-size: 20px;
  box-shadow: 0 6px 16px -6px var(--fin-accent-soft);
}
.fin-login-card h1 { margin: 0; font-family: var(--fin-font-display); font-size: var(--fin-fs-section); color: var(--fin-text-1); }
.fin-login-sub { margin: -8px 0 0; font-size: var(--fin-fs-meta); color: var(--fin-text-3); }
.fin-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fin-fs-meta); color: var(--fin-text-2); font-weight: var(--fin-fw-medium); }
.fin-login-err { display: flex; align-items: center; gap: var(--fin-s-2); padding: var(--fin-s-2) var(--fin-s-3); border-radius: var(--fin-r-sm); background: var(--fin-crit-soft); color: var(--fin-crit-ink); font-size: var(--fin-fs-meta); }
.fin-login-go { margin-top: var(--fin-s-2); width: 100%; }

/* ── Home ──────────────────────────────────────────────────────────── */
.fin-home { display: flex; flex-direction: column; gap: var(--fin-s-6); }
.fin-home-hero { display: flex; flex-direction: column; gap: var(--fin-s-1); }
.fin-home-health { margin: 0; font-family: var(--fin-font-display); font-size: var(--fin-fs-title); font-weight: var(--fin-fw-bold); color: var(--fin-text-1); }
.fin-home-health.is-ok { color: var(--fin-ok-ink); }
.fin-home-health.is-warn { color: var(--fin-warn-ink); }

.fin-home-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fin-s-4); }
.fin-hcard {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
  padding: 20px; border-radius: 16px;
  background: #1A1E1C; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 4px 14px rgba(0,0,0,.32), 0 28px 64px -18px rgba(0,0,0,.72);
}
.fin-hcard::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fin-accent); opacity: .55;
}
.fin-hcard.is-ok::before { background: var(--fin-ok); opacity: .8; }
.fin-hcard.is-crit::before { background: var(--fin-crit); opacity: .8; }
.fin-hcard-l { font-size: var(--fin-fs-meta); font-weight: var(--fin-fw-semi); letter-spacing: .03em; color: var(--fin-text-3); text-transform: uppercase; }
.fin-hcard-v { font-family: var(--fin-font-display); font-size: var(--fin-fs-num); font-weight: var(--fin-fw-bold); color: var(--fin-text-1); font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.15; }
.fin-hcard.is-ok .fin-hcard-v { color: var(--fin-ok-ink); }
.fin-hcard.is-crit .fin-hcard-v { color: var(--fin-crit-ink); }
@media (max-width: 1024px) { .fin-home-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fin-home-cards { grid-template-columns: 1fr; } }

.fin-attn-list { display: flex; flex-direction: column; gap: var(--fin-s-2); }
.fin-attn-row {
  appearance: none; display: flex; align-items: center; gap: var(--fin-s-3); width: 100%; box-sizing: border-box;
  padding: var(--fin-s-3); padding-left: calc(var(--fin-s-3) - 3px); border: 0; border-left: 3px solid transparent;
  border-radius: var(--fin-r-sm); background: var(--fin-surface-2);
  color: var(--fin-text-1); font: inherit; font-size: var(--fin-fs-body); cursor: pointer; text-align: left;
  transition: background-color var(--fin-t-fast) var(--fin-ease), border-color var(--fin-t-fast) var(--fin-ease), transform var(--fin-t-fast) var(--fin-ease);
}
.fin-attn-row:hover { background: var(--fin-surface-hover); transform: translateX(2px); }
.fin-attn-row.is-warn { background: var(--fin-warn-soft); border-left-color: var(--fin-warn); color: var(--fin-warn-ink); }
.fin-attn-row.is-crit { background: var(--fin-crit-soft); border-left-color: var(--fin-crit); color: var(--fin-crit-ink); }
.fin-attn-row.is-warn:hover, .fin-attn-row.is-crit:hover { filter: brightness(1.1); }
.fin-attn-t { flex: 1 1 auto; font-weight: var(--fin-fw-medium); }
.fin-attn-v { font-variant-numeric: tabular-nums; font-weight: var(--fin-fw-semi); }
.fin-attn-go { flex: none; color: var(--fin-text-3); }

.fin-ask { display: flex; gap: var(--fin-s-2); }
.fin-ask-input { flex: 1 1 auto; }
.fin-ask-suggest { display: flex; flex-wrap: wrap; gap: var(--fin-s-2); margin-top: var(--fin-s-3); }

/* ── Jarvis ────────────────────────────────────────────────────────── */
.fin-jarvis { display: flex; flex-direction: column; gap: var(--fin-s-5); }
.fin-jarvis-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--fin-s-3); }
.fin-jcard {
  appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: var(--fin-s-2);
  padding: var(--fin-s-4); border: 0; border-radius: var(--fin-r-lg); background: var(--fin-surface-1);
  box-shadow: 0 0 0 1px var(--fin-border-strong), var(--fin-shadow-pop); cursor: pointer; text-align: left;
  transition: box-shadow var(--fin-t-fast) var(--fin-ease), transform var(--fin-t-fast) var(--fin-ease), background-color var(--fin-t-fast) var(--fin-ease);
}
.fin-jcard:hover { box-shadow: 0 0 0 1px var(--fin-accent-line), var(--fin-shadow-pop); transform: translateY(-2px); background: var(--fin-surface-hover); }
.fin-jcard-ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--fin-r-sm);
  background: var(--fin-surface-2); font-size: 19px;
}
.fin-jcard-t { font-family: var(--fin-font-display); font-weight: var(--fin-fw-semi); font-size: var(--fin-fs-body); color: var(--fin-text-1); }
.fin-jcard-sub { font-size: var(--fin-fs-meta); color: var(--fin-text-3); }
@media (max-width: 1024px) { .fin-jarvis-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fin-jarvis-cards { grid-template-columns: 1fr; } }
.fin-jarvis-stub { color: var(--fin-text-2); }
.fin-jarvis-stub p { margin: 0; font-size: var(--fin-fs-body); line-height: 1.5; }

/* ── Stub pages ────────────────────────────────────────────────────── */
.fin-stub-panel { align-items: center; text-align: center; padding: var(--fin-s-8) var(--fin-card-pad); }
.fin-stub-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--fin-r-pill); background: var(--fin-surface-2); color: var(--fin-text-2); margin: 0 auto var(--fin-s-3); }
.fin-stub-t { margin: 0; font-size: var(--fin-fs-body); color: var(--fin-text-2); max-width: 420px; margin-inline: auto; }
.fin-stub-ph { margin: var(--fin-s-2) 0 0; font-size: var(--fin-fs-meta); color: var(--fin-text-3); }

/* ── Dark-mode card elevation boost ───────────────────────────────────
   --fin-surface-1 sits only one notch above --fin-bg by design (see
   fin-tokens.css §3's own comment) — on its own that reads as flat in a
   screenshot. This file loads last (see index.php), so these overrides
   win the cascade: a visible ring (--fin-border-strong, already defined
   per-theme) + a soft top highlight + a heavier shadow make every card
   read as a distinct, lifted object specifically where it's needed most.
   Loaded for both the hydrated dark theme and the pre-hydration OS-dark
   first-paint state (fin-tokens.css §4). */
[data-theme="dark"] .fin-panel,
[data-theme="dark"] .fin-hcard,
[data-theme="dark"] .fin-jcard,
[data-theme="dark"] .fin-login-card {
  background-image: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 55%);
  box-shadow: 0 0 0 1px var(--fin-border-strong), 0 1px 0 0 rgba(255,255,255,.05) inset, var(--fin-shadow-pop);
}
[data-theme="dark"] .fin-panel.is-warn { box-shadow: 0 0 0 1px var(--fin-warn-soft), 0 1px 0 0 rgba(255,255,255,.05) inset, var(--fin-shadow-pop); }
[data-theme="dark"] .fin-panel.is-crit { box-shadow: 0 0 0 1px var(--fin-crit-soft), 0 1px 0 0 rgba(255,255,255,.05) inset, var(--fin-shadow-pop); }
[data-theme="dark"] .fin-jcard:hover {
  box-shadow: 0 0 0 1px var(--fin-accent-line), 0 1px 0 0 rgba(255,255,255,.06) inset, var(--fin-shadow-pop);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .fin-panel,
  :root:not([data-theme]) .fin-hcard,
  :root:not([data-theme]) .fin-jcard,
  :root:not([data-theme]) .fin-login-card {
    background-image: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 55%);
    box-shadow: 0 0 0 1px var(--fin-border-strong), 0 1px 0 0 rgba(255,255,255,.05) inset, var(--fin-shadow-pop);
  }
}

/* ── Emergency hard fallback (6 Oct 2026) — literal values, no var(),
   so rendering is correct even if custom-property resolution is somehow
   broken in a given browser/session. Remove once root-caused. ────────── */
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important; }
.fin-main { padding: 28px !important; }
.fin-home, .fin-jarvis, .fin-stub { gap: 24px !important; }
.fin-home-cards { gap: 16px !important; }
.fin-attn-list { gap: 8px !important; }
.fin-attn-row { padding: 12px !important; border-radius: 12px !important; background: #1A1E1C !important; }