/* ============================================================
   CSCI 455/555 Grade Portal — Atelier system
   ============================================================
   Direction: the master's workshop. Drafting paper, brass
   instruments, mono numerics. Discipline as care.
   See .interface-design/system.md for the full spec.
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* === Atelier color tokens — harmonized with /module/<slug> articles ===
     The same palette as templates/module_article.html and the Foundry
     variant so all surfaces of the webapp read as one product. ============ */
  --paper:        #f6f1e3;   /* matches --cream in articles */
  --paper-soft:   #fbf7e9;
  --blueprint:    #e8efe6;
  --ink:          #0d1612;   /* matches --ink in articles */
  --ink-soft:     #44504b;
  --ink-mute:     #7a8580;
  --rule:         #d9d2bf;
  --rule-soft:    #ebe5d2;

  --wm-green:     #004E38;   /* matches --green in articles */
  --wm-green-deep:#003526;   /* matches --green-deep */
  --wm-green-soft:#0d6a50;   /* matches --green-soft */

  --brass:        #B8965B;   /* matches --brass in articles */
  --brass-light:  #d6bb86;
  --brass-deep:   #8a6b1f;
  --brass-tint:   #f3ead3;
  --brass-bright: #e8c275;

  --graphite:     #3a3a35;
  --warning:      #a85f2c;

  --focus:        rgba(185, 151, 91, .55);

  /* === Legacy alias tokens (older selectors still use these) === */
  --navy:        var(--wm-green-deep);
  --navy-mid:    var(--wm-green);
  --navy-light:  var(--wm-green-soft);
  --accent:      var(--brass);
  --accent-light: var(--brass-light);
  --white:       #ffffff;
  --off-white:   var(--paper);
  --gray-100:    var(--paper-soft);
  --gray-200:    var(--rule);
  --gray-400:    var(--ink-mute);
  --gray-600:    var(--ink-soft);
  --gray-800:    var(--ink);
  --green:       var(--wm-green);
  --green-light: var(--brass-tint);
  --amber:       var(--brass-deep);
  --amber-bg:    var(--brass-tint);
  --amber-border: var(--brass);
  --red:         var(--warning);
  --red-light:   #f6ece3;
  --wm-gold:     var(--brass);
  --wm-gold-light: var(--brass-light);
  --wm-gold-soft:  var(--brass-tint);
  --wm-cream:    var(--paper);
  --wm-cream-deep: var(--rule);
  --wm-brick:    var(--warning);
  --wm-silver:   var(--ink-mute);

  /* === Type tokens ======================================= */
  /* Fonts loaded from Google Fonts in base.html — same stack as the
     article and Foundry surfaces so type rendering is consistent. */
  --serif:   'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --display: 'Antonio', 'Bebas Neue', Impact, var(--sans);

  /* === Spacing scale (4px base) ========================== */
  --s1:  4px;
  --s2:  8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* === Radii ============================================= */
  --r-tight: 4px;
  --r-card:  10px;
  --r-pill:  999px;
  --radius-sm: var(--r-tight);
  --radius:    var(--r-card);
  --radius-lg: 14px;

  /* === Shadows (sparingly) =============================== */
  --shadow-sm: 0 1px 0 rgba(31, 37, 32, .04);
  --shadow:    0 1px 0 rgba(31, 37, 32, .04);
  --shadow-md: 0 4px 14px -8px rgba(31, 37, 32, .25);
  --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, .55);

  /* === Easing ============================================ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Scroll-progress bar (kept; restyled as brass micrometer line) */

/* Scroll-progress track + fill (matches templates/module_article.html) */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(0, 53, 38, .08);
  z-index: 1000;
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brass), var(--brass-bright));
  transition: width 80ms linear;
}

