/* masters.md FIRST: Read masters.md BEFORE editing or adding files.
 * Stylesheet for calendar.html ONLY - the chronological, row-per-course view
 * of the catalogue. Loaded AFTER styles.css + styles-nou.css, so it inherits
 * identity v1 tokens (--ink / --kraft / --coral / --indigo ...) and reuses the
 * .tag-* / .chip / .btn components from styles-nou.css unchanged.
 * Kept in its own file so cursuri.html and its stylesheet stay untouched.
 *
 * The page is one FLAT list (#cal-list) whose children alternate month bands
 * (.cal-head) and course rows (.cal-row). Flat on purpose: edit.js reorders by
 * swapping SIBLINGS, so a flat list lets an admin move any row anywhere -
 * including across months - with the arrow buttons in edit mode.
 *
 * Screenshot mode (body.shot-mode, toggled by the button on the page) strips
 * the site chrome and paints a poster frame, so the calendar can be captured
 * for social without cropping by hand.
 */

/* ---- The spine ------------------------------------------------------- */
.cal-list { position: relative; padding-left: 34px; }
.cal-list::before {                       /* the vertical timeline rule */
  content: ""; position: absolute; left: 9px; top: 14px; bottom: 14px;
  width: 2px; background: linear-gradient(var(--border-strong), var(--border));
  border-radius: 2px;
}

/* ---- Month band ------------------------------------------------------ */
.cal-head {
  position: relative; display: flex; align-items: baseline; gap: 14px;
  margin: 38px 0 14px;
}
.cal-head:first-child { margin-top: 0; }
.cal-head::before {                       /* the dot on the spine */
  content: ""; position: absolute; left: -34px; top: .55em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--coral); border: 4px solid var(--background);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.cal-head.is-later::before { background: var(--fog); }
.cal-head-m {
  font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.1; color: var(--ink);
}
.cal-head-m em { font-style: italic; color: var(--coral); }
.cal-head-line { flex: 1; height: 1px; background: var(--border); }
.cal-head-n {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2); white-space: nowrap;
}

/* ---- One course row -------------------------------------------------- */
.cal-row {
  position: relative;
  display: grid; grid-template-columns: 74px 1fr 132px 168px;
  gap: 22px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 10px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cal-row:hover {
  border-color: var(--border-strong); transform: translateX(2px);
  box-shadow: var(--shadow-soft);
}
.cal-row[hidden] { display: none; }
/* Alternating ground so the rows read as separate objects. Applied by the
   page script to every other VISIBLE row - not :nth-child, which would keep
   counting rows a filter has hidden and stripe them at random. */
.cal-row.is-alt { background: var(--kraft); border-color: rgba(27, 28, 31, .10); }
.cal-row.is-alt .cal-fig { border-color: rgba(27, 28, 31, .18); }
.cal-row.is-alt .tag-early { border-color: rgba(27, 28, 31, .20); }
/* The confirmed cohorts get a coral edge - the only rows you can pay for now. */
.cal-row.is-now { border-left: 3px solid var(--coral); }

.cal-when {
  text-align: center; border-right: 1px solid var(--border); padding-right: 18px;
}
.cal-when-m {
  display: block; font-family: var(--font-mono); font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--coral);
}
.cal-when-y {
  display: block; font-family: var(--font-display); font-size: 1.5rem;
  line-height: 1.15; color: var(--ink);
}
.cal-row.is-later .cal-when-m { color: var(--muted-2); }

.cal-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 7px; }
.cal-nr {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--fog);
}
.cal-main h3 {
  font-family: var(--font-display); font-size: 1.12rem; line-height: 1.25;
  margin: 0 0 5px; color: var(--ink);
}
.cal-main p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--muted); }

.cal-meta { display: flex; gap: 10px; }
.cal-fig {
  flex: 1; text-align: center; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 4px;
}
.cal-fig b {
  display: block; font-family: var(--font-display); font-size: 1.05rem;
  font-weight: 600; color: var(--ink);
}
.cal-fig span {
  display: block; font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2);
}

.cal-act { display: flex; flex-direction: column; gap: 6px; }
.cal-act .btn { width: 100%; justify-content: center; }
.cal-act .cal-note {
  margin: 0; font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2);
  text-align: center;
}

/* The edit-mode hint reuses .cohort-band, which is display:grid - and a CSS
   display beats the `hidden` attribute, so the band needs its own opt-out. */
.cal-hint[hidden] { display: none; }

