/* Shared legend components.
   Extracted from components.css (CSS split, CLAUDE.md §12).
   .legend-item is reused by current-schedule.js, roster-grid.js,
   my-schedule.js, planning-calendar.js, and wish-submission.js.
   .schedule-legend/.legend-dot* are reused by my-schedule.js,
   wish-submission.js, and published-roster.js — the location-hue
   modifiers use a combined selector (higher specificity than the base
   .legend-dot rule), so which file loads first never matters for them.
   The disclosure-toggle block styles roster-grid.js's legend toggle
   (.rgv2-legend-toggle, which also carries .wish-legend-toggle)
   identically via distinct class names (kept distinct on purpose —
   see its own comment — so an E2E selector scoped to one doesn't
   accidentally match the other). */
@layer components {

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* A signal legend item's sample (features/roster/signals.js legendItemHtml). */
.legend-sample {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.legend-sample > .chip-sick,
.legend-sample > .chip-amended,
.legend-sample > .chip-override,
.legend-sample > .chip-duty-badge,
.legend-sample > .chip-room-badge,
.legend-sample > .rgv2-cal-override,
.legend-sample > .chip-problem { margin-left: 0; }

/* Hue swatch and chip samples of the roster signal legend
   (features/roster/signals.js), shared by every roster legend. */
.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
  background: var(--muted);
}
.legend-swatch:is(.loc-1, .loc-2, .loc-3, .loc-4, .loc-5, .loc-6, .loc-7, .loc-8) { background: var(--loc); }

.chip-oncall-sample {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--muted);
  vertical-align: middle;
  margin-right: 4px;
}

/* Seat-state samples for the signal legend (features/roster/signals.js):
   a miniature chip in the open seat's and the sickness-open seat's own
   fill and left rule (base-ui.css .chip-unfilled / .chip-sick-open). */
.chip-open-sample,
.chip-open-sick-sample {
  display: inline-block;
  width: 20px;
  height: 10px;
  border-radius: 2px;
  border-left: 3px solid var(--danger);
  background: var(--danger-bg);
  vertical-align: middle;
  margin-right: 4px;
}
.chip-open-sick-sample { border-left-color: var(--warning); background: var(--warning-bg); }

/* Legend sample for .chip-mine (views/roster-grid.css). */
.chip-mine-sample {
  display: inline-block;
  width: 20px;
  height: 10px;
  border-radius: 2px;
  background: var(--p-100);
  box-shadow: inset 0 0 0 1px var(--p-600);
  vertical-align: middle;
  margin-right: 4px;
}

.schedule-legend {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* One wrapping row under a calendar or strip (scheduleLegendHtml). */
.schedule-legend-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: var(--space-2);
  vertical-align: middle;
  background: var(--muted);
}
.legend-dot:is(.loc-1, .loc-2, .loc-3, .loc-4, .loc-5, .loc-6, .loc-7, .loc-8) { background: var(--loc); }
/* wish-submission.js's wishLegendHtml() — same border-radius/size as the
   .loc-N dots above, just a fixed rose fill / hollow holiday ring instead of
   a location hue. Combined selector, same as .loc-N, so it isn't a same-
   specificity coin-flip against the base .legend-dot rule above. */
.legend-dot.legend-dot-off    { background: var(--cat-rose); }
.legend-dot.legend-dot-holiday { background: transparent; border: 1.5px solid var(--warning); }

/* One legend item per active location (color-engine.js) plus the fixed
   "preferred off" and on-call/off-hours entries — mirrors my-schedule.js's
   .schedule-legend key (CLAUDE.md §13.1) rather than the old fixed two-swatch
   off/shift key, since a "preferred shift type" wish's colour now depends on
   its optional location, not its wish type alone. Always visible under the
   wish calendar; the roster grid tucks its own copy behind a disclosure. */
/* .rgv2-legend-abbr/.rgv2-legend-toggle (roster grid's abbreviation key,
   components/roster-grid.js) share this exact disclosure styling — kept as
   distinct class names rather than reused verbatim (same reasoning as
   .admin-table/.coverage-gaps-table above) since an E2E selector scoped to
   ".wish-legend-toggle" shouldn't start also matching the roster grid. */
.wish-legend, .rgv2-legend-abbr {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.wish-legend-toggle summary, .rgv2-legend-toggle summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-weight: 500;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.wish-legend-toggle summary::-webkit-details-marker,
.rgv2-legend-toggle summary::-webkit-details-marker { display: none; }
.wish-legend-toggle summary::before,
.rgv2-legend-toggle summary::before {
  content: '';
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform var(--transition);
}
.wish-legend-toggle[open] summary::before,
.rgv2-legend-toggle[open] summary::before { transform: rotate(90deg); }
.wish-legend-toggle summary:hover,
.rgv2-legend-toggle summary:hover { color: var(--text); background: var(--surface-sunk); }
} /* @layer components */