/* ProfSCM shared site design system
   ----------------------------------
   Single source of truth for the cream + forest look already established by
   public/index.html, public/courses/stats200/index.html and
   public/games/scm/index.html. Those three pages inline their own copy of these
   rules; this file is the extracted, tokenised version for every NEW page and
   for the classroom client at /learn.

   Load order on a static page:
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&display=swap">
     <link rel="stylesheet" href="/site-assets/site.css">
     <script src="/site-assets/site.js" defer></script>

   Nothing here is page-specific. Page-specific rules belong in the page. */

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

/* ----------------------------------------------------------------- tokens */
:root {
  /* Surface + ink — taken verbatim from the established pages */
  --cream:       #FAF8F4;
  --surface:     #FFFFFF;
  --ink:         #1A1A18;
  --ink-light:   #4A4A45;
  --ink-soft:    #6B6B64;   /* derived: help text, one step lighter than --ink-light */
  --accent:      #2D5A3D;
  --accent-light:#4A8C60;
  --accent-deep: #1E3F2B;   /* derived: darkened --accent, for inverted panels */
  /* Filled buttons darken on hover rather than lightening. White on
     --accent-light is only 4.03:1, which fails AA for the button label the
     moment the pointer is over it; white on --accent-hover is ~9.9:1.
     --accent-light stays for focus rings, hairlines and icon accents, where
     it carries no text. */
  --accent-hover:#234A31;
  --border:      #E2DDD6;
  --tag-bg:      #EEF4F0;

  /* Status — kept inside the cream family so nothing reads as a stock UI kit */
  --ok-bg:    #EEF4F0;  --ok-ink:    #235C3C;
  --warn-bg:  #FBF1DF;  --warn-ink:  #7A5210;
  --risk-bg:  #FBECEA;  --risk-ink:  #8C2F2F;
  --info-bg:  #EDF1F4;  --info-ink:  #3B5464;
  --flat-bg:  #F1EEE9;  --flat-ink:  #5B5B54;

  /* Radius — the site is deliberately square-ish: 3px chips, 4px cards */
  --radius-sm: 3px;
  --radius:    4px;
  --radius-lg: 6px;

  /* Spacing scale */
  --s1: 4px;   --s2: 6px;   --s3: 8px;   --s4: 12px;  --s5: 16px;
  --s6: 20px;  --s7: 24px;  --s8: 32px;  --s9: 40px;  --s10: 48px;
  --s11: 56px; --s12: 64px; --s13: 80px; --s14: 120px;

  /* Layout */
  --nav-h:   64px;
  --page-x:  80px;          /* horizontal page padding, desktop */
  --nav-x:   48px;          /* nav is inset less than the page body */
  --maxw:    1280px;        /* outer content ceiling */
  --measure: 640px;         /* readable line length for lede/subtitles */
  --prose:   720px;         /* long-form body copy */

  /* Type */
  --font-sans:  'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --t-micro: 0.7rem;   --t-chip: 0.72rem;  --t-fine: 0.75rem;
  --t-small: 0.8rem;   --t-body: 0.875rem; --t-base: 0.9rem;
  --t-lede:  1.05rem;  --t-h3:   1.15rem;  --t-h2:   1.6rem;
  --t-h1:    2.8rem;

  /* Motion */
  --ease: 0.2s ease;
}

/* ------------------------------------------------------------------- base */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
h1 em, h2 em { font-style: italic; color: var(--accent); }

a { color: var(--accent); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
button:disabled { cursor: not-allowed; opacity: 0.55; }

/* Keyboard focus — visible on every interactive element, on both cream and
   white surfaces. Mouse users keep a clean UI via :focus-visible. */
:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: fixed; left: var(--s5); top: -120px; z-index: 200;
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 10px 18px; font-size: var(--t-body); font-weight: 500;
  text-decoration: none; transition: top var(--ease);
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------------------------- nav */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--nav-x);
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
}
.nav-logo {
  font-family: var(--font-serif); font-size: 1.1rem; color: var(--ink);
  text-decoration: none; letter-spacing: -0.02em;
}
.nav-logo span { color: var(--accent); }

