/* Catalog: cards, grids, filters, course tiles — SPEC section 10.4 */

/* --- Home hero: the one bold moment ------------------------------------ */

.course-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* --on-course comes from Course.text_on_color, so changing a course colour
   cannot silently leave unreadable text behind. */
.tile {
  --course: var(--notebook-blue);
  --on-course: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: flex-end;
  min-height: 132px;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--course);
  color: var(--on-course);
  text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: var(--sticker-shadow);
}
.tile:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.tile-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; line-height: 1.1; }
.tile-exam { font-size: 0.85rem; opacity: 0.92; }


.home-section { margin-top: var(--space-7); }
.home-section h2 { margin-bottom: var(--space-4); }

/* --- Course chips ------------------------------------------------------- */

.course-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.chip {
  --chip: var(--notebook-blue);
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  border: 2px solid var(--chip);
  color: var(--ink);
  background: var(--paper-raised);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.chip:hover { background: var(--chip); color: var(--on-chip, #FFFFFF); }

.course-header {
  --course: var(--notebook-blue);
  border-left: 8px solid var(--course);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--paper-raised);
  border-radius: var(--radius);
}
.course-header h1 { margin-bottom: var(--space-2); }
.course-header p { color: var(--ink-soft); margin: 0; }

/* --- Material cards: book-like, coloured spine, price swipe ------------- */

.m-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-5);
}

.m-card { --spine: var(--notebook-blue); height: 100%; }

.m-card-link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper-raised);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
}
.m-card-link:hover { border-color: var(--spine); }

.m-spine {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 8px;
  background: var(--spine);
}

.m-cover { padding-left: 8px; background: var(--paper); }
.m-cover img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.m-cover-blank {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  background: var(--spine);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
}
.m-cover-blank.large { aspect-ratio: 3 / 4; font-size: 4rem; border-radius: var(--radius); }

.m-body { flex: 1; padding: var(--space-3) var(--space-3) var(--space-2) calc(8px + var(--space-3)); }
.m-title { font-size: 1rem; font-weight: 600; margin-bottom: var(--space-1); line-height: 1.25; }
.m-meta { font-size: 0.85rem; color: var(--ink-faint); margin: 0 0 var(--space-1); }
.m-seller { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

.m-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-3) var(--space-3) calc(8px + var(--space-3));
  border-top: var(--border);
}

/* The price sits on a highlighter swipe (SPEC 10.4). */
.m-price {
  font-weight: 700;
  padding: 2px 8px;
  background: var(--highlighter);
  color: var(--ink);
  border-radius: 3px;
}
.m-price-free { background: var(--mint-bg); color: #0C6B52; }

/* --- Filters ------------------------------------------------------------ */

.filters {
  background: var(--paper-raised);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.filter-search { margin-bottom: var(--space-4); }
.filter-search label, .filter label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: var(--space-1);
}
.filter-search input {
  width: 100%;
  font: inherit;
  padding: var(--space-3);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-4);
}
.filter select, .filter input {
  width: 100%;
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.filter select:disabled { color: var(--ink-faint); background: var(--line); }
.filter-toggles {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border);
}
.checkbox { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.checkbox input { width: 1.1rem; height: 1.1rem; accent-color: var(--link); }

.results-head { margin-bottom: var(--space-4); }
.results-count { color: var(--ink-soft); margin: 0; }
.htmx-request #results { opacity: 0.55; }

.pager {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-6);
  flex-wrap: wrap;
}
.empty { text-align: center; }

/* --- Material detail ---------------------------------------------------- */

.m-detail {
  --spine: var(--notebook-blue);
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-6);
}
.m-detail-cover img { width: 100%; border-radius: var(--radius); border: var(--border); }
.m-detail-course { margin: 0 0 var(--space-2); }
.m-detail-course a { font-weight: 600; text-decoration: none; }
.m-detail-seller { color: var(--ink-soft); }

.m-facts { display: grid; gap: var(--space-3); margin: var(--space-5) 0; }
.m-facts > div { display: flex; gap: var(--space-4); }
.m-facts dt { font-weight: 600; min-width: 6.5rem; }
.m-facts dd { margin: 0; color: var(--ink-soft); }

.buy-box {
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--paper-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}
.buy-price { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; margin: 0; }
.buy-box .btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.buy-box form { margin: 0; }

.preview-strip { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-3); }
.preview-strip figure { margin: 0; flex: 0 0 auto; width: 220px; }
.preview-strip img { width: 100%; border: var(--border); border-radius: var(--radius); }

.versions { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.versions li { padding-bottom: var(--space-3); border-bottom: var(--border); }
.versions li:last-child { border-bottom: none; padding-bottom: 0; }

.notice {
  background: var(--highlighter);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-weight: 500;
}

/* --- Authors ------------------------------------------------------------ */

.author-row { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.author-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 140px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
}
.author-name { font-weight: 600; }

@media (max-width: 46rem) {
  .m-detail { grid-template-columns: 1fr; }
  .m-detail-cover { max-width: 240px; }
  .m-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }
  .filters { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .tile:hover { transform: none; }
}

/* --- Length, last update, reach (card and material page) ---------------- */

.m-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-2) 0 0;
  padding: 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.m-stats li { white-space: nowrap; }

/* On the material page they sit under the byline and carry more weight. */
.m-detail-main .m-stats {
  font-size: 0.95rem;
  color: var(--ink-soft);
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
}

/* --- Ratings and comments ----------------------------------------------- */

.stars { display: inline-flex; align-items: center; gap: var(--space-2); }
.stars-glyphs {
  color: var(--pencil);
  letter-spacing: 1px;
  font-size: 0.95em;
  line-height: 1;
}
.stars-label { color: var(--ink-soft); font-size: 0.85rem; }

