/* Cumulative fatigue tint on a weekly-planner suggestion chip
   (Views::WeeklyPlanners::ElementChip): a background tint, no border, the
   same kind of treatment weekly_planner.css gives the recovery baseline
   tint. Named by TONE, not by level, so the fatigue model owns what
   Moderate/High/Very High turn into: caution and danger are the soft
   background with their own tone's ink text; severe (the top fatigue level
   only) is the solid token with ink-on-accent text, since --caution-soft
   and --danger-soft have no severe counterpart. Linked after
   weekly_planner.css (app/views/layouts/application.rb), so these rules win
   over the recovery baseline tint declared there, and over weekly_planner.css's
   own .drawer-element-chip:hover, by source order: same specificity, later
   in the cascade. */
.drawer-element-chip-load-caution {
  background-color: var(--caution-soft);
  color: var(--caution-ink);
}

.drawer-element-chip-load-danger {
  background-color: var(--danger-soft);
  color: var(--danger-ink);
}

.drawer-element-chip-load-severe {
  background-color: var(--severe);
  color: var(--ink-on-accent);
}

/* weekly_planner.css's .drawer-element-chip:hover sets a pale grey
   background at the same specificity; without a hover rule here, that grey
   would win on source order and strand each tint's ink colour (white, for
   severe) on a pale background. Same background as the base rule above, so
   hovering a tinted chip does not change its tint. */
.drawer-element-chip-load-caution:hover {
  background-color: var(--caution-soft);
}

.drawer-element-chip-load-danger:hover {
  background-color: var(--danger-soft);
}

.drawer-element-chip-load-severe:hover {
  background-color: var(--severe);
}

/* A tinted chip's own children (Views::WeeklyPlanners::ElementChip renders
   these instead of the legacy name/toggle classes when the chip
   carries a load tint above). Each takes its colour from the chip itself,
   so caution, danger and severe all stay legible without naming a colour
   here. Non-colour properties mirror the legacy rules in weekly_planner.css
   (.drawer-element-chip .element-name,
   .suggestion-chip-toggle and their mobile variants), so a tinted chip's
   children keep the legacy layout, with type sizes drawn from the kit's
   scale rather than the legacy literals. */
.drawer-element-chip-name {
  background: transparent;
  margin: 0;
  font-weight: bold;
  color: inherit;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 900px) {
  .drawer-element-chip-name {
    flex: initial;
    min-width: initial;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* The chip's reasons, behind a small "i" (Views::WeeklyPlanners::ElementChip
   renders a UI::Popover when the recommendation explains itself). The
   trigger draws its ring and letter in currentColor, so it follows the
   chip's tint the way the toggle does; the panel is the kit popover's own
   surface, so its text is plain ink whatever the chip's tint. */
.drawer-element-chip-why {
  flex: none;
}

.drawer-element-chip-why-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--text-xs);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.drawer-element-chip-why-panel {
  max-width: 18rem;
  padding: var(--space-2) var(--space-3);
}

.drawer-element-chip-why-text {
  font-size: var(--text-sm);
  line-height: var(--leading);
}

/* The reasons as their own line under the name (rationale_as: :line, the
   builder's recommendations, where hover titles never reach a touch
   screen). The chip wraps so the line takes a full row after its controls. */
.drawer-element-chip-lined {
  flex-wrap: wrap;
}

.drawer-element-chip-why-line {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading);
  color: var(--ink-muted);
}

/* currentColor draws both the border and the +/- glyph (its ::before) from
   the toggle's own colour, so they follow the chip's tint the same way the
   name does. */
.drawer-element-chip-toggle {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid currentColor;
  color: inherit;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.drawer-element-chip-toggle::before {
  content: "+";
}

/* The root's --added class cannot reach this child without a combinator, and
   the flat-rule convention here forbids one, so the view (added chips) and
   the controller (the tap toggle) both set this class on the toggle itself
   rather than on the chip root. --accent/--ink-on-accent match the solid
   fill weekly_planner.css gives the legacy toggle in its added state. */
.drawer-element-chip-toggle-added {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-on-accent);
}

.drawer-element-chip-toggle-added::before {
  content: "✓";
}

/* A load-tinted chip's added ring. weekly_planner.css's
   `.suggestion-chip.drawer-element-chip--added` outline is a compound
   selector (two classes), so it always outranks a flat rule here by
   specificity regardless of source order; a tinted chip therefore carries
   this flat modifier instead of the legacy one (element_chip.rb, the
   controller's toggleElement), and the legacy rule never matches it. Outline
   colour is currentColor, not a fixed token, because the chip's own text
   colour already reads at 6.7:1 or better against every tint it can carry
   (caution-ink on caution-soft, danger-ink on danger-soft, ink-on-accent on
   the solid severe fill), while any single fixed ring colour fails at least
   one of the three (--ink drops to 1.6:1 on severe; --ink-on-accent drops to
   about 1.2:1 on the soft tints). The offset pulls the ring inside the
   chip's own edge, so it never needs contrast against the page behind it. */
.drawer-element-chip-load-added {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* An element chip's badges (type, recency, cycle), each a UI::Chip
   (Views::WeeklyPlanners::ElementChip). A kit chip clips its own overflow,
   so as a flex item it would shrink and cut its text short beside a long
   name; it keeps its width and the name wraps instead. */
.drawer-element-chip-badge {
  flex: none;
}

/* A tinted chip's badges are quiet UI::Chips with this class alongside;
   linked after ui/chip.css at the same specificity, it swaps the kit's
   hairline and muted ink for the chip's own colour. A fixed tone could
   vanish into the tint (caution on the caution tint) or fall below 2:1 on
   the severe fill. Size, padding and radius stay the kit chip's. */
.drawer-element-chip-badge-tinted {
  border-color: currentColor;
  color: inherit;
}

/* An element already in the week (weekly_planner_elements_controller's
   syncUsedChips keeps it current as days change) draws the same hairline
   frame the suggestion chips carry, not the heavy dark border the legacy
   rule drew around catalog chips: the chip's own "this week" badge says
   so. */
.drawer-element-chip--used-this-week {
  border: var(--line-width) solid var(--line);
}

/* A row of the drawer's "Already in this week" table
   (Views::WeeklyPlanners::SuggestionsPanel): it drags onto a day like a
   chip does, for a deliberate repeat. */
.already-in-week-row {
  cursor: grab;
}