.nav-links { display: flex; gap: var(--s7); list-style: none; align-items: center; }
.nav-links a {
  /* The vertical padding is what lifts these from an 18px text box to a 24px
     pointer target (WCAG 2.5.8). It does not move anything: the bar is a fixed
     64px flex row, so the links only grow into space they already had. */
  display: inline-flex; align-items: center; min-height: 26px; padding: 4px 0;
  text-decoration: none; color: var(--ink-light);
  font-size: var(--t-body); font-weight: 400; letter-spacing: 0.02em;
  transition: color var(--ease);
}
.nav-links a:hover { color: var(--accent); }
.nav-links a.active,
.nav-links a[aria-current="page"] { color: var(--accent); font-weight: 500; }

.nav-cta {
  background: var(--accent); color: #fff !important;
  padding: 8px 20px; border-radius: var(--radius);
  font-weight: 500 !important; transition: background var(--ease) !important;
}
.nav-cta:hover { background: var(--accent-hover) !important; }

/* Mobile disclosure. The established pages simply hide the links below 900px,
   which strands phone users with no navigation at all. The button is hidden
   for desktop, so the desktop rendering is byte-for-byte the same as before. */
.nav-toggle {
  display: none; align-items: center; gap: var(--s3);
  color: var(--ink-light); font-size: var(--t-body);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 7px 13px; background: var(--surface);
}
.nav-toggle:hover { color: var(--accent); border-color: var(--accent-light); }
.nav-toggle-bars { display: block; width: 15px; height: 9px; position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after,
.nav-toggle-bars span {
  content: ''; position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; transition: transform var(--ease), opacity var(--ease);
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars span    { top: 4px; }
.nav-toggle-bars::after  { top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span    { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-4px) rotate(-45deg); }

/* ------------------------------------------------------------ page header */
.page-header {
  padding: var(--s14) var(--page-x) var(--s11);
  border-bottom: 1px solid var(--border);
}
.breadcrumb { font-size: var(--t-small); color: var(--ink-light); margin-bottom: var(--s7); display: flex; align-items: center; flex-wrap: wrap; }
/* Breadcrumbs are navigation, not prose, so they carry the full 24px target. */
.breadcrumb a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; padding: 0 2px; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 var(--s2); }

.eyebrow {
  display: inline-block; font-size: var(--t-chip); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); background: var(--tag-bg);
  padding: 5px 14px; border-radius: var(--radius-sm); margin-bottom: var(--s5);
}
.page-header h1 { font-size: var(--t-h1); margin-bottom: var(--s4); letter-spacing: -0.03em; }
.page-lede { font-size: var(--t-lede); color: var(--ink-light); max-width: var(--measure); line-height: 1.7; }

.meta-row { display: flex; gap: var(--s7); flex-wrap: wrap; margin-top: var(--s8); }
.meta-item {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--t-base); color: var(--ink-light);
  background: var(--surface); border: 1px solid var(--border);
  padding: 10px 18px; border-radius: var(--radius);
}

/* --------------------------------------------------------------- sections */
.section { padding: var(--s12) var(--page-x); }
.section + .section { border-top: 1px solid var(--border); }
.section.on-white { background: var(--surface); }
.section-title { font-size: var(--t-h2); margin-bottom: var(--s3); }
.section-subtitle { font-size: var(--t-base); color: var(--ink-light); margin-bottom: var(--s8); line-height: 1.7; max-width: var(--measure); }

/* ------------------------------------------------------------------ cards */
/* The signature ProfSCM grid: cards sit on a border-coloured bed with a 2px
   gap, so the dividing lines read as hairlines rather than card shadows. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px; background: var(--border); border: 1px solid var(--border);
}
.card-grid.narrow { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* auto-fill leaves the border-coloured bed showing through in any unfilled
   cell. Where a section has a known card count, pin the column count instead. */