/* ============================================================
   Topbar — drafting-paper band with a hairline brass rule
   ============================================================ */

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Dark-green topbar with brass underline — mirrors module_article.html */
.topbar {
  background: var(--wm-green-deep);
  color: var(--paper);
  padding: var(--s4) clamp(20px, 5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid var(--brass);
  position: sticky;
  top: 0;
  z-index: 40;
}

.topbar__brand {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
}

.topbar__brand-label b {
  color: var(--brass-bright);
  font-weight: 700;
  margin-left: 4px;
}

.topbar__brand-em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  color: var(--brass-light);
  text-transform: none;
  margin-left: 4px;
}

.topbar__pill {
  display: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brass-light);
  border: 1px solid rgba(184, 150, 91, .45);
  padding: 4px 10px;
  background: rgba(184, 150, 91, .08);
}

@media (min-width: 720px) { .topbar__pill { display: inline-block; } }

.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--s5);
  font-size: 0.88rem;
}

.topbar__nav a {
  color: var(--brass-light);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.topbar__nav a:hover {
  color: var(--brass-bright);
  border-bottom-color: var(--brass);
}

.topbar__user {
  color: rgba(246, 241, 227, .55);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* Page footer — mirrors article-foot in module_article.html */
.page-foot {
  margin-top: auto;
  padding: 28px clamp(20px, 4vw, 56px);
  border-top: 1px solid rgba(0, 53, 38, .2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wm-green-soft);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  background: var(--paper);
}
.page-foot b { color: var(--wm-green-deep); font-family: var(--display); font-size: 13px; letter-spacing: 0.04em; }

/* ============================================================
   Main canvas
   ============================================================ */

.main {
  flex: 1;
  width: 100%;
  max-width: 1640px;
  margin: var(--s7) auto var(--s9);
  padding: 0 clamp(20px, 5vw, 56px);
  position: relative;
}

.main--wide { max-width: 1640px; }

/* ============================================================
   Cards (bench card)
   ============================================================ */

.card {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s6) var(--s7);
  margin-bottom: var(--s5);
  position: relative;
  transition: border-color .25s var(--ease-out);
}

.card:hover { border-color: var(--rule); }

.card--flat {
  background: var(--paper);
  border: 1px solid var(--rule);
}

/* Brass tick-row decoration along the top edge of section cards */
.card.card--bench::before {
  content: '';
  display: block;
  position: absolute;
  top: -1px;
  left: var(--s6);
  width: 84px;
  height: 4px;
  background:
    linear-gradient(var(--brass) 0 0) 0 0   / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 20px 0 / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 40px 0 / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 60px 0 / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 80px 0 / 1px 4px no-repeat;
}

/* ============================================================
   Headings
   ============================================================ */

h1 {
  font-family: var(--serif);
  font-size: 2.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wm-green-deep);
  line-height: 1.1;
  margin-bottom: var(--s2);
}

h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--wm-green-deep);
  letter-spacing: -0.015em;
  margin-bottom: var(--s3);
}

h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: var(--s2);
}

/* Section heading with hand-drawn brass tick rule beneath */
.section-heading {
  position: relative;
  display: inline-block;
  padding-bottom: var(--s3);
}

.section-heading::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 6px;
  width: 92px;
  background:
    linear-gradient(var(--brass) 0 0)  0 6px / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 18px 4px / 1px 6px no-repeat,
    linear-gradient(var(--brass) 0 0) 36px 6px / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 54px 4px / 1px 6px no-repeat,
    linear-gradient(var(--brass) 0 0) 72px 6px / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 90px 4px / 1px 6px no-repeat;
  opacity: 0;
  transition: opacity .8s var(--ease-out) .1s;
}

section.in-view .section-heading::after,
.reveal.revealed .section-heading::after,
.section-heading.always::after { opacity: 1; }

/* ============================================================
   Grade hero — bench logbook header
   ============================================================ */

.grade-hero {
  display: flex;
  align-items: baseline;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
}

.grade-score {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 3.4rem;
  font-weight: 600;
  color: var(--wm-green-deep);
  line-height: 1;
  letter-spacing: -0.02em;
  display: inline-block;
}

