/* ═══════════════════════════════════════════════════════════════════════════
   CLINICAL LEDGER — Design System
   Travi AI Agent · Company Hub
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Palette — Investor Data Room (docx spec) */
  --parchment:      #f8f9fa;   /* off-white page background */
  --parchment-dark: #eef1f4;
  --forest:         #0a1628;   /* deep navy — brand primary */
  --forest-mid:     #0077b6;   /* teal-blue accent */
  --forest-light:   #00b4d8;   /* bright teal accent */
  --forest-pale:    #e6f5fb;
  --slate:          #4a5a6c;
  --slate-light:    #8494a6;
  --slate-pale:     #d9e0e8;
  --ink:            #101828;
  --red:            #e74c3c;
  --amber:          #d97706;
  --amber-pale:     #fdf3e0;
  --sky:            #00b4d8;   /* lighter accent teal */
  --white:          #ffffff;

  /* Aliases used by embedded document content */
  --bg:             var(--parchment);
  --surface:        var(--white);
  --accent:         #0077b6;
  --accent-2:       #00b4d8;

  /* Typography */
  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono:   'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;

  /* Layout */
  --header-h:    52px;
  --rail-w:      0px;   /* no left rail — replaced by mega-panel */
  --content-max: 860px;
  --page-pad:    48px;

  /* Borders */
  --border:      #e1e7ee;
  --border-dark: #c9d3de;


  /* Aliases for legacy embedded-content tokens */
  --brand:     #0077b6;
  --brand-rgb: 0, 119, 182;
  --navy:      #0a1628;
  --fg:        #101828;
  --fg2:       #4a5a6c;
  --muted:     #8494a6;
  --line:      #e1e7ee;
  --hover:     #eef4f9;
  --radius:    10px;
  --sans:      var(--font-sans);
  --serif:     var(--font-serif);
  --mono:      var(--font-mono);

  /* Dot grid pattern */
  --dot-color:   #d4dce4;
}


/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-webkit-tap-highlight-color: transparent;

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background-color: var(--parchment);
  background-image: radial-gradient(circle, var(--dot-color) 0.8px, transparent 0.8px);
  background-size: 22px 22px;
  background-attachment: fixed;
  min-height: 100vh;
}


/* ── Password gate ────────────────────────────────────────────────────────── */
#pw-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--forest);
  background-image: radial-gradient(circle, rgba(255,255,255,0.10) 0.8px, transparent 0.8px);
  background-size: 22px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pw-box {
  background: var(--white);
  border: 1px solid var(--border-dark);
  padding: 48px 44px 40px;
  max-width: 420px;
  width: 100%;
}
.pw-logo {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 16px;
}
.pw-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.pw-sub {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--slate);
  margin-bottom: 28px;
  line-height: 1.5;
}
.pw-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-light);
  display: block;
  margin-bottom: 6px;
}
.pw-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border-dark);
  background: var(--parchment);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  padding: 0 12px;
  border-radius: 2px;
  outline: none;
  transition: border-color 0.15s;
  margin-bottom: 12px;
}
.pw-input:focus { border-color: var(--forest); }
.pw-btn {
  width: 100%;
  height: 40px;
  background: var(--forest);
  border: none;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s;
}
.pw-btn:hover { background: var(--forest-mid); }
.pw-btn:active { transform: scale(0.97); transition: transform 0.16s cubic-bezier(0.23,1,0.32,1); }
.pw-error {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--red);
  margin-top: 10px;
  min-height: 16px;
  letter-spacing: 0.06em;
}
.pw-footer {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--slate-pale);
  margin-top: 28px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }



/* ── Skip link: visually hidden until keyboard focus ──────────────────── */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--forest);
  color: #fff;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
}
.skip:focus { left: 0; }

/* ── Wrong-password shake (Fix 7) ─────────────────────────────────────── */
@keyframes pw-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.pw-input.shake { animation: pw-shake 0.3s ease; }
.pw-input.error { border-color: var(--red) !important; }