:root {
  --ink: #1a1a1a;
  --paper: #f5f1e8;
  --paper-2: #ebe5d3;
  --paper-3: #e0d8c4;
  --accent: #c2410c;
  --accent-2: #0f766e;
  --error: #b91c1c;
  --success: #15803d;
  --warn: #a16207;
  --muted: #6b6258;
  --cell-dsc: #fff7d6;
  --cell-mic: #f0f5dc;
  --cell-mdc: #dde6f3;
  --cell-aec: #e8efc9;
  --cell-vac: #ececec;
  --cell-sec: #f6dbe1;
  --cell-mic-v: #f0e6dc;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(194,65,12,0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(15,118,110,0.04) 0%, transparent 40%);
}
.grain::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.06; z-index: 999;
}
header.banner {
  border-bottom: 2px solid var(--ink);
  padding: 24px 40px 20px;
  background: var(--paper);
  display: flex; justify-content: space-between; align-items: flex-end;
}
.brand { display: flex; flex-direction: column; gap: 4px; }
.brand .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}
.brand h1 {
  font-family: 'Fraunces', serif; font-weight: 800;
  font-size: 36px; letter-spacing: -0.02em; line-height: 1;
}
.brand h1 em { color: var(--accent); font-style: italic; font-weight: 400; }

main { display: block; max-width: 1400px; margin: 0 auto; padding: 40px; }

.profile-strip {
  background: #fff; border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 18px 26px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 24px; align-items: center;
  margin-bottom: 22px;
}
.profile-strip .name { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; }
.profile-strip .meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); letter-spacing: 0.05em; }

.locked-banner {
  background: var(--ink); color: var(--paper);
  padding: 12px 18px;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.1em;
}

/* Year-grouped sem tabs */
.year-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.year-label {
  font-family: 'Fraunces', serif;
  font-size: 14px; color: var(--muted);
  font-style: italic;
  padding: 0 12px 14px 0;
}
.sem-tab {
  background: var(--paper); border: 2px solid var(--ink); border-bottom: none;
  padding: 14px 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: all 0.12s;
  margin-right: -2px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  min-width: 110px;
  text-decoration: none; color: var(--ink);
}
.sem-tab .num { font-weight: 600; font-size: 14px; }
.sem-tab .sub { font-size: 9px; color: var(--muted); }
.sem-tab.active { background: var(--ink); color: var(--paper); }
.sem-tab.active .sub { color: rgba(245,241,232,0.6); }
.sem-tab.locked { color: var(--muted); cursor: not-allowed; background: var(--paper-2); pointer-events: none; }
.sem-tab.complete { color: #16a34a; }
.sem-tab.complete .num::after { content: ' \2713'; }
.sem-tab.complete .sub { color: #16a34a; }
.sem-tab.finalized { background: var(--paper-2); }
.sem-tab.finalized .num::after { content: ' \1f512'; font-size: 10px; }
.sem-tab.finalized .sub { color: var(--muted); }

/* Semester body */
.sem-body {
  background: #fff;
  border: 2px solid var(--ink); border-top: none;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 28px 32px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cell {
  border: 1px solid var(--ink);
  padding: 18px 20px;
  min-height: 160px;
  display: flex; flex-direction: column;
  position: relative;
}
.cell .cell-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--muted); text-transform: uppercase;
}
.cell h3 {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 22px; margin: 4px 0 6px 0;
}
.cell .desc { font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1; }
.cell .pick {
  font-family: 'Fraunces', serif; font-size: 16px;
  background: rgba(255,255,255,0.7);
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  margin: 8px 0 10px 0;
}
.cell .pick .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.15em;
  color: var(--muted); text-transform: uppercase;
  margin-bottom: 2px; display: block;
}
.cell .footer {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.cell.dsc-cell  { background: var(--cell-dsc); }
.cell.mic-cell  { background: var(--cell-mic); }
.cell.mdc-cell  { background: var(--cell-mdc); }
.cell.aec-cell  { background: var(--cell-aec); }
.cell.vac-cell  { background: var(--cell-vac); }
.cell.sec-cell  { background: var(--cell-sec); }
.cell.micv-cell { background: var(--cell-mic-v); }
.cell.placeholder-cell { background: var(--paper-2); }
.cell.not-offered {
  background: repeating-linear-gradient(45deg, #f0ede2 0 8px, #ebe6d6 8px 16px);
  color: var(--muted);
}
.cell.not-offered h3 { color: var(--muted); }

.dsc-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.dsc-list .item .dsc-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.15em;
  color: var(--muted); text-transform: uppercase;
}
.dsc-list .item .dsc-val { font-family: 'Fraunces', serif; font-size: 16px; margin-top: 2px; }

.status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px; border: 1px solid;
}
.status.pending  { color: var(--muted); border-color: var(--muted); }
.status.submitted{ color: var(--success); border-color: var(--success); background: rgba(21,128,61,0.06); }
.status.locked   { color: var(--ink); border-color: var(--ink); }
.status.na       { color: var(--muted); border-color: var(--muted); opacity: 0.6; }