.card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-list { display: flex; flex-direction: column; gap: 2px; background: var(--border); border: 1px solid var(--border); }

.card {
  background: var(--surface); padding: var(--s8);
  display: flex; flex-direction: column;
  transition: background var(--ease);
  text-decoration: none; color: inherit;
}
a.card:hover, .card.interactive:hover { background: var(--tag-bg); }
.card-icon { font-size: 1.8rem; margin-bottom: var(--s4); line-height: 1; }
.card h3 { font-size: var(--t-h3); margin-bottom: var(--s2); }
.card p { font-size: var(--t-body); color: var(--ink-light); line-height: 1.6; margin-bottom: var(--s4); flex: 1; }

/* Free-standing card, not part of a hairline grid */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s7) var(--s8);
}

/* Row-style card, as used for chapter lists */
.row-card {
  background: var(--surface); padding: var(--s8) 36px;
  display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s7);
  align-items: start; transition: background var(--ease);
  text-decoration: none; color: inherit;
}
a.row-card:hover { background: var(--tag-bg); }
.row-card.disabled { cursor: default; }
.row-card.disabled:hover { background: var(--surface); }
.row-num { font-family: var(--font-serif); font-size: 1.5rem; color: var(--accent); font-style: italic; line-height: 1; padding-top: 2px; }
.row-card.disabled .row-num { color: var(--ink-light); opacity: 0.4; }
.row-body h3 { font-size: var(--t-h3); margin-bottom: var(--s2); }
.row-body p { font-size: var(--t-body); color: var(--ink-light); line-height: 1.65; margin-bottom: 10px; }
.row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-top: 2px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--font-sans); font-size: var(--t-body); font-weight: 500;
  padding: 10px 20px; min-height: 42px;
  border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; white-space: nowrap;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--ink); }
.btn-secondary:hover:not(:disabled) { border-color: var(--accent-light); color: var(--accent); background: var(--tag-bg); }
.btn-quiet { background: transparent; color: var(--accent); padding: 8px 0; min-height: 0; }
.btn-quiet:hover:not(:disabled) { color: var(--accent-light); text-decoration: underline; }
.btn-block { width: 100%; }

/* Arrow link — the gap animates on hover, as on the existing game cards */
.arrow-link {
  display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--accent); text-decoration: none;
  font-size: var(--t-body); font-weight: 500;
  transition: gap var(--ease);
}
.arrow-link:hover, .card:hover .arrow-link, a.card:hover .arrow-link { gap: 10px; }

/* ----------------------------------------------------------------- badges */
.badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius-sm);
  width: fit-content; white-space: nowrap;
}
.badge-live,  .badge-ok    { background: var(--accent);  color: #fff; }
.badge-soft,  .badge-tag   { background: var(--tag-bg);  color: var(--ok-ink); }
.badge-soon,  .badge-flat  { background: var(--flat-bg); color: var(--flat-ink); }
.badge-warn                { background: var(--warn-bg); color: var(--warn-ink); }
.badge-risk                { background: var(--risk-bg); color: var(--risk-ink); }
.badge-info                { background: var(--info-bg); color: var(--info-ink); }

/* ----------------------------------------------------------------- notes */
.note {
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius); padding: var(--s5) var(--s6);
  font-size: var(--t-body); line-height: 1.7;
}
.note-ok   { background: var(--ok-bg);   border-left-color: var(--accent);    color: var(--ok-ink); }
.note-warn { background: var(--warn-bg); border-left-color: var(--warn-ink);  color: var(--warn-ink); }
.note-risk { background: var(--risk-bg); border-left-color: var(--risk-ink);  color: var(--risk-ink); }
.note-info { background: var(--info-bg); border-left-color: var(--info-ink);  color: var(--info-ink); }

