/* ============================================================================
   Class dot - the course recognition signal
   ============================================================================
   The ruled course-colour treatment is an 8px dot beside the course name, or a
   3px left border on a card. Both draw their colour from --subject-*, which
   carries a dark and a light value, so course identity survives a theme switch.

   One rule, shared. This used to live inside strux-card.css (reachable only
   from a macro nothing imported) while the content browser kept a second dot
   with raw hexes, so the same course was blue in one list and pink in another.

   Usage:
     <span class="class-dot class-dot--math"></span>
     <span class="class-dot" style="--course: var(--subject-math)"></span>

   The --course custom property is what JS renderers set (see
   static/js/course-color.js); never write a hex into the style attribute, or
   the dot will not follow the theme.
   ========================================================================= */

.class-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    display: inline-block;
    background: var(--course, var(--subject-other));
}

/* Small variant, for dense rows that previously used a 6px dot. */
.class-dot--sm {
    width: 6px;
    height: 6px;
}

/* Subject modifiers, for markup that knows the subject at render time. */
.class-dot--math { --course: var(--subject-math); }
.class-dot--english { --course: var(--subject-english); }
.class-dot--science { --course: var(--subject-science); }
.class-dot--social-studies { --course: var(--subject-social-studies); }
.class-dot--pe { --course: var(--subject-pe); }
.class-dot--arts { --course: var(--subject-arts); }
.class-dot--advisory { --course: var(--subject-advisory); }
.class-dot--language { --course: var(--subject-language); }
.class-dot--elective { --course: var(--subject-elective); }
.class-dot--other { --course: var(--subject-other); }

/* Bare-slug forms kept so existing markup keeps rendering. Prefer the
   --modifier spelling above in new code. */
.class-dot.math { --course: var(--subject-math); }
.class-dot.english,
.class-dot.language-arts { --course: var(--subject-english); }
.class-dot.science,
.class-dot.life-science { --course: var(--subject-science); }
.class-dot.social-studies { --course: var(--subject-social-studies); }
.class-dot.pe { --course: var(--subject-pe); }
.class-dot.arts { --course: var(--subject-arts); }
.class-dot.advisory { --course: var(--subject-advisory); }
.class-dot.language { --course: var(--subject-language); }
.class-dot.elective,
.class-dot.technology { --course: var(--subject-elective); }
.class-dot.other { --course: var(--subject-other); }

/* ---------------------------------------------------------------------------
   Card course edge - the other half of the ruling.
   Only ever a course signal: a row that needs to show status or priority uses
   weight or a chip, not this border (F6-025).
   ------------------------------------------------------------------------ */
.course-edge {
    border-left: 3px solid var(--course, var(--subject-other));
}