/* ===========================================================================
   Sprint 49.15 PR4 — cascade affordance styles.

   Companion stylesheet for the new partials:
     - group/_slot_pin_controls.html  → .yt-pin-btn, .yt-pin-anchor, .yt-pin-label
     - group/_conflict_pill.html      → .yt-conflict-pill, .yt-conflict-resolve
     - group/_fairness_score.html     → .yt-fairness-score, .yt-fairness-dot
     - group/_absence_conflict_modal  → .yt-absence-conflict-modal & friends

   Reuses the project's existing `--yt-*` design tokens (declared in
   _theme_shell.html) so colors automatically follow the active group
   theme. Mobile-first per CLAUDE.md scar tissue rule 7: rules without
   a media-query target the smallest breakpoint; `@media (min-width:
   640px)` (sm) layers on desktop refinements.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Pin / unpin controls
   --------------------------------------------------------------------------- */

.yt-pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 9999px;
  border: 1px solid rgb(var(--yt-card-border-rgb, 209 213 219));
  background-color: #fff;
  color: rgb(55 65 81); /* gray-700 */
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}

.yt-pin-btn:hover {
  background-color: rgb(var(--yt-primary-rgb, 79 70 229) / 0.05);
  border-color: rgb(var(--yt-primary-rgb, 79 70 229) / 0.4);
  color: var(--yt-primary, #4f46e5);
}

.yt-pin-btn:focus-visible {
  outline: 2px solid var(--yt-primary, #4f46e5);
  outline-offset: 2px;
}

.yt-pin-btn--unpin {
  background-color: rgb(var(--yt-primary-rgb, 79 70 229) / 0.1);
  border-color: rgb(var(--yt-primary-rgb, 79 70 229) / 0.5);
  color: var(--yt-primary, #4f46e5);
  font-weight: 600;
}

.yt-pin-btn--unpin:hover {
  background-color: rgb(var(--yt-primary-rgb, 79 70 229) / 0.18);
}

/* Sprint 50g round-4: soft anchor — top-N auto-fill rows. Visually
   distinct from both `--unpin` (📍 secretary intent, primary color)
   and `.yt-pin-anchor` (⚓ read-only Settings anchor, slate static).
   Uses a slate-tinted background so the secretary recognizes "this
   slot is settled by the top-N rule" but knows it's interactive
   (clickable to release back to fluid). */
.yt-pin-btn--soft-anchor {
  background-color: rgb(241 245 249); /* slate-100 */
  border-color: rgb(148 163 184); /* slate-400 */
  color: rgb(51 65 85); /* slate-700 */
  font-weight: 500;
}

.yt-pin-btn--soft-anchor:hover {
  background-color: rgb(226 232 240); /* slate-200 */
  border-color: rgb(100 116 139); /* slate-500 */
  color: rgb(30 41 59); /* slate-800 */
}

.yt-pin-btn--disabled,
.yt-pin-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.yt-pin-btn--disabled:hover,
.yt-pin-btn[disabled]:hover {
  background-color: #fff;
  border-color: rgb(var(--yt-card-border-rgb, 209 213 219));
  color: rgb(55 65 81);
}

.yt-pin-anchor {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 9999px;
  background-color: rgb(243 244 246); /* gray-100 */
  color: rgb(75 85 99); /* gray-600 */
  cursor: help;
}

/* On phones (< sm), the label after the icon is dropped to save width.
   The aria-label still announces the affordance to screen readers. */
.yt-pin-label {
  display: none;
}

@media (min-width: 640px) {
  .yt-pin-label {
    display: inline;
  }
}

/* ---------------------------------------------------------------------------
   Vacation-conflict pill
   --------------------------------------------------------------------------- */

.yt-conflict-pill {
  /* Tailwind utility classes already cover most of this in the partial;
     these rules layer the theme-aware accents on top. */
  font-variant-numeric: tabular-nums;
}

.yt-conflict-pill[data-conflict-type="secretary_skip"] {
  /* Secretary-side conflicts get a warmer red tint to distinguish them
     from member-declared absences (default amber). */
  background-color: rgb(254 226 226); /* red-100 */
  color: rgb(127 29 29); /* red-900 */
  border-color: rgb(248 113 113); /* red-400 */
}

.yt-conflict-resolve:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Fairness score
   --------------------------------------------------------------------------- */

.yt-fairness-score {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.yt-fairness-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: rgb(156 163 175); /* gray-400 default */
  flex-shrink: 0;
}

.yt-fairness-dot[data-rank="high"] {
  /* Cascade head — most fair to host next. Theme primary. */
  background-color: var(--yt-primary, #4f46e5);
}

.yt-fairness-dot[data-rank="mid"] {
  background-color: rgb(251 191 36); /* amber-400 */
}

.yt-fairness-dot[data-rank="low"] {
  /* Just hosted recently — least fair next. Muted gray. */
  background-color: rgb(156 163 175); /* gray-400 */
}

/* ---------------------------------------------------------------------------
   Absence-conflict modal
   --------------------------------------------------------------------------- */

.yt-absence-conflict-modal.hidden {
  display: none;
}

.yt-absence-conflict-list {
  list-style: disc inside;
}

.yt-absence-conflict-list li {
  padding: 0.25rem 0;
}

/* ---------------------------------------------------------------------------
   Mobile collapse: in dense rows (hosting queue per-member li), the
   per-row affordances should stack vertically below the member name
   instead of competing for horizontal space. The hosting-queue template
   ships a flex-col → sm:flex-row transition; these rules give the
   per-row span sane defaults when it ends up wrapping.
   --------------------------------------------------------------------------- */

.yt-cascade-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  margin-top: 0.25rem;
}

@media (min-width: 640px) {
  .yt-cascade-row-meta {
    margin-top: 0;
    margin-left: 0.5rem;
  }
}