/* masters.md FIRST: Read masters.md BEFORE editing or adding files.
 * Stylesheet for calendar2.html ONLY - the COMPACT calendar: one line per
 * course, date + title and nothing else, so all 18 fit in a single screenshot.
 * calendar.html (the full row view) keeps styles-calendar.css; the two pages
 * deliberately do NOT share a stylesheet, so tightening this one can never
 * shift the other.
 *
 * Loaded AFTER styles.css + styles-nou.css and reuses their identity v1 tokens
 * and the .tag-* / .chip / .btn components unchanged.
 *
 * The list is FLAT (#c2-list holds year separators and course lines as
 * siblings) for the same reason as calendar.html: edit.js reorders by swapping
 * siblings, so an admin can move any line anywhere in edit mode.
 */

.c2-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }

/* ---- Year separator --------------------------------------------------- */
.c2-year {
  display: flex; align-items: baseline; gap: 12px;
  padding: 22px 0 8px; border-bottom: 1px solid var(--border);
}
.c2-year b {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--coral); line-height: 1;
}
.c2-year span {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
}

/* ---- One course line -------------------------------------------------- */
.c2-row {
  display: grid; grid-template-columns: 108px 1fr auto;
  gap: 16px; align-items: baseline;
  padding: 11px 10px; border-bottom: 1px solid var(--border);
}
.c2-row[hidden] { display: none; }
/* Alternating ground, applied by the page script over the VISIBLE lines only
   (see calendar2.html) - :nth-child would keep counting filtered-out lines. */
.c2-row.is-alt { background: var(--kraft); }
.c2-row.is-now { box-shadow: inset 3px 0 0 var(--coral); }

.c2-when {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted-2); white-space: nowrap;
}
.c2-row.is-now .c2-when { color: var(--coral); font-weight: 700; }

.c2-title {
  font-family: var(--font-display); font-size: 1.02rem; line-height: 1.3;
  color: var(--ink);
}
.c2-nr {
  font-family: var(--font-mono); font-size: .66rem; color: var(--fog);
  margin-right: 8px;
}

/* ---- Chrome ----------------------------------------------------------- */
.c2-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; }
.c2-legend {
  display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px;
  font-size: .82rem; color: var(--muted);
}
.c2-legend b { color: var(--ink); }
.c2-empty { display: none; margin-top: 22px; color: var(--muted); }
/* The edit-mode hint reuses .cohort-band (display:grid), and a CSS display
   beats the `hidden` attribute - so the band needs its own opt-out. */
.c2-hint[hidden] { display: none; }

/* ---- Screenshot mode -------------------------------------------------- */
/* Strips the site chrome and paints a poster frame so a capture is already
   social-ready. Runtime-only: the class lives on <body> while the toggle is
   on, and edit.js drops it before publishing. */
.c2-poster-head { display: none; }
body.shot-mode .site-header,
body.shot-mode .site-footer,
body.shot-mode .c2-hero,
body.shot-mode .c2-legend,
body.shot-mode .c2-bar,
body.shot-mode .c2-tag,
body.shot-mode .c2-filters { display: none !important; }
body.shot-mode .c2-poster-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 24px;
  padding-bottom: 16px; border-bottom: 2px solid var(--ink);
}
body.shot-mode .c2-poster-head img { height: 28px; width: auto; }
body.shot-mode .c2-poster-t {
  font-family: var(--font-display); font-size: 1.4rem; color: var(--ink);
}
body.shot-mode .c2-poster-s {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
}
body.shot-mode { background: var(--kraft); }
body.shot-mode .c2-row { grid-template-columns: 108px 1fr; }
body.shot-mode .c2-section { padding: 40px 0; }
/* A screenshot wants the whole calendar in one frame, so the lines tighten. */
body.shot-mode .c2-row { padding: 8px 10px; }
body.shot-mode .c2-year { padding: 16px 0 6px; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 640px) {
  .c2-row { grid-template-columns: 84px 1fr; gap: 4px 12px; }
  .c2-tag { grid-column: 2; }
  body.shot-mode .c2-row { grid-template-columns: 84px 1fr; }
  .c2-title { font-size: .96rem; }
}

/* 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. */
.c2-row.is-warn {
  background: rgba(245, 68, 60, .07);
  box-shadow: inset 3px 0 0 var(--coral);
}
.c2-row.is-warn .c2-when { color: var(--coral); }
.c2-warn {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap; cursor: help;
  margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  background: var(--coral); color: var(--cream);
}
.c2-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 22px; font-size: .9rem; color: var(--ink);
}
.c2-warnings[hidden] { display: none; }
.c2-warnings b { display: block; margin-bottom: 8px; color: var(--coral-deep); }
.c2-warnings ul { margin: 0; padding-left: 20px; }
.c2-warnings li { margin-bottom: 5px; color: var(--muted); }
.c2-warnings a { color: var(--ink); font-weight: 600; }
.c2-warnings.is-ok {
  border-color: var(--border); border-left-color: var(--success);
  background: transparent; color: var(--muted); font-size: .85rem;
  padding: 12px 20px;
}
/* A screenshot is never an audit. */
body.shot-mode .c2-warnings,
body.shot-mode .c2-warn { display: none !important; }
body.shot-mode .c2-row.is-warn { background: none; box-shadow: none; }