.grade-score::after {
  content: '/100';
  font-size: 0.95rem;
  color: var(--ink-mute);
  font-weight: 400;
  margin-left: var(--s2);
  letter-spacing: 0;
}

.grade-score.count-finished { color: var(--wm-green-deep); }

.grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s2) var(--s4);
  border: 1.5px solid var(--brass);
  background: var(--paper);
  color: var(--wm-green-deep);
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: var(--r-tight);
  min-width: 56px;
  text-align: center;
  position: relative;
}

.grade-badge::before {
  /* Tiny brass corner ticks — sealed-by-instructor mark */
  content: '';
  position: absolute;
  inset: -3px;
  background:
    linear-gradient(var(--brass) 0 0) left  top    / 6px 1px no-repeat,
    linear-gradient(var(--brass) 0 0) left  top    / 1px 6px no-repeat,
    linear-gradient(var(--brass) 0 0) right top    / 6px 1px no-repeat,
    linear-gradient(var(--brass) 0 0) right top    / 1px 6px no-repeat,
    linear-gradient(var(--brass) 0 0) left  bottom / 6px 1px no-repeat,
    linear-gradient(var(--brass) 0 0) left  bottom / 1px 6px no-repeat,
    linear-gradient(var(--brass) 0 0) right bottom / 6px 1px no-repeat,
    linear-gradient(var(--brass) 0 0) right bottom / 1px 6px no-repeat;
  pointer-events: none;
}

.grade-badge--A { background: var(--paper); color: var(--wm-green-deep); }
.grade-badge--B { background: var(--paper); color: var(--wm-green); }
.grade-badge--C { background: var(--brass-tint); color: var(--brass-deep); }
.grade-badge--D { background: var(--brass-tint); color: var(--warning); }
.grade-badge--F { background: #f6ece3; color: var(--warning); }

/* Student meta — typeset transcript rows */

.student-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s3) var(--s5);
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: var(--s4);
}

.student-meta dt {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-deep);
  display: block;
  margin-bottom: 2px;
}

.student-meta dd {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-size: 0.95rem;
}

/* ============================================================
   Graduation banner (kept; restyled as a bench notice)
   ============================================================ */

@keyframes brass-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.grad-banner {
  position: relative;
  background:
    linear-gradient(180deg, var(--paper-soft) 0%, var(--brass-tint) 100%);
  border: 1px solid var(--brass);
  border-radius: var(--r-card);
  padding: var(--s6) var(--s7);
  margin-bottom: var(--s5);
  overflow: hidden;
}

.grad-banner::before {
  content: '';
  position: absolute;
  top: -1px; left: var(--s6);
  width: 84px; height: 4px;
  background:
    linear-gradient(var(--brass) 0 0) 0   0 / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 20px 0 / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 40px 0 / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 60px 0 / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 80px 0 / 1px 4px no-repeat;
}

.grad-banner__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: var(--s7);
  align-items: center;
}

@media (max-width: 700px) {
  .grad-banner__grid { grid-template-columns: 1fr; gap: var(--s4); text-align: left; }
}

.grad-banner__cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--wm-green-deep);
  background: var(--paper);
  border: 1.5px solid var(--brass);
  border-radius: 50%;
  width: 76px;
  height: 76px;
}

.grad-banner__year {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--wm-green-deep);
  margin-top: var(--s3);
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.grad-banner__date {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 0.7rem;
  color: var(--brass-deep);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
}

.grad-banner__note {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink);
}

.grad-banner__note p { margin-bottom: var(--s3); }
.grad-banner__note p:last-child { margin-bottom: 0; }

.grad-banner__greeting {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--wm-green-deep);
  margin-bottom: var(--s3) !important;
}

.grad-banner__signature {
  font-family: var(--serif);
  font-style: italic;
  color: var(--wm-green);
  font-size: 1rem;
  margin-top: var(--s4) !important;
}

.confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}

/* ============================================================
   Generic graduation banner (fallback for non-grad-flag flow)
   ============================================================ */

