/* ================================
   MedMinds — Design System
   Single source of truth for all
   authenticated pages (login, dashboard,
   series, papers, exam, results, history).
   The landing page uses the same tokens
   inline so the two stay in sync.
================================= */
:root{
  /* Brand */
  --pine: #0F6B5C;
  --pine-dark: #0A4B40;
  --coral: #E86A4D;
  --gold: #C9A227;

  /* Subject colors — Physics/Coral, Chemistry/Blue, Biology/Green.
     (The brand pine/coral/gold stay as-is; subject color is a
     per-context decision, not a token swap.) */
  --blue: #4A7AB5;
  --blue-tint: #DDE7F2;
  --green: #6FA85E;
  --green-tint: #E0EFD8;

  /* Surfaces */
  --bg: #FAF8F3;
  --surface: #FFFFFF;
  --surface-soft: #F3F0E6;
  --line: #E1DCCF;

  /* Text */
  --ink: #1B2B26;
  --ink-soft: #4C5C57;
  --ink-faint: #8A9B94;

  /* Semantic (derived) */
  --primary: var(--pine);
  --primary-dark: var(--pine-dark);
  --primary-tint: #D8ECE3;
  --success: #1E8F6F;
  --success-tint: #DFF3EA;
  --danger: var(--coral);
  --danger-tint: #FBE3DE;
  --gold-tint: #F3E7D2;

  /* Geometry */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(27,43,38,.06);
  --shadow-md: 0 20px 40px -20px rgba(27,43,38,.18);
  --shadow-lg: 0 30px 60px -24px rgba(27,43,38,.22);

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,.display{
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px 0;
}
h1{ font-size: 2.1rem; line-height: 1.15; }
h2{ font-size: 1.5rem; line-height: 1.2; }
h3{ font-size: 1.1rem; line-height: 1.3; }
h1 em, h2 em, h3 em{ font-style: italic; color: var(--pine); font-weight: 500; }
p{ margin: 0 0 12px 0; color: var(--ink-soft); }
a{ color: var(--pine); text-decoration: none; }
a:hover{ color: var(--pine-dark); }
.mono{ font-family: var(--font-mono); }

/* ---------- Buttons ---------- */
button, .btn{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  border: none;
  border-radius: var(--radius-pill);
  padding: 11px 22px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible{
  outline: 2px solid var(--pine);
  outline-offset: 2px;
}
.btn-primary{ background: var(--pine); color: #fff; box-shadow: 0 1px 2px rgba(15,107,92,.2); }
.btn-primary:hover{ background: var(--pine-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,107,92,.28); }
.btn-coral{ background: var(--coral); color: #fff; }
.btn-coral:hover{ background: #d15a3e; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(232,106,77,.3); }
.btn-ghost{ background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover{ border-color: var(--pine); color: var(--pine); }
.btn-danger-ghost{ background: transparent; color: var(--coral); border: 1.5px solid var(--danger-tint); }
.btn-small{ padding: 8px 14px; font-size: .82rem; }
button:disabled{ opacity: .5; cursor: not-allowed; transform:none; }

/* ---------- Forms ---------- */
input, select, textarea{
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--pine);
  box-shadow: 0 0 0 3px rgba(15,107,92,.12);
  outline: none;
}
input::placeholder, textarea::placeholder{ color: var(--ink-faint); }
label{ font-size: .8rem; font-weight: 700; color: var(--ink-soft); display:block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.field{ margin-bottom: 16px; }

/* ---------- Cards ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}
.card-hoverable:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ---------- Pills / Tags ---------- */
.pill{
  display: inline-flex; align-items:center; gap:6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-size: .74rem; font-weight: 700; letter-spacing:.02em;
}
  .pill-success{ background: var(--success-tint); color: var(--success); }
  .pill-danger{ background: var(--danger-tint); color: var(--coral); }
  .pill-gold{ background: var(--gold-tint); color: #8a6c12; }
  .pill-pine{ background: var(--primary-tint); color: var(--pine-dark); }
  .pill-coral{ background: var(--danger-tint); color: #B84C33; }
  /* Subject pills — match the subject color code (coral / blue / green) */
  .pill-phy{ background: var(--coral); color: #fff; }
  .pill-chem{ background: var(--blue);  color: #fff; }
  .pill-bio{ background: var(--green); color: #fff; }

/* ---------- App shell (sidebar layout for authenticated pages) ---------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width: 260px; flex-shrink:0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 26px 20px;
  display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh;
}
.brand{ display:flex; align-items:center; gap:10px; padding: 2px 4px 24px 4px; }
.brand-mark{ width:30px; height:30px; flex-shrink:0; }
.brand-name{ font-family: var(--font-display); font-weight:600; font-size:1.15rem; color: var(--ink); letter-spacing:-.01em; }
.nav-group{ display:flex; flex-direction:column; gap:2px; margin-bottom: 18px; }
.nav-group-label{ font-size: .68rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; padding: 10px 12px 4px 12px; }
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--ink-soft); font-weight:600; font-size:.88rem;
  transition: background .15s ease, color .15s ease;
}
.nav-item svg{ width:18px; height:18px; flex-shrink:0; }
.nav-item:hover{ background: var(--primary-tint); color: var(--pine-dark); }
.nav-item.active{ background: var(--pine); color: #fff; }
.nav-item.active:hover{ background: var(--pine-dark); color: #fff; }
.sidebar-foot{ margin-top:auto; padding-top: 14px; border-top:1px solid var(--line); }
.user-chip{ display:flex; align-items:center; gap:10px; padding: 10px 8px; border-radius: var(--radius-sm); }
.avatar{
  width:36px; height:36px; border-radius:50%;
  background: var(--pine); color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.82rem; flex-shrink:0;
}
.user-chip .u-name{ font-weight:700; font-size:.85rem; color: var(--ink); }
.user-chip .u-plan{ font-size:.72rem; color: var(--ink-faint); }
.sidebar-foot .nav-item{ padding: 8px 10px; font-size: .82rem; }

.main{ flex:1; padding: 36px 44px; max-width: 1180px; }

/* Opt a page out of the 1180px cap to use the full viewport width
   (e.g. the operator panel and the attempt detail page). Set the
   class via `document.body.classList.add('att-page')` in the page's
   inline script. */
body.att-page .main{
  max-width: 100%;
  padding: 36px 44px;
}
@media (max-width: 1100px){
  body.att-page .main{ padding: 28px 32px; }
}
@media (max-width: 860px){
  body.att-page .main{ padding: 20px 16px 90px 16px; }
}
/ Cap on 4K / ultra-wide monitors so the content doesn't stretch absurdly. */
@media (min-width: 1800px){
  body.att-page .main{ max-width: 1720px; margin: 0 auto; }
}
.page-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom: 28px; }
.page-head h1{ margin-bottom: 4px; }
.page-head p{ margin: 0; color: var(--ink-soft); }
.page-head .actions{ display:flex; gap:10px; align-items:center; }

.mobile-nav{ display:none; }

@media (max-width: 860px){
  .sidebar{ display:none; }
  .main{ padding: 20px 16px 90px 16px; }
  .page-head{ flex-direction: column; align-items: flex-start; }
  .mobile-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0;
    background: var(--surface); border-top:1px solid var(--line);
    justify-content: space-around; padding: 8px 4px 10px 4px; z-index: 50;
  }
  .mobile-nav a{ display:flex; flex-direction:column; align-items:center; gap:3px; color: var(--ink-faint); font-size:.66rem; font-weight:700; padding: 6px 8px; border-radius: 8px; }
  .mobile-nav a.active{ color: var(--pine); background: var(--primary-tint); }
  .mobile-nav svg{ width:20px; height:20px; }
}

/* ---------- Pulse divider (signature MedMinds motif) ---------- */
.pulse-divider{ width:100%; height: 28px; margin: 20px 0; opacity: .55; }
.pulse-divider path{ stroke: var(--pine); }

/* ---------- Stat cards / metrics ---------- */
.grid{ display:grid; gap: 18px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px){ .grid-3, .grid-4{ grid-template-columns: 1fr; } .grid-2{ grid-template-columns: 1fr; } }

.stat-card{ padding: 20px 22px; }
.stat-num{ font-family: var(--font-display); font-size: 2rem; color: var(--pine-dark); line-height:1.1; }
.stat-label{ font-size: .82rem; color: var(--ink-soft); font-weight:600; margin-top:6px; }
.stat-sub{ font-size: .72rem; color: var(--ink-faint); margin-top: 2px; }

.empty-state{ text-align:center; padding: 60px 20px; color: var(--ink-soft); }
.empty-state h3{ color: var(--ink); margin-bottom: 6px; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom: 24px; right: 24px;
  background: var(--ink); color: #fff;
  padding: 14px 20px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); font-weight:600; font-size:.88rem;
  opacity:0; transform: translateY(12px); transition: all .25s ease;
  pointer-events:none; z-index: 200;
}
.toast.show{ opacity:1; transform:translateY(0); }

/* ---------- Reveal-on-scroll (matches landing) ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- Animations shared with landing ---------- */
@keyframes riseIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

/* ---------- Tables ---------- */
.table-clean{ width:100%; border-collapse: collapse; }
.table-clean th, .table-clean td{ padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.table-clean th{ font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); font-weight: 700; }
.table-clean tr:last-child td{ border-bottom: none; }
.table-clean tr:hover td{ background: var(--primary-tint); }

/* ---------- Progress / meters ---------- */
.meter{ height: 8px; background: var(--surface-soft); border-radius: 4px; overflow: hidden; }
.meter > span{ display:block; height: 100%; background: var(--pine); border-radius: 4px; }
.meter.coral > span{ background: var(--coral); }
.meter.gold > span{ background: var(--gold); }