button.primary, button.secondary, a.primary, a.secondary {
  cursor: pointer; transition: all 0.15s;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase; letter-spacing: 0.1em;
  text-decoration: none;
  display: inline-block;
}
.primary {
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink);
  padding: 8px 16px; font-size: 11px;
}
.primary:hover { background: var(--accent); border-color: var(--accent); }
.primary:disabled { background: var(--paper-3); border-color: var(--paper-3); color: var(--muted); cursor: not-allowed; }
.secondary {
  background: transparent; color: var(--ink); border: 2px solid var(--ink);
  padding: 8px 16px; font-size: 11px;
}
.secondary:hover { background: var(--paper-2); }

/* Onboard / login card */
.onboard {
  background: #fff; border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 32px 36px;
}
.onboard h2 { font-family: 'Fraunces', serif; font-size: 26px; margin-bottom: 8px; }
.onboard .help { color: var(--muted); font-size: 14px; margin-bottom: 20px; max-width: 540px; line-height: 1.5; }
.onboard .nav { display: flex; justify-content: flex-end; margin-top: 22px; }

label.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
label.field span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--muted); text-transform: uppercase;
}
input, select {
  border: 1px solid var(--ink); background: var(--paper);
  padding: 10px 12px;
  font-family: 'Inter', sans-serif; font-size: 14px;
  width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Picker chips */
.pool {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.chip {
  border: 1px solid var(--ink); padding: 12px 14px;
  cursor: pointer; background: var(--paper);
  transition: all 0.12s;
  text-align: left;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
}
.chip:hover:not(:disabled):not(.blocked) {
  background: var(--paper-2); transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--ink);
}
.chip.selected { background: var(--ink); color: var(--paper); transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--accent); }
.chip.blocked, .chip:disabled {
  background: repeating-linear-gradient(45deg, var(--paper) 0 6px, #e0d8c4 6px 12px);
  color: var(--muted); cursor: not-allowed; opacity: 0.7;
}
.chip-name { font-weight: 600; font-size: 14px; }
.chip-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); letter-spacing: 0.05em; margin-top: 3px; text-transform: uppercase; }
.chip.selected .chip-meta { color: rgba(245,241,232,0.6); }
.chip .why { display: block; margin-top: 6px; font-size: 11px; color: var(--error); font-style: italic; }

@media (max-width: 800px) {
  .grid { grid-template-columns: 1fr; }
  .year-row { overflow-x: auto; }
  .sem-tab { min-width: 100px; }
  .dsc-list { grid-template-columns: 1fr; }
}

/* ============================================================
   Picker — select-then-submit additions  (2026-05-08)
   ============================================================ */

/* The chip is now a <label>, not a button. */
label.chip {
  display: block;
  user-select: none;
}

/* Hide the underlying radio — the chip itself shows selection state */
.chip-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Chip with its radio checked = same look as old .chip.selected */
label.chip:has(input.chip-radio:checked) {
  background: var(--ink);
  color: var(--paper);
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--accent);
}
label.chip:has(input.chip-radio:checked) .chip-meta {
  color: rgba(245, 241, 232, 0.6);
}

/* Hover affordance for label-chips */
label.chip:not(.blocked):hover {
  background: var(--paper-2);
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--ink);
}
/* Re-assert checked look on hover */
label.chip:has(input.chip-radio:checked):hover {
  background: var(--ink);
  box-shadow: 2px 2px 0 var(--accent);
}

/* Blocked chips */
label.chip.blocked {
  cursor: not-allowed;
  opacity: 0.7;
}
label.chip.blocked:hover {
  transform: none;
  box-shadow: none;
  background: repeating-linear-gradient(45deg, var(--paper) 0 6px, #e0d8c4 6px 12px);
}

/* Bottom action bar */
.picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--paper-2);
}

