/* ======================================================================
   MR. LONG'S SCIENCE CLASS — shared stylesheet
   One file controls the look of the whole site. Every page loads this.
   If you want to change a color everywhere, change it once in :root below.
   ====================================================================== */

:root{
  /* ------------------------------------------------------------------
     VIBRANT TONES — the palette from the swatch sheet. These ten are
     the only colors used on the site; everything else is white or a
     neutral line. Change one here and it changes everywhere.
     ------------------------------------------------------------------ */
  --vt-red:#F94144;
  --vt-orange:#F3722C;
  --vt-amber:#F8961E;
  --vt-peach:#F9844A;
  --vt-yellow:#F9C74F;
  --vt-green:#90BE6D;
  --vt-teal:#43AA8B;
  --vt-sea:#4D908E;
  --vt-slate:#577590;
  --vt-blue:#277DA1;
  --vt-black:#2D2D2F;

  /* ---- how the palette is used ---- */
  --bg:#ffffff;          /* the page is white */
  --card:#ffffff;
  --surface:#fafbfb;     /* the faintest grey, for table headers etc. */
  --ink:var(--vt-black);
  --muted:var(--vt-slate);
  --line:#e7eaec;

  --accent:var(--vt-blue);
  --accent-soft:#e9f3f6;
  --focus:#a8cddd;

  --good:var(--vt-teal);
  --good-bg:#ecf7f4;
  --bad:var(--vt-red);
  --bad-bg:#feecec;
  --warn:var(--vt-amber);
  --warn-bg:#fef5e9;
  --warn-ink:#8a5209;

  --shadow:0 1px 2px rgba(45,45,47,.04), 0 8px 24px rgba(45,45,47,.06);
  --radius:14px;

  /* Biology reads green, Anatomy reads red — both straight from the sheet. */
  --bio:var(--vt-teal);
  --bio-soft:#ecf7f4;
  --ana:var(--vt-red);
  --ana-soft:#feecec;
}

*{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  line-height:1.45;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a{ color:var(--accent); }

/* ---------- layout ---------- */
.wrap{ max-width:940px; margin:0 auto; padding:0 16px 72px; }
.wrap-narrow{ max-width:760px; }

.topbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:18px 0; border-bottom:1px solid var(--line); margin-bottom:28px;
}

