/* Classes page: the search on a sheet of paper, then one index card per built-in
   grading plan laid out on the desk. The weight bars use the desk's inks. */
:root {
  --seg-0: #1b1712;
  --seg-1: #d0a23c;
  --seg-2: #1f2b45;
  --seg-3: #8d9b7a;
  --seg-4: #9a5b34;
  --seg-5: #d9c79c;
}

.finder { margin-top: 34px; }
.finder label { display: block; font-size: 14px; font-weight: 700; }
.finder input { width: 100%; margin-top: 6px; padding: 6px 0 10px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 600 clamp(22px, 2.6vw, 30px)/1.2 var(--display); -webkit-appearance: none; appearance: none; }
.finder input::placeholder { color: rgba(84, 74, 60, 0.6); }
.finder input:focus-visible { outline: none; border-bottom-color: var(--gold); }
.finder-result { min-height: 1.6em; margin-top: 12px; color: var(--ink-soft); }
.finder-result strong { color: var(--ink); }
.class-count { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }

.class-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); align-items: start; }
.class-card[hidden], .dept-tab[hidden] { display: none; }

/* Department tabs, like dividers in a binder */
.dept-tab { grid-column: 1 / -1; margin: 18px 0 -14px; font: 700 18px/1 var(--display); }
.dept-tab:first-child { margin-top: 0; }
.dept-tab span { display: inline-block; padding: 9px 22px 7px; background: #e3c98f; color: var(--ink); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%); box-shadow: 0 6px 12px rgba(30, 15, 4, 0.25); }

/* Each card flips over to show every part of its plan */
.class-card { display: grid; grid-template-columns: minmax(0, 1fr); perspective: 1600px; transform: rotate(var(--tilt, 0deg)); }
.class-card:nth-of-type(3n + 1) { --tilt: -0.7deg; }
.class-card:nth-of-type(3n + 2) { --tilt: 0.5deg; }
.class-card:nth-of-type(3n) { --tilt: -0.25deg; }
.class-card .face { grid-area: 1 / 1; min-width: 0; --tilt: 0deg; backface-visibility: hidden; transform: rotateY(0deg); transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.class-card .back { transform: rotateY(180deg); }
.class-card.is-flipped .front { transform: rotateY(-180deg); }
.class-card.is-flipped .back { transform: rotateY(0deg); }
.flip { display: inline-block; margin-top: 16px; padding: 4px 0; border: 0; background: none; color: var(--ink); font: 700 15px/1.3 var(--body); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.flip:hover { text-decoration-color: var(--ink); }
.back .legend { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .class-card .face { transition: none; } }

/* The search shuffle: cards glide to their new places */
::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
.class-card header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.class-card h2 { font: 700 28px/1.1 var(--display); letter-spacing: -0.01em; }
.class-card header p { font-size: 14px; color: var(--ink-soft); }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
.facts li { padding: 2px 9px; border: 1.5px solid rgba(84, 74, 60, 0.45); border-radius: 2px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }

/* How the grade is split, left to right */
.weights { display: flex; gap: 3px; height: 30px; margin-top: 16px; }
.seg { flex: 1 1 0; min-width: 6px; display: flex; align-items: center; padding-left: 8px; overflow: hidden; border-radius: 2px; color: #fff; font-size: 13px; transform-origin: left; }
.seg b { font-weight: 700; white-space: nowrap; }
.s0 { background: var(--seg-0); } .s1 { background: var(--seg-1); color: var(--ink); } .s2 { background: var(--seg-2); }
.s3 { background: var(--seg-3); color: var(--ink); } .s4 { background: var(--seg-4); } .s5 { background: var(--seg-5); color: var(--ink); }
.seg.extra { background: repeating-linear-gradient(135deg, var(--seg-1) 0 4px, transparent 4px 8px); border: 1.5px solid var(--seg-1); }
@media (prefers-reduced-motion: no-preference) {
  .weights .seg { transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1); }
  .weights:not(.in) .seg { transform: scaleX(0); }
  .weights.in .seg:nth-child(2) { transition-delay: 60ms; } .weights.in .seg:nth-child(3) { transition-delay: 120ms; }
  .weights.in .seg:nth-child(4) { transition-delay: 180ms; } .weights.in .seg:nth-child(5) { transition-delay: 240ms; }
  .weights.in .seg:nth-child(6) { transition-delay: 300ms; }
}

/* The categories, written on the card's ruled lines */
.legend { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 24px; margin-top: 14px; padding: 0; }
.legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: baseline; gap: 0 8px; padding: 6px 0; border-bottom: 1.5px solid var(--rule); font-size: 15px; }
.key { width: 10px; height: 10px; margin-top: 0.45em; align-self: start; border-radius: 2px; }
.key.extra { background: repeating-linear-gradient(135deg, var(--seg-1) 0 2px, transparent 2px 4px); border: 1px solid var(--seg-1); }
.legend .pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.legend .rule { grid-column: 2 / -1; font-size: 13px; color: var(--ink-soft); }
.empty { padding: 20px 24px; background: var(--note); box-shadow: var(--shadow); }

@media (max-width: 760px) {
  .class-card h2 { font-size: 24px; }
}

/* The ask: share a syllabus so the list grows */
.share { margin-top: 30px; padding: 22px 24px 20px; background: var(--note); box-shadow: 0 6px 14px rgba(30, 15, 4, 0.14); transform: rotate(-0.4deg); }
.share h2 { font: 700 clamp(22px, 2.4vw, 28px)/1.15 var(--display); letter-spacing: -0.01em; }
.share p { margin-top: 8px; }
.share-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.share-actions span { font-size: 15px; color: var(--ink-soft); }
.share-actions span a { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.share-fine { font-size: 13px; color: var(--ink-soft); }

/* Plans that can't apply yet */
.facts li.soon { border-color: var(--gold); color: var(--gold-ink, var(--ink)); }
.soon-note { margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
.soon-note a { color: var(--ink); }
.sticky .small { margin-top: 10px; font-size: 14px; color: var(--ink-soft); }