/* Disabled Submit button */
.picker-actions button.primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.picker-actions button.primary:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ============================================================
   Consolidated subjects page
   ============================================================ */

.consol-sem {
  margin-bottom: 28px;
}
.consol-sem-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
}
.consol-sem-num {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 20px;
}
.consol-sem-empty {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.05em;
  font-style: italic;
}
.consol-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ink);
  background: #fff;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 13px;
}
.consol-table thead {
  background: var(--ink);
  color: var(--paper);
}
.consol-table th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 14px;
  text-align: left;
}
.consol-table td {
  padding: 10px 14px;
  border-top: 1px solid var(--paper-3);
}
.consol-table tr:hover td {
  background: var(--paper);
}
.consol-table tr.consol-dsc td {
  background: var(--cell-dsc);
  font-style: italic;
  color: var(--muted);
}
.consol-comp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--paper-2);
  padding: 2px 8px;
  border: 1px solid var(--paper-3);
}
.consol-table .mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.consol-table .center {
  text-align: center;
}

@media (max-width: 800px) {
  .consol-table { font-size: 12px; }
  .consol-table th, .consol-table td { padding: 8px 10px; }
}

/* ============================================================
   Notifications page
   ============================================================ */

.notif-list { display: flex; flex-direction: column; gap: 16px; }
.notif-card {
  background: #fff;
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 20px 24px;
}
.notif-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 8px;
}
.notif-header h3 { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; }
.notif-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted); letter-spacing: 0.05em;
  white-space: nowrap;
}
.notif-meta {
  display: flex; gap: 8px; align-items: center; margin-bottom: 10px;
  font-size: 13px; color: var(--muted);
}
.notif-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.08em;
  background: var(--paper-2); border: 1px solid var(--paper-3);
  padding: 2px 8px;
}
.notif-badge.broadcast { background: var(--cell-dsc); border-color: #e0d4a8; }
.notif-body { font-size: 14px; line-height: 1.6; color: var(--ink); }
.notif-attach { margin-top: 12px; }

/* ============================================================
   Academics page (attendance + assessments)
   ============================================================ */

.acad-card {
  background: #fff;
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.acad-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 14px;
}
.acad-card-header h3 { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; }
.acad-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted); letter-spacing: 0.05em;
}
.att-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 600;
  padding: 6px 14px; border: 2px solid;
  min-width: 70px; text-align: center;
}
.att-badge.good { color: var(--success); border-color: var(--success); background: rgba(21,128,61,0.06); }
.att-badge.warn { color: var(--warn); border-color: var(--warn); background: rgba(161,98,7,0.06); }
.att-badge.bad  { color: var(--error); border-color: var(--error); background: rgba(185,28,28,0.06); }

.acad-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.acad-section h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.acad-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.acad-table th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-align: left;
  padding: 6px 10px; border-bottom: 1px solid var(--paper-3);
}
.acad-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--paper-2);
}
.acad-table .mono {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
}
.acad-empty {
  font-size: 12px; color: var(--muted); font-style: italic; padding: 8px 0;
}

@media (max-width: 800px) {
  .acad-sections { grid-template-columns: 1fr; }
}

/* ============================================================
   Assignments page
   ============================================================ */

.asgn-list { display: flex; flex-direction: column; gap: 16px; }
.asgn-card {
  background: #fff;
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 20px 24px;
}
.asgn-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 8px;
}
.asgn-card-header h3 { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; }
.asgn-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted); letter-spacing: 0.05em;
}
.asgn-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 10px; border: 1px solid;
}
.asgn-status.submitted { color: var(--success); border-color: var(--success); background: rgba(21,128,61,0.06); }
.asgn-status.pending   { color: var(--warn); border-color: var(--warn); background: rgba(161,98,7,0.06); }
.asgn-marks {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 600; margin-top: 4px;
}
.asgn-desc { font-size: 13px; line-height: 1.5; color: var(--ink); margin-bottom: 10px; }
.asgn-meta-row {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted); letter-spacing: 0.03em;
  margin-bottom: 10px;
}
.asgn-due { font-weight: 600; }
.asgn-feedback {
  background: var(--paper); border-left: 3px solid var(--accent-2);
  padding: 10px 14px; font-size: 13px; margin-bottom: 10px;
}
.asgn-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding-top: 10px; border-top: 1px solid var(--paper-2);
  flex-wrap: wrap;
}