/* ============================================================
   _locked.css — DO NOT EDIT WITHOUT EXPLICIT USER APPROVAL
   ============================================================
   This file is loaded AFTER styles.css. Its purpose is to be
   the durable home for two visual contracts that were stripped
   FOUR times in 2026-05-{05,06} during unrelated rollbacks:

     1. Course HOME card alignment (3-up grid, equal heights,
        meta+progress on the same Y across all cards)
     2. Course beautify pack (callout/heading tone palettes,
        section-box wrapper)

   Verification:
     python scripts/verify_locked_css.py

   If you, future Claude, are about to delete or "clean up"
   anything in this file: STOP. Read JOURNAL §2026-05-05 and
   BUGS.md §0 first. Ask the user. Don't strip silently.

   Owner: David. Re-applied 4× as of 2026-05-06.
   ============================================================ */

/* ---- LOCKED-BLOCK-A: Course card alignment ---- */
.aoy-course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 18px;
  margin-top: 20px;
}
@media (max-width: 1100px) { .aoy-course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .aoy-course-grid { grid-template-columns: 1fr; } }

.aoy-course-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.aoy-course-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.aoy-course-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aoy-course-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserve 2 lines so meta+progress sit at uniform Y across cards. */
  min-height: calc(13px * 1.45 * 2);
}

.aoy-course-meta {
  /* Natural flow under desc — DO NOT add margin-top: auto. */
  margin-top: 2px;
}
/* ---- /LOCKED-BLOCK-A ---- */

/* ---- LOCKED-BLOCK-B: Beautify pack (callout/heading tones, section-box) ----
   JS lives in course/app.js (CALLOUT_TONE_BY_ICON, HEADING_TONE_BY_TEXT,
   SECTION_BREAKERS, etc.). Stripped 4× as of 2026-05-08. Now lives here
   under verify hook. */

/* Section-box: heading + the blocks under it grouped into a tinted card. */
.aoy-section-box {
  position: relative;
  padding: 14px 18px 4px 18px;
  margin: 18px 0;
  border-radius: 10px;
  border-left: 3px solid;
}
.aoy-section-box > .aoy-block-heading:first-child {
  margin-top: 0;
}
.aoy-section-tone-blue   { background: rgba(56, 132, 255, 0.07); border-left-color: #4a90e2; }
.aoy-section-tone-green  { background: rgba(46, 174, 96,  0.08); border-left-color: #2eae60; }
.aoy-section-tone-yellow { background: rgba(232, 178, 35, 0.10); border-left-color: #d49a1f; }
.aoy-section-tone-red    { background: rgba(220, 70,  70, 0.08); border-left-color: #d34a4a; }
.aoy-section-tone-orange { background: rgba(232, 140, 35, 0.09); border-left-color: #e08a2a; }
.aoy-section-tone-purple { background: rgba(140, 95,  220,0.08); border-left-color: #8c5fdc; }
.aoy-section-tone-brown  { background: rgba(140, 110, 70, 0.09); border-left-color: #8c6e46; }

/* Heading tones (when not wrapped in section-box). */
.aoy-heading-tone-blue   { color: #5a9af0; }
.aoy-heading-tone-green  { color: #4ec98a; }
.aoy-heading-tone-yellow { color: #e0b340; }
.aoy-heading-tone-red    { color: #e87575; }
.aoy-heading-tone-orange { color: #eda360; }
.aoy-heading-tone-purple { color: #b48eea; }
.aoy-heading-tone-brown  { color: #b59770; }

/* Callout tones (auto from leading emoji). */
.aoy-block-callout.aoy-callout-tone-yellow { background: rgba(232, 178, 35, 0.12); border-left: 3px solid #d49a1f; }
.aoy-block-callout.aoy-callout-tone-orange { background: rgba(232, 140, 35, 0.12); border-left: 3px solid #e08a2a; }
.aoy-block-callout.aoy-callout-tone-red    { background: rgba(220, 70,  70, 0.12); border-left: 3px solid #d34a4a; }
.aoy-block-callout.aoy-callout-tone-green  { background: rgba(46, 174, 96,  0.12); border-left: 3px solid #2eae60; }
.aoy-block-callout.aoy-callout-tone-blue   { background: rgba(56, 132, 255, 0.10); border-left: 3px solid #4a90e2; }
.aoy-block-callout.aoy-callout-tone-purple { background: rgba(140, 95,  220,0.12); border-left: 3px solid #8c5fdc; }
.aoy-block-callout.aoy-callout-tone-brown  { background: rgba(140, 110, 70, 0.12); border-left: 3px solid #8c6e46; }

/* Light-mode tweaks — slightly stronger backgrounds because alpha 0.07
   washes out on white. */
[data-mode="light"] .aoy-section-tone-blue   { background: rgba(56, 132, 255, 0.10); }
[data-mode="light"] .aoy-section-tone-green  { background: rgba(46, 174, 96,  0.12); }
[data-mode="light"] .aoy-section-tone-yellow { background: rgba(232, 178, 35, 0.14); }
[data-mode="light"] .aoy-section-tone-red    { background: rgba(220, 70,  70, 0.10); }
[data-mode="light"] .aoy-section-tone-orange { background: rgba(232, 140, 35, 0.12); }
[data-mode="light"] .aoy-section-tone-purple { background: rgba(140, 95,  220,0.10); }
[data-mode="light"] .aoy-section-tone-brown  { background: rgba(140, 110, 70, 0.11); }
/* ---- /LOCKED-BLOCK-B ---- */