.m-rating { margin: var(--space-2) 0 0; }
.m-rating .stars-glyphs { font-size: 0.9rem; }
.m-rating .stars-label { font-size: 0.78rem; color: var(--ink-faint); }

.rating-summary {
  padding-bottom: var(--space-4);
  border-bottom: var(--border);
  margin-bottom: var(--space-5);
}
.rating-summary .stars-glyphs { font-size: 1.5rem; }
.rating-summary .stars-label { font-size: 1rem; color: var(--ink); font-weight: 600; }

.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.review { padding-bottom: var(--space-5); border-bottom: var(--border); }
.review:last-child { border-bottom: none; padding-bottom: 0; }
.review-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.review-who { font-weight: 600; text-decoration: none; }
.review-body { margin: var(--space-2) 0 0; max-width: var(--measure); }

/* --- Reader (SPEC section 7) -------------------------------------------- */

.reader { max-width: 900px; margin-inline: auto; }
.reader-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.reader-back { font-size: 0.9rem; text-decoration: none; }
.reader-title { font-size: 1.3rem; margin: var(--space-1) 0 0; }
.reader-count { margin: 0; }

.reader-page {
  background: var(--paper-raised);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: grid;
  place-items: center;
  min-height: 60vh;
  /* Deterrent only (SPEC 7); the watermark is what traces a leak. */
  user-select: none;
  -webkit-user-select: none;
}
.reader-page img { max-width: 100%; height: auto; pointer-events: none; }

.reader-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}
.reader-nav [aria-disabled="true"] { opacity: 0.45; box-shadow: none; }
.reader-note { margin-top: var(--space-5); text-align: center; }

/* --- My Library ---------------------------------------------------------- */

.tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); flex-wrap: wrap; }
.tab {
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.tab-on { border-color: var(--ink); background: var(--highlighter); }

.library-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.library-row {
  --spine: var(--notebook-blue);
  position: relative;
  display: grid;
  grid-template-columns: 8px 72px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  background: var(--paper-raised);
  border: var(--border);
  border-radius: var(--radius);
  padding-right: var(--space-4);
  overflow: hidden;
}
.library-spine { background: var(--spine); align-self: stretch; }
.library-cover img { width: 72px; aspect-ratio: 3/4; object-fit: cover; display: block; }
.library-main { padding-block: var(--space-3); }
.library-main h3 { font-size: 1.05rem; margin: 0 0 var(--space-1); }
.library-main h3 a { text-decoration: none; color: var(--ink); }
.library-main p { margin: 0 0 var(--space-1); }
.library-action { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.library-action form { margin: 0; }
.badge-off { background: var(--line); color: var(--ink-soft); }

@media (max-width: 40rem) {
  .library-row { grid-template-columns: 6px 56px 1fr; }
  .library-cover img { width: 56px; }
  .library-action { grid-column: 2 / -1; padding-bottom: var(--space-3); }
}

/* --- Checkout ------------------------------------------------------------ */

.checkout-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.checkout-cover { width: 84px; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius); }
.checkout-item h2 { font-size: 1.1rem; margin-bottom: var(--space-1); }
.checkout-item p { margin: 0; }

.methods { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.method {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
}
.method-on { border-color: var(--ink); background: var(--highlighter); }
.method input { accent-color: var(--ink); }

.totals { margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.totals > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.totals dt { margin: 0; }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.totals-sum {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-3);
  font-weight: 700;
  font-size: 1.15rem;
}

/* --- Revisions and adjusted prices --------------------------------------- */

.upgrade-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.upgrade-banner .btn { margin-left: auto; }
.adjusted-note {
  background: var(--paper-raised);
  border-left: 4px solid var(--pencil);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}
.versions form { margin-top: var(--space-2); }

/* --- Moderation panel ----------------------------------------------------- */

.mod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.mod-row {
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  background: var(--paper-raised);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.mod-row h3 { font-size: 1.05rem; margin-bottom: var(--space-1); }
.mod-row p { margin: 0 0 var(--space-1); }
.mod-done { opacity: 0.6; }
.mod-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.mod-actions input[type="text"] {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.report-link { margin: var(--space-5) 0; }
.video-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.video-list video { width: 100%; border-radius: var(--radius); background: #000; }

/* --- Editions in the reader ---------------------------------------------- */

.edition-note {
  background: var(--paper-raised);
  border-left: 4px solid var(--pencil);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}
.edition-switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.edition-pick {
  padding: var(--space-1) var(--space-3);
  border: 2px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
}
.edition-on { border-color: var(--ink); background: var(--highlighter); }

/* --- Seller money --------------------------------------------------------- */

.balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.balance-card {
  background: var(--paper-raised);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.balance-main { border: 2px solid var(--ink); box-shadow: var(--sticker-shadow); }
.balance-label { font-size: 0.85rem; color: var(--ink-faint); margin: 0 0 var(--space-1); font-weight: 600; }
.balance-figure {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 800;
  margin: 0 0 var(--space-4);
  font-variant-numeric: tabular-nums;
}
.balance-figure-small {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
  font-variant-numeric: tabular-nums;
}
.balance-card .meta { margin: 0; }

.sales-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.sales-table th, .sales-table td {
  text-align: left;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: var(--border);
}
.sales-table th { font-weight: 600; font-size: 0.85rem; color: var(--ink-faint); }
.sales-table td:not(:first-child) { font-variant-numeric: tabular-nums; }
.sales-table tr:last-child td { border-bottom: none; }
.sales-table form { margin: 0; }

@media (max-width: 46rem) {
  .sales-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Downloads (SPEC 7) */
.download-form { margin: 0; }
.download-note { margin: var(--space-1) 0 0; }
.library-action .download-note { flex-basis: 100%; }