/* ============================================================
   Author & Student Portal — Brand Design System
   Palette: Navy Blue · Yellow Gold · Crisp White · Deep Gray
   Minimalist corporate aesthetic
   ============================================================ */

:root {
  --navy:        #0B2545;
  --navy-700:    #13315C;
  --navy-100:    #E8EDF4;
  --gold:        #C9A227;
  --gold-600:    #B08E1E;
  --gold-soft:   #F5ECCB;
  --white:       #FFFFFF;
  --paper:       #FBFBF9;
  --ink:         #2B2B2B;   /* deep gray text */
  --ink-soft:    #5A6472;
  --border:      #E4E7EC;
  --ok:          #1B7F4B;
  --bad:         #B3261E;
  --shadow:      0 1px 2px rgba(11,37,69,.06), 0 8px 24px rgba(11,37,69,.06);
  --radius:      12px;
  --maxw:        1120px;
  --font: "Helvetica Neue", Arial, "Segoe UI", system-ui, sans-serif;
}

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

/* read-only / no-select defaults (reinforced by security.js) */
body, .lock { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }  /* allow typing in tools */

a { color: var(--navy-700); text-decoration: none; }
h1,h2,h3 { color: var(--navy); line-height: 1.25; margin: 0 0 .4em; font-weight: 700; }
h1 { font-size: 1.9rem; letter-spacing: -.01em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
small { color: var(--ink-soft); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy);
  color: var(--white);
  border-bottom: 3px solid var(--gold);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--gold); color: var(--navy);
  display: grid; place-items: center; font-weight: 800; font-size: 1rem;
}
.brand .name { color: var(--white); font-weight: 700; font-size: .98rem; letter-spacing: .02em; }
.brand .sub  { color: #9FB2CC; font-size: .72rem; display: block; }
.topbar nav a { opacity:.85; color:#D9E3F0; margin-left: 18px; font-size: .85rem; }
.topbar nav a:hover { opacity: 1; color: var(--gold); }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-700) 100%); color: var(--white); padding: 56px 0; }
.hero h1 { color: var(--white); max-width: 760px; }
.hero p  { color: #D2DCEA; max-width: 680px; }
.eyebrow { color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }

/* ---------- Cards / sections ---------- */
.section { padding: 40px 0; }
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}
.card + .card { margin-top: 22px; }
.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px){ .grid.cols-2,.grid.cols-3,.grid.cols-4 { grid-template-columns: 1fr; } }

.section-label {
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#7A6212; background:var(--gold-soft);
  border:1px solid #EAD89A; padding:4px 10px; border-radius:999px; margin-bottom:14px;
}

/* ---------- Chapter cards ---------- */
.chip-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
@media (max-width: 820px){ .chip-grid { grid-template-columns: 1fr; } }
.chapter-card {
  display:block; background:var(--white); border:1px solid var(--border);
  border-left:4px solid var(--gold); border-radius:10px; padding:16px 18px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.chapter-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-left-color: var(--navy); }
.chapter-card .n { font-size:.72rem; color:var(--ink-soft); font-weight:700; letter-spacing:.1em; }
.chapter-card .t { color:var(--navy); font-weight:700; margin-top:4px; }
.chapter-card.locked { opacity:.55; border-left-color:#CBD2DC; cursor:not-allowed; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background: var(--gold); color: var(--navy); font-weight: 700;
  border: 0; border-radius: 10px; padding: 12px 20px; font-size: .92rem;
}
.btn:hover { background: var(--gold-600); color: var(--navy); }
.btn.secondary { background: var(--navy); color: var(--white); }
.btn.secondary:hover { background: var(--navy-700); }
.btn.ghost { background: transparent; color: var(--navy); border:1px solid var(--border); }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ---------- Forms ---------- */
label.fld { display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin:0 0 6px; }
input[type=text], input[type=password], input[type=number], select {
  width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:9px;
  font-size:.95rem; color:var(--ink); background:var(--white); font-family:inherit;
}
input:focus, select:focus { outline:2px solid var(--gold); border-color:var(--gold); }