.graduation-banner {
  background: var(--paper-soft);
  border: 1px solid var(--brass);
  border-radius: var(--r-card);
  padding: var(--s5) var(--s6);
  margin-bottom: var(--s5);
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  color: var(--ink);
}

.graduation-banner__cap {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--brass-deep);
}

.graduation-banner__text h2 {
  color: var(--wm-green-deep);
  font-size: 1.1rem;
  margin-bottom: var(--s2);
}

.graduation-banner__text p {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ============================================================
   Warm note card — bench memo from the instructor
   ============================================================ */

.warm-note {
  position: relative;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s6) var(--s7);
  margin: var(--s5) 0 var(--s5);
  overflow: hidden;
}

.warm-note::before {
  content: '';
  position: absolute;
  top: -1px; left: var(--s6);
  width: 84px; height: 4px;
  background:
    linear-gradient(var(--brass) 0 0) 0   0 / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 20px 0 / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 40px 0 / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 60px 0 / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 80px 0 / 1px 4px no-repeat;
}

.warm-note__seal {
  position: absolute;
  top: var(--s5);
  right: var(--s5);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--brass);
  color: var(--wm-green-deep);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.warm-note__label {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brass-deep);
  font-weight: 700;
  margin-bottom: var(--s4);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.warm-note__label::before {
  content: '';
  width: 22px; height: 1.5px;
  background: var(--brass);
}

.warm-note__body {
  font-family: var(--serif);
  font-size: 1.04rem;
  line-height: 1.85;
  color: var(--ink);
  white-space: pre-wrap;
  max-width: 64ch;
}

/* ============================================================
   Observations callout — left-ruled margin note
   ============================================================ */

.observation-box {
  position: relative;
  border-left: 2px solid var(--brass);
  background: transparent;
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
}

.observation-box__label {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brass-deep);
  margin-bottom: var(--s2);
  font-weight: 700;
}

.observation-box p {
  font-family: var(--serif);
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.7;
  font-style: italic;
}

/* ============================================================
   Expandable bench-entry sections (<details>/<summary>)
   ============================================================ */

details {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  margin-bottom: var(--s3);
  overflow: hidden;
  transition: border-color .25s var(--ease-out);
}

details[open] { border-color: var(--brass); }

details[open] > summary { border-bottom: 1px solid var(--rule); }

summary {
  padding: var(--s4) var(--s5);
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--wm-green-deep);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  letter-spacing: -0.005em;
  transition: background .2s var(--ease-out);
}

summary:hover { background: var(--brass-tint); }

summary::-webkit-details-marker { display: none; }

summary::after {
  content: '';
  width: 12px;
  height: 12px;
  border-right: 1.5px solid var(--brass);
  border-bottom: 1.5px solid var(--brass);
  transform: rotate(-45deg);
  transition: transform .3s var(--ease-out);
  margin-right: var(--s2);
}

details[open] summary::after { transform: rotate(45deg); }

.details-body {
  padding: var(--s5);
  background: var(--paper);
}

/* ============================================================
   Data tables (bench ledger)
   ============================================================ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin-bottom: var(--s3);
  background: var(--paper);
}

.data-table th {
  background: transparent;
  color: var(--brass-deep);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: var(--s3) var(--s4);
  text-align: left;
  border-bottom: 1.5px solid var(--brass);
}

.data-table td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
}

.data-table tr:last-child td { border-bottom: none; }

.data-table tr:hover td { background: var(--brass-tint); }

.data-table .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}

.score-low {
  color: var(--warning);
  font-weight: 600;
  position: relative;
}

.score-low::before {
  content: '!';
  display: inline-block;
  font-family: var(--serif);
  font-size: 0.7rem;
  color: var(--warning);
  border: 1px solid var(--warning);
  border-radius: 50%;
  width: 14px; height: 14px;
  line-height: 12px;
  margin-right: var(--s2);
  text-align: center;
}

.score-high {
  color: var(--wm-green);
  font-weight: 600;
}

/* ============================================================
   Instructor comment — left-ruled marginalia
   ============================================================ */

