/* static/shared/employer_lights.css */

/* ── Panel wrapper ─────────────────────────────────────────────────────────── */
.es-panel {
  /* Visually isolate the panel from surrounding content */
  margin-block: 1.5rem;
}

.es-title {
  /* 21 px minimum per spec; never below 17 px anywhere in this sheet */
  font-size: 1.3125rem; /* 21px at default 16px root */
  font-weight: 700;
  color: var(--ces-ink);
  margin-block-end: 0.35rem;
}

.es-intro {
  font-size: 1.1875rem; /* 19px — body size */
  color: var(--ces-muted);
  margin-block-end: 1rem;
}

/* ── Light list ────────────────────────────────────────────────────────────── */
.es-lights {
  /* Wrapping flex so lights reflow on narrow screens */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.es-lights li {
  /* Each list item stacks its button and detail vertically */
  display: flex;
  flex-direction: column;
}

/* ── Base button ───────────────────────────────────────────────────────────── */
.es-light {
  /* All interactive text at 17 px minimum per spec */
  font-size: 1.0625rem; /* 17px */
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ces-touch-min, 44px);
  padding-inline: 1rem;
  border-radius: var(--ces-radius-pill);
  border-width: 2px;
  border-style: solid;
  cursor: pointer;
  /* Smooth border darkening on hover is omitted in reduced-motion below */
  transition: border-color 0.15s ease;
  white-space: nowrap;
}

/* Prevent focus ring from being clipped by overflow on parent */
.es-light:focus-visible {
  outline: 3px solid var(--ces-focus-ring);
  outline-offset: 2px;
}


/* ── Shown (green) ─────────────────────────────────────────────────────────── */
.es-light--shown {
  background-color: var(--ces-status-success-bg);
  border-color: var(--ces-status-success-border);
  color: var(--ces-status-success-text);
}

.es-light--shown:hover {
  /* Darken border only, leave background and text unchanged */
  border-color: var(--ces-status-success-text);
}

/* ── Partial (warning/amber) ───────────────────────────────────────────────── */
.es-light--partial {
  background-color: var(--ces-status-warning-bg);
  border-color: var(--ces-status-warning-border);
  color: var(--ces-status-warning-text);
}

.es-light--partial:hover {
  border-color: var(--ces-status-warning-text);
}

/* ── None (neutral/grey) ───────────────────────────────────────────────────── */
.es-light--none {
  background-color: var(--ces-status-neutral-bg);
  border-color: var(--ces-status-neutral-border);
  color: var(--ces-status-neutral-text);
}

.es-light--none:hover {
  border-color: var(--ces-status-neutral-text);
}

/* ── Label and state spans ─────────────────────────────────────────────────── */
.es-light-label {
  /* 17 px already inherited from .es-light; weight comes from parent 600 */
  flex-shrink: 1;
  min-width: 0; /* allow label to shrink on narrow screens */
}

.es-light-state {
  font-weight: 500;
  /* Lighter weight distinguishes state from label without a size change */
  flex-shrink: 0;
}

/* ── Detail panel ──────────────────────────────────────────────────────────── */
.es-detail {
  border-radius: var(--ces-radius-lg);
  border: 1px solid var(--ces-line);
  padding: 12px 16px;
  background-color: var(--ces-surface);
  margin-block: 8px 0;
  font-size: 1.0625rem; /* 17px — never below minimum */
  color: var(--ces-ink);
}

.es-detail p {
  margin-block: 0.4rem;
}

.es-detail p:first-child {
  margin-block-start: 0;
}

.es-detail q {
  /* Italicise quoted student text to visually separate it from instructions */
  font-style: italic;
  color: var(--ces-ink);
  display: block;
  margin-block: 0.35rem;
}

/* ── Coaching list ─────────────────────────────────────────────────────────── */
.es-coaching {
  margin-block-start: 1.25rem;
}

.es-coaching h4 {
  font-size: 1.1875rem; /* 19px — stays above 17px floor */
  font-weight: 700;
  color: var(--ces-ink);
  margin-block-end: 0.5rem;
}

.es-coaching ul {
  list-style: disc;
  padding-inline-start: 1.5rem;
  margin: 0;
}

.es-coaching li {
  font-size: 1.0625rem; /* 17px */
  color: var(--ces-ink);
  margin-block: 0.35rem;
}

/* ── Forced-colors (Windows High Contrast, etc.) ───────────────────────────── */
@media (forced-colors: active) {
  .es-light {
    /* Use system ButtonText so the border is always visible */
    border-color: ButtonText;
    forced-color-adjust: none;
  }

  .es-light:focus-visible {
    /* System Highlight guarantees contrast in forced-colors mode */
    outline-color: Highlight;
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .es-light {
    /* Remove the border transition entirely; no animation of any kind */
    transition: none;
  }
}

/* ── Phones (max-width 640px) ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .es-lights li {
    /* Each list item occupies the full row */
    width: 100%;
  }

  .es-light {
    /* Button stretches to fill its li */
    width: 100%;
    min-width: 0; /* flex children may shrink below their content size */
    justify-content: flex-start;
  }

  .es-light-label,
  .es-light-state {
    /* Prevent overflow on very narrow viewports */
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere; /* Keep complete skill labels readable on phones. */
  }
}