/* A thin band of the whole palette — used on the front page's card. */
.spectrum{ display:flex; height:5px; border-radius:999px; overflow:hidden; }
.spectrum span{ flex:1 1 0; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem; letter-spacing:-.01em; text-decoration:none; color:var(--ink); }
.brand .dot{ width:12px; height:12px; border-radius:50%; background:var(--accent); flex:none; }
.brand .dot.bio{ background:var(--bio); }
.brand .dot.ana{ background:var(--ana); }
.spacer{ flex:1 1 auto; }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; font-weight:700; padding:6px 12px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); border:1px solid transparent; text-decoration:none;
}
.chip.bio{ background:var(--bio-soft); color:var(--bio); }
.chip.ana{ background:var(--ana-soft); color:var(--ana); }
.chip.ghost{ background:#fff; color:var(--muted); border-color:var(--line); }
.chip.ghost:hover{ color:var(--ink); border-color:var(--muted); }
button.chip{ cursor:pointer; font-family:inherit; }

/* ---------- hero ---------- */
.hero{ padding:12px 0 26px; }
.hero h1{ font-size:2.15rem; line-height:1.15; letter-spacing:-.02em; margin:0 0 8px; }
.hero p{ color:var(--muted); margin:0; font-size:1.02rem; max-width:62ch; }
.eyebrow{
  display:inline-block; font-size:.76rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin:0 0 10px;
}

/* ---------- cards ---------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:12px;
}

.grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(275px, 1fr)); align-items:stretch; }
/* Keeps a lone card from stretching the whole width of the page. */
.grid > *{ max-width:440px; }
.grid > .empty{ max-width:none; }

.tile{
  position:relative; display:flex; flex-direction:column; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 20px 18px; text-decoration:none; color:inherit;
  box-shadow:var(--shadow); overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tile:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(45,45,47,.05), 0 16px 32px rgba(45,45,47,.09); border-color:#d3d8dc; }
.tile:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tile .stripe{ position:absolute; inset:0 0 auto 0; height:4px; background:var(--accent); }
.tile .stripe.bio{ background:var(--bio); }
.tile .stripe.ana{ background:var(--ana); }
.tile .icon{ font-size:1.9rem; line-height:1; margin-bottom:2px; }
.tile h3{ margin:0; font-size:1.12rem; letter-spacing:-.01em; }
.tile p{ margin:0; color:var(--muted); font-size:.92rem; }
.tile .cta{ margin-top:8px; font-weight:700; font-size:.9rem; color:var(--accent); }
.tile.bio .cta{ color:var(--bio); }
.tile.ana .cta{ color:var(--ana); }

.tile.locked{ cursor:pointer; background:var(--surface); border-style:dashed; box-shadow:none; }
.tile.locked:hover{ transform:none; box-shadow:none; border-color:var(--muted); }
.tile.locked .stripe{ background:var(--line); }
.tile.locked .icon{ filter:grayscale(1); opacity:.55; }
.tile.locked h3{ color:var(--muted); }
.tile.locked .cta{ color:var(--muted); }

.tag{
  display:inline-block; align-self:flex-start; font-size:.7rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:6px;
  background:var(--surface); border:1px solid var(--line); color:var(--muted); margin-bottom:2px;
}
.tag.due{ background:var(--warn-bg); border-color:transparent; color:var(--warn-ink); }

.empty{
  grid-column:1/-1; text-align:center; color:var(--muted);
  border:1px dashed var(--line); border-radius:var(--radius); padding:38px 20px; background:var(--surface);
}

.notice{
  border:1px solid var(--warn); background:var(--warn-bg); color:var(--warn-ink);
  border-radius:var(--radius); padding:12px 16px; margin-bottom:20px; font-size:.95rem;
}
.notice strong{ display:block; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:2px; }

/* ---------- forms ---------- */
label{ display:block; font-weight:700; margin-bottom:6px; }
input[type="text"], input[type="password"], input[type="number"], select, textarea{
  width:100%; font-size:1rem; font-family:inherit; padding:10px 12px;
  border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
}
select:focus, input:focus, textarea:focus, button:focus-visible{ outline:3px solid var(--focus); outline-offset:1px; }

.field-row{ display:grid; gap:12px; grid-template-columns:2fr 1fr; }
@media (max-width:540px){ .field-row{ grid-template-columns:1fr; } }

button{
  font-size:1rem; font-weight:700; font-family:inherit; padding:12px 20px;
  border-radius:9px; border:0; cursor:pointer; background:var(--accent); color:#fff;
}
button:hover{ filter:brightness(1.06); }
button:disabled{ opacity:.55; cursor:not-allowed; filter:none; }
button.secondary{ background:#fff; color:var(--accent); border:2px solid var(--accent); padding:10px 18px; }
button.small{ font-size:.85rem; padding:7px 13px; }
button.danger{ background:#fff; color:var(--bad); border:2px solid var(--bad); }

.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }

.err{ color:var(--bad); font-weight:600; min-height:1.2em; margin-top:8px; font-size:.95rem; }
.ok{ color:var(--good); font-weight:600; min-height:1.2em; margin-top:8px; font-size:.95rem; }
.err:empty, .ok:empty{ min-height:0; margin-top:0; }
.hint{ color:var(--muted); font-size:.88rem; }

/* ---------- gate ---------- */
.gate{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.gate-card{
  position:relative; overflow:hidden;
  width:100%; max-width:420px; background:var(--card); border:1px solid var(--line);
  border-radius:20px; padding:38px 30px 34px; box-shadow:var(--shadow); text-align:center;
}
/* The full palette as a thin band across the top of the card. */
.gate-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg,
    var(--vt-red), var(--vt-orange), var(--vt-amber), var(--vt-peach),
    var(--vt-yellow), var(--vt-green), var(--vt-teal), var(--vt-sea),
    var(--vt-slate), var(--vt-blue));
}
.gate-card .icon{ font-size:2.6rem; }
.gate-card h1{ font-size:1.6rem; margin:10px 0 6px; letter-spacing:-.02em; }
.gate-card p{ color:var(--muted); margin:0 0 20px; font-size:.95rem; }
.gate-card form{ text-align:left; }
.gate-card button{ width:100%; margin-top:12px; }

/* ---------- table ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
table{ border-collapse:collapse; width:100%; font-size:.93rem; }
th, td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
th{ background:var(--surface); font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); position:sticky; top:0; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr.clickable{ cursor:pointer; }
tbody tr.clickable:hover{ background:var(--surface); }
td.wrap-cell{ white-space:normal; }

.pill{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:.78rem; font-weight:700; }
.pill.bio{ background:var(--bio-soft); color:var(--bio); }
.pill.ana{ background:var(--ana-soft); color:var(--ana); }
.pill.good{ background:var(--good-bg); color:var(--good); }
.pill.mid{ background:var(--warn-bg); color:var(--warn-ink); }
.pill.bad{ background:var(--bad-bg); color:var(--bad); }

.stats{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-bottom:18px; }
.stat{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.stat .n{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; }
.stat .k{ font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }

/* ---------- footer ---------- */
.foot{ margin-top:40px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
.foot a{ color:var(--muted); }

/* ---------- misc ---------- */
.reveal{ animation:fade .45s ease both; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .reveal{ animation:none; } .tile{ transition:none; } }

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

@media print{
  body{ background:#fff; }
  .topbar, .actions, .foot, .no-print{ display:none !important; }
  .tile, .card{ box-shadow:none; }
}