blockquote.instructor-comment {
  margin: var(--s4) 0 0 0;
  padding: var(--s4) var(--s5);
  background: var(--paper-soft);
  border-left: 2px solid var(--brass);
  border-radius: 0 var(--r-tight) var(--r-tight) 0;
  font-family: var(--serif);
  font-size: 0.94rem;
  color: var(--ink-soft);
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}

blockquote.instructor-comment::before {
  content: '\00A7';
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--brass);
  margin-right: var(--s2);
  vertical-align: middle;
  line-height: 1;
}

/* ============================================================
   Rubric strip — parsed prefix from instructor comments.
   Renders the curly-braced "Rubric: { ... } ;" data as a row of
   sub-component chips on the bench. The prose feedback that
   follows the semicolon is rendered separately in
   blockquote.instructor-comment.
   ============================================================ */

.rubric-strip {
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  position: relative;
}

.rubric-strip::before {
  content: '';
  position: absolute;
  top: -1px;
  left: var(--s5);
  width: 64px;
  height: 4px;
  background:
    linear-gradient(var(--brass) 0 0)  0 0 / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 16px 0 / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 32px 0 / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 48px 0 / 1px 4px no-repeat,
    linear-gradient(var(--brass) 0 0) 60px 0 / 1px 4px no-repeat;
}

.rubric-strip__label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: var(--s3);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.rubric-strip__label::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: var(--brass);
}

.rubric-strip__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.rubric-chip {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "name score"
    "weight score";
  align-items: center;
  gap: 2px var(--s3);
  padding: var(--s2) var(--s3) var(--s2) var(--s3);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--brass);
  border-radius: var(--r-tight);
  position: relative;
}

.rubric-chip__name {
  grid-area: name;
  font-family: var(--serif);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--wm-green-deep);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.rubric-chip__weight {
  grid-area: weight;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.rubric-chip__score {
  grid-area: score;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--wm-green-deep);
  min-width: 38px;
  text-align: right;
  letter-spacing: -0.02em;
}

.rubric-chip--low {
  border-left-color: var(--warning);
}
.rubric-chip--low .rubric-chip__score {
  color: var(--warning);
}

.rubric-chip--high {
  border-left-color: var(--wm-green);
  background: linear-gradient(180deg, var(--paper) 0%, #f3efe1 100%);
}
.rubric-chip--high .rubric-chip__score {
  color: var(--wm-green);
}
.rubric-chip--high::after {
  content: '\2605'; /* small star marker */
  position: absolute;
  top: 2px;
  right: 4px;
  color: var(--brass);
  font-size: 9px;
  line-height: 1;
}

/* ============================================================
   Rationale — registrar's note
   ============================================================ */

.rationale-box {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--brass);
  border-radius: var(--r-tight);
  padding: var(--s5) var(--s6);
  font-family: var(--serif);
  font-size: 0.98rem;
  color: var(--ink);
  white-space: pre-wrap;
  line-height: 1.8;
}

.rationale-box__label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brass-deep);
  margin-bottom: var(--s3);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.rationale-box__label::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: var(--brass);
}

/* ============================================================
   Action buttons
   ============================================================ */

.action-area {
  margin-top: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.btn {
  position: relative;
  display: inline-block;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-tight);
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s var(--ease-out),
              background 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out);
  text-decoration: none;
  overflow: hidden;
  text-transform: uppercase;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

.btn:active { transform: translateY(1px); }

.btn--green {
  background: var(--wm-green-deep);
  color: var(--paper-soft);
  border-color: var(--wm-green-deep);
}

.btn--green:hover {
  background: var(--wm-green);
  border-color: var(--wm-green);
}

.btn--amber {
  background: var(--paper);
  color: var(--brass-deep);
  border-color: var(--brass);
}

.btn--amber:hover {
  background: var(--brass-tint);
}