/* ------------------------------------------------------------------ forms */
.field { display: block; margin-bottom: var(--s6); }
.field > span, label > span.field-label {
  display: block; font-size: var(--t-body); font-weight: 500;
  color: var(--ink); margin-bottom: var(--s2);
}
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=search], input[type=datetime-local], select, textarea {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; font-size: var(--t-base); color: var(--ink);
  transition: border-color var(--ease);
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--accent-light); }
input:disabled, select:disabled, textarea:disabled { background: var(--flat-bg); color: var(--ink-soft); cursor: not-allowed; }
textarea { line-height: 1.6; resize: vertical; }
.field-help { display: block; font-size: var(--t-fine); color: var(--ink-soft); margin-top: var(--s2); line-height: 1.6; }

/* ----------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; }
table.site-table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.site-table th, .site-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.site-table th { font-weight: 600; color: var(--ink-light); font-size: var(--t-fine); letter-spacing: 0.04em; text-transform: uppercase; }
.site-table tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------------------- footer */
.site-footer {
  padding: var(--s9) var(--page-x);
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s5);
}
.footer-left { font-family: var(--font-serif); font-size: 1rem; color: var(--ink); font-style: italic; }
.footer-right { font-size: var(--t-small); color: var(--ink-light); }
.site-footer a { color: var(--ink-light); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }

/* -------------------------------------------------------------- utilities */
.stack > * + * { margin-top: var(--s6); }
.stack-tight > * + * { margin-top: var(--s4); }
.cluster { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--ink-light); }
.fine { font-size: var(--t-fine); color: var(--ink-soft); }
.prose { max-width: var(--prose); }
.prose p + p { margin-top: var(--s5); }
.center-narrow { max-width: 480px; margin: 0 auto; }

/* Fade-in — opt-in, driven by site.js.
   Gated on `html.js` (set by a one-line inline script in the head) so content
   is never hidden behind an animation that cannot run. Without JavaScript, or
   if site.js fails to load, everything is simply visible. */
.fade-in { opacity: 1; }
.js .fade-in { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .fade-in.visible { opacity: 1; transform: translateY(0); }

/* Anything below the fixed nav needs clearance */
.below-nav { padding-top: var(--nav-h); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  :root { --page-x: 32px; --nav-x: 24px; --s14: 100px; }

  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--border);
    padding: var(--s3) var(--nav-x) var(--s6);
  }
  .nav-links.open { display: flex; }
  .nav-links li + li { border-top: 1px solid var(--border); }
  .nav-links a { display: block; padding: 14px 0; font-size: var(--t-base); }
  .nav-links .nav-cta { text-align: center; margin-top: var(--s4); padding: 12px 20px; }
  .nav-links li:has(.nav-cta) { border-top: 0; }

  .page-header h1 { font-size: 2rem; }
  .meta-row { flex-direction: column; gap: var(--s4); align-items: stretch; }
  .section { padding: var(--s10) var(--page-x); }
  .card-grid, .card-grid.narrow,
  .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: 1fr; }
  .row-card { grid-template-columns: 40px 1fr; gap: var(--s5); padding: var(--s7) var(--s6); }
  .row-side { flex-direction: row; align-items: center; gap: var(--s4); margin-top: var(--s3); grid-column: 1 / -1; }
  .site-footer { padding: var(--s8) var(--page-x); flex-direction: column; gap: var(--s3); text-align: center; }
}

@media (max-width: 560px) {
  :root { --page-x: 20px; --nav-x: 16px; }
  .page-header h1 { font-size: 1.75rem; }
  .card, .panel { padding: var(--s6); }
  .btn { width: 100%; }
  .cluster > .btn { width: auto; flex: 1 1 auto; }
}

/* --------------------------------------------------- motion + print prefs */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .fade-in { opacity: 1; transform: none; }
}

@media print {
  .site-nav, .nav-toggle, .skip-link { display: none !important; }
  body { background: #fff; }
  .page-header { padding-top: var(--s7); }
  .card, .panel { break-inside: avoid; }
}