/* ---- Filter chips + legend ------------------------------------------ */
.cal-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.cal-legend {
  display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px;
  padding-top: 22px; border-top: 1px solid var(--border);
  font-size: .85rem; color: var(--muted);
}
.cal-legend b { color: var(--ink); }
.cal-empty { display: none; margin-top: 26px; color: var(--muted); }

/* ---- Screenshot mode ------------------------------------------------- */
/* Strips the site chrome and paints a poster frame, so a full-page capture is
   already social-ready. Nothing here is baked into the file: the class lives
   on <body> only while the toggle is on, and edit.js drops it before publish. */
.cal-shotbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 26px; }
.cal-poster-head { display: none; }
body.shot-mode .site-header,
body.shot-mode .site-footer,
body.shot-mode .cal-hero,
body.shot-mode .cal-legend,
body.shot-mode .cal-act,
body.shot-mode .cal-warnings,
body.shot-mode .cal-warn,
body.shot-mode .cal-shotbar,
body.shot-mode .cal-filters { display: none !important; }
body.shot-mode .cal-poster-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 30px;
  padding-bottom: 20px; border-bottom: 2px solid var(--ink);
}
body.shot-mode .cal-poster-head img { height: 30px; width: auto; }
body.shot-mode .cal-poster-t {
  font-family: var(--font-display); font-size: 1.5rem; color: var(--ink);
}
body.shot-mode .cal-poster-s {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
}
body.shot-mode .cal-row { grid-template-columns: 74px 1fr 132px; }
body.shot-mode { background: var(--kraft); }
body.shot-mode .cal-section { padding: 42px 0; }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
  .cal-row { grid-template-columns: 66px 1fr; gap: 14px 16px; padding: 16px; }
  .cal-meta { grid-column: 2; }
  .cal-act { grid-column: 2; flex-direction: row; align-items: center; }
  .cal-act .btn { width: auto; flex: 1; }
  .cal-act .cal-note { flex: 1; text-align: left; }
  body.shot-mode .cal-row { grid-template-columns: 66px 1fr; }
}
@media (max-width: 560px) {
  .cal-list { padding-left: 26px; }
  .cal-list::before { left: 6px; }
  .cal-head::before { left: -26px; width: 15px; height: 15px; border-width: 3px; }
  .cal-row { grid-template-columns: 1fr; }
  .cal-when {
    display: flex; align-items: baseline; gap: 8px;
    text-align: left; border-right: 0; border-bottom: 1px solid var(--border);
    padding: 0 0 8px;
  }
  .cal-when-y { font-size: 1.15rem; }
  .cal-meta, .cal-act { grid-column: 1; }
}

/* Shown in place of the list when cursuri.html cannot be read (opened over
   file://, offline, or the file missing on the server). */
.cal-fallback { padding: 22px 0; color: var(--muted); }
.cal-fallback a { color: var(--indigo); }

/* ---- Date audit (edit mode only) -------------------------------------- */
/* The running order is decided by hand on cursuri.html; these styles mark the
   courses whose DATE no longer agrees with where they were placed, so the fix
   is obvious while arranging. Shown only with ?edit=1 / ?check=1 - a visitor
   never sees a red page. */
.cal-row.is-warn {
  border-color: var(--coral);
  box-shadow: inset 0 0 0 1px var(--coral);
  background: rgba(245, 68, 60, .05);
}
.cal-row.is-warn .cal-when-m { color: var(--coral); }
.cal-warn {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap; cursor: help;
  padding: 3px 8px; border-radius: 999px;
  background: var(--coral); color: var(--cream);
}
.cal-warnings {
  border: 1px solid var(--coral); border-left: 3px solid var(--coral);
  border-radius: var(--radius); background: rgba(245, 68, 60, .06);
  padding: 16px 20px; margin: 0 0 24px; font-size: .9rem; color: var(--ink);
}
.cal-warnings[hidden] { display: none; }
.cal-warnings b { display: block; margin-bottom: 8px; color: var(--coral-deep); }
.cal-warnings ul { margin: 0; padding-left: 20px; }
.cal-warnings li { margin-bottom: 5px; color: var(--muted); }
.cal-warnings a { color: var(--ink); font-weight: 600; }
/* Nothing wrong: the same box, quiet, so the check always answers. */
.cal-warnings.is-ok {
  border-color: var(--border); border-left-color: var(--success);
  background: transparent; color: var(--muted); font-size: .85rem;
  padding: 12px 20px;
}

body.shot-mode .cal-row.is-warn { background: var(--surface); box-shadow: none; border-color: var(--border); }