.btn--navy {
  background: var(--paper);
  color: var(--wm-green-deep);
  border-color: var(--wm-green-deep);
}

.btn--navy:hover {
  background: var(--wm-green-deep);
  color: var(--paper-soft);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--rule);
}

.btn--ghost:hover {
  border-color: var(--brass);
  color: var(--wm-green-deep);
}

.btn .ripple { display: none; }

.response-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-tight);
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.response-status--ack {
  background: var(--paper-soft);
  color: var(--wm-green-deep);
  border-color: var(--wm-green);
}

.response-status--ack::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--wm-green);
  display: inline-block;
}

.response-status--pause {
  background: var(--brass-tint);
  color: var(--brass-deep);
  border-color: var(--brass);
}

.response-status--pause::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brass);
  display: inline-block;
}

/* ============================================================
   Pause form
   ============================================================ */

#pause-form {
  display: none;
  margin-top: var(--s3);
}

#pause-form textarea {
  width: 100%;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule);
  border-radius: var(--r-tight);
  font-family: var(--sans);
  font-size: 0.94rem;
  resize: vertical;
  min-height: 110px;
  background: #fff;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}

#pause-form textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--focus);
}

/* ============================================================
   Admin override banner — bench instrument bar
   ============================================================ */

.admin-grade-banner {
  background: var(--paper-soft);
  border: 1px solid var(--brass);
  border-radius: var(--r-card);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}

.admin-grade-banner__label {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brass-deep);
  margin-bottom: 4px;
  font-weight: 700;
}

.admin-grade-banner form {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.override-form {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s2);
  flex-wrap: wrap;
}

.override-form label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.override-form input[type="number"] {
  width: 110px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: var(--r-tight);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  color: var(--wm-green-deep);
}

.override-form input[type="number"]:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--focus);
}

.override-note {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--brass-deep);
  font-style: italic;
  margin-top: 2px;
}

/* ============================================================
   Login — drafting card on cream
   ============================================================ */

.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

.login-wrap::before {
  /* dot grid backdrop */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(185, 151, 91, .18) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 80%);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 80%);
  pointer-events: none;
}

.login-card {
  position: relative;
  background: var(--paper-soft);
  border: 1px solid var(--brass);
  border-radius: var(--r-card);
  padding: var(--s7) var(--s6);
  width: 100%;
  max-width: 400px;
}

/* Brass corner crosshairs on the login card */
.login-card::before,
.login-card::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 1.5px solid var(--brass);
}

.login-card::before {
  top: -1px; left: -1px;
  border-right: none; border-bottom: none;
}

.login-card::after {
  bottom: -1px; right: -1px;
  border-left: none; border-top: none;
}

.login-card__header {
  text-align: center;
  margin-bottom: var(--s6);
}

.login-card__course {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brass-deep);
  font-weight: 700;
  margin-bottom: var(--s2);
}

.login-card__title {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--wm-green-deep);
  letter-spacing: -0.01em;
}

.form-group { margin-bottom: var(--s4); }

.form-group label {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brass-deep);
  margin-bottom: var(--s2);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.form-group input {
  width: 100%;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: var(--r-tight);
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}

.form-group input:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--focus);
}

.error-msg {
  background: #f6ece3;
  color: var(--warning);
  border: 1px solid var(--warning);
  border-radius: var(--r-tight);
  padding: var(--s3) var(--s4);
  font-family: var(--sans);
  font-size: 0.88rem;
  margin-bottom: var(--s4);
}

.btn--full { width: 100%; text-align: center; }

/* ============================================================
   Admin roster table — typeset registrar's sheet
   ============================================================ */

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--paper);
}

.admin-table th {
  background: transparent;
  color: var(--brass-deep);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: var(--s4) var(--s5);
  text-align: left;
  border-bottom: 1.5px solid var(--brass);
}

.admin-table td {
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
  color: var(--ink);
}

.admin-table tr:hover td { background: var(--paper-soft); }