/* ---------- Tables / ledger ---------- */
table.ledger { width:100%; border-collapse:collapse; font-size:.92rem; }
table.ledger th, table.ledger td { padding:9px 10px; border-bottom:1px solid var(--border); text-align:left; }
table.ledger th { background:var(--navy-100); color:var(--navy); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
table.ledger td.num input { text-align:right; }
table.ledger tfoot td { font-weight:700; background:var(--paper); border-top:2px solid var(--navy); }
.amt { text-align:right; font-variant-numeric: tabular-nums; }

/* ---------- Status pills / feedback ---------- */
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700; }
.pill.ok  { background:#E6F4EC; color:var(--ok); }
.pill.bad { background:#FBEAE9; color:var(--bad); }
.note { background:var(--navy-100); border-left:4px solid var(--navy); padding:12px 14px; border-radius:8px; font-size:.9rem; }
.warn { background:#FFF8E6; border-left:4px solid var(--gold); padding:12px 14px; border-radius:8px; font-size:.88rem; color:#6b5a16; }

/* ---------- Decision tree / illustration ---------- */
.tree { display:flex; flex-direction:column; gap:0; }
.tree .node {
  border:1px solid var(--border); border-radius:10px; padding:14px 16px; background:var(--white);
  position:relative;
}
.tree .q { font-weight:700; color:var(--navy); }
.tree .branch { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; }
@media(max-width:640px){ .tree .branch{ grid-template-columns:1fr; } }
.tree .leaf { border-left:4px solid var(--gold); background:var(--gold-soft); border-radius:8px; padding:10px 12px; font-size:.9rem; }

/* matrix / map */
.matrix { display:grid; gap:10px; }
.matrix .row { display:grid; grid-template-columns: 200px 1fr; gap:12px; align-items:start; }
@media(max-width:640px){ .matrix .row{ grid-template-columns:1fr; } }
.matrix .key { font-weight:700; color:var(--navy); background:var(--navy-100); padding:10px 12px; border-radius:8px; }
.matrix .val { padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--white); }

/* ---------- Quiz ---------- */
.q-item { border:1px solid var(--border); border-radius:10px; padding:18px; margin-bottom:14px; background:var(--white); }
.q-item .stem { font-weight:600; color:var(--ink); margin-bottom:12px; }
.opt { display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border:1px solid var(--border); border-radius:8px; margin-bottom:8px; cursor:pointer; }
.opt:hover { border-color:var(--gold); background:var(--paper); }
.opt input { margin-top:3px; }
.opt.correct { border-color:var(--ok); background:#EFF8F2; }
.opt.wrong   { border-color:var(--bad); background:#FCEFEE; }
.rationale { display:none; margin-top:10px; font-size:.9rem; color:var(--ink-soft); border-top:1px dashed var(--border); padding-top:10px; }
.rationale.show { display:block; }
.score-card { text-align:center; padding:24px; border:2px solid var(--gold); border-radius:12px; background:var(--gold-soft); }
.score-card .big { font-size:2.4rem; font-weight:800; color:var(--navy); }

/* ---------- Manuscript vault ---------- */
.vault { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--navy); }
.vault .bar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; color:var(--white); }
.vault .lockmsg { color:#9FB2CC; font-size:.8rem; }
.vault .frame { height:520px; background:#1b2b3f; display:grid; place-items:center; color:#9FB2CC; }

/* ---------- Footer ---------- */
.foot { border-top:1px solid var(--border); margin-top:40px; padding:26px 0; color:var(--ink-soft); font-size:.82rem; }

/* ---------- Modal / gate ---------- */
.gate { position:fixed; inset:0; background:rgba(11,37,69,.92); display:grid; place-items:center; z-index:999; }
.gate .panel { background:var(--white); border-radius:14px; padding:30px; width:min(420px,92vw); box-shadow:var(--shadow); border-top:4px solid var(--gold); }
.hidden { display:none !important; }

/* Fail-closed gating: on gated pages, content is hidden by pure CSS until
   JS confirms access and adds .unlocked to <body>. Disabling JS therefore
   leaves the gate up and the content hidden. */
body.gated main, body.gated .reader { display:none; }
body.gated.unlocked main, body.gated.unlocked .reader { display:block; }

/* ---------- Print kill ---------- */
@media print { html, body { display:none !important; } }