.admin-table a {
  color: var(--wm-green-deep);
  text-decoration: none;
  font-weight: 700;
  font-family: var(--sans);
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 1px;
  transition: color .2s var(--ease-out);
}

.admin-table a:hover { color: var(--brass-deep); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink-mute);
  border: 1px solid var(--rule);
}

.tag--ack {
  background: var(--paper-soft);
  color: var(--wm-green-deep);
  border-color: var(--wm-green);
}

.tag--ack::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--wm-green);
  border-radius: 50%;
}

.tag--pause {
  background: var(--brass-tint);
  color: var(--brass-deep);
  border-color: var(--brass);
}

.tag--pause::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--brass);
  border-radius: 50%;
}

.tag--none {
  background: transparent;
  color: var(--ink-mute);
  border-color: var(--rule);
}

/* ============================================================
   Final project prose blocks
   ============================================================ */

.fp-prose { margin-top: var(--s4); }

.fp-prose__label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brass-deep);
  margin-bottom: var(--s2);
}

.fp-prose__content {
  background: var(--paper-soft);
  border-left: 2px solid var(--brass);
  border-radius: 0 var(--r-tight) var(--r-tight) 0;
  padding: var(--s4) var(--s5);
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink-soft);
  white-space: pre-wrap;
  line-height: 1.75;
}

/* ============================================================
   Index landing page (atelier hero card)
   The Jinja-served / route uses its OWN inline styles in
   templates/index.html. The class below is only used by the
   simple expired/login-style fallback if needed.
   ============================================================ */

.index-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--paper);
}

.index-card {
  text-align: center;
  color: var(--ink);
  max-width: 560px;
  padding: var(--s6) var(--s5);
}

.index-card__institution {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brass-deep);
  margin-bottom: var(--s2);
  font-weight: 700;
}

.index-card__course {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--brass);
  margin-bottom: var(--s2);
}

.index-card__name {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--wm-green-deep);
  margin-bottom: var(--s5);
  letter-spacing: -0.015em;
}

.index-card__divider {
  width: 60px;
  height: 2px;
  background: var(--brass);
  margin: var(--s5) auto;
}

.index-card__desc {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.8;
  margin-bottom: var(--s6);
}

.index-card a.btn {
  background: var(--wm-green-deep);
  color: var(--paper);
  text-decoration: none;
}

/* ============================================================
   Expired page
   ============================================================ */

.expired-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--paper);
}

.expired-card {
  background: var(--paper-soft);
  border: 1px solid var(--brass);
  border-radius: var(--r-card);
  padding: var(--s7);
  max-width: 460px;
  text-align: center;
}

.expired-card h1 { font-size: 1.35rem; margin-bottom: var(--s3); }
.expired-card p {
  font-family: var(--serif);
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.7;
}
.expired-card a { color: var(--wm-green); font-weight: 700; }

/* ============================================================
   Reveal-on-scroll + misc helpers
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

.section-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brass-deep);
  margin-bottom: var(--s2);
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.prose-block {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.8;
  white-space: pre-wrap;
}

.mt-sm { margin-top: var(--s2); }
.mt    { margin-top: var(--s4); }
.mt-lg { margin-top: var(--s5); }
.mb-sm { margin-bottom: var(--s2); }
.mb    { margin-bottom: var(--s4); }

hr.divider {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--s5) 0;
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .section-heading::after { opacity: 1; }
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 640px) {
  html { font-size: 14.5px; }
  .grade-score { font-size: 2.4rem; }
  .main { padding: 0 var(--s4); margin-top: var(--s5); margin-bottom: var(--s7); }
  .topbar { flex-wrap: wrap; gap: var(--s2); padding: var(--s3) var(--s4); }
  .admin-table { font-size: 0.84rem; }
  .admin-table th, .admin-table td { padding: var(--s2) var(--s3); }
  .card { padding: var(--s5); }
  .grad-banner { padding: var(--s5) var(--s4); }
  .grad-banner__year { font-size: 1.4rem; }
}