/* Per-goal 1–10 self-rating pill (js/long-term-goals/ltg_rating.js).
   Rendered as the LAST child of an `.ltg-row`, right-aligned, so it reads as the
   row's bottom-right corner whether the reflection tray is open or closed.
   Shared by every long-term horizon (yearly / quarterly / monthly / weekly) in
   the standalone tabs, the goals dashboard, and the week sidebar. Loaded
   globally from index.html because those surfaces each own a separate stylesheet. */

/* ── The row's bottom strip ───────────────────────────────────────────
   Owns row utilities (js/long-term-goals/ltg_row_foot.js): feature menu far
   left, then tags · word count · rating pill · color · remove(×). Reflection
   toggle + emoji remain on the title line above. */
.ltg-row-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 16px;
  /* Claw back most of the row grid's 8px gap: the strip is a footer hugging the
     goal, not a sibling block, so it should not read as a whole extra line. */
  margin-top: -4px;
}

/* Per-goal feature menu: always first in the strip. The fixed popover escapes
   every card/grid overflow boundary, matching the rating picker's strategy. */
.ltg-footer-menu-trigger {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.ltg-footer-menu-trigger:hover,
.ltg-footer-menu-trigger.is-open {
  color: var(--ltg-row-color, var(--text-primary));
  border-color: var(--ltg-row-color, var(--border-subtle));
  background: var(--utility-surface);
}

.ltg-footer-menu-trigger svg {
  fill: currentColor;
}

.ltg-footer-menu {
  position: fixed;
  z-index: 420;
  min-width: 210px;
  padding: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--card, var(--utility-surface));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
}

.ltg-footer-menu[hidden] {
  display: none;
}

.ltg-footer-menu-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 3px 4px;
  border-radius: 9px;
}

.ltg-footer-menu-option:hover {
  background: var(--tab-active-bg);
}

.ltg-footer-menu-option-label {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ltg-row-color, var(--accent));
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.ltg-footer-menu-option-label:hover,
.ltg-footer-menu-option-label:focus-visible {
  border-color: var(--ltg-row-color, var(--accent));
  outline: none;
}

.ltg-footer-feature-glyph {
  width: 15px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
}

.ltg-footer-feature-color {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(var(--overlay-rgb), 0.35);
  border-radius: 50%;
  background: var(--ltg-row-color, var(--accent));
}

.ltg-footer-menu-pin {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 18px;
  cursor: pointer;
}

.ltg-footer-menu-pin input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ltg-footer-menu-toggle {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(var(--overlay-rgb), 0.18);
  transition: background-color 140ms ease;
}

.ltg-footer-menu-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-primary);
  transition: transform 140ms ease;
}

.ltg-footer-menu-pin input:checked + .ltg-footer-menu-toggle {
  background: var(--ltg-row-color, var(--accent));
}

.ltg-footer-menu-pin input:checked + .ltg-footer-menu-toggle::after {
  transform: translateX(16px);
}

.ltg-footer-menu-pin input:focus-visible + .ltg-footer-menu-toggle {
  outline: 2px solid var(--ltg-row-color, var(--accent));
  outline-offset: 2px;
}

[data-ltg-footer-feature].is-ltg-footer-unpinned {
  display: none !important;
}

/* The title line of a row whose color/× moved into the strip collapses to
   toggle · emoji · text — the text gets everything else, nothing crowds the
   typing width. Beats the per-view 5-column templates on specificity
   (0,3,0 vs 0,2,0). */
.ltg-row.ltg-row--foot-controls > .ltg-row-main {
  grid-template-columns: 14px 28px minmax(0, 1fr);
  gap: 4px;
}

/* Control cluster spread evenly across the whole strip — first member hugs the
   left edge, × hugs the right, equal space between (user call; was a
   right-aligned cluster). Also the positioning anchor for the crowded-out
   word count. */
.ltg-foot-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Keep the strip low: the color button shrinks from its 28px title-row size,
   and the remove button loses its tall padding. */
.ltg-foot-right > .ltg-color-btn,
.ltg-foot-right > .ltg-color-locked {
  width: 20px;
  height: 20px;
}

.ltg-foot-right > .ltg-remove {
  padding: 0 6px;
  line-height: 18px;
}

/* Tag containers moved into the strip: they were block elements on their own
   line, so drop their old spacing and let them take the middle, shrinking. */
.ltg-foot-right > .ltg-row-foot-tags {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;          /* these were standalone blocks; their own spacing would pad the strip */
  overflow: hidden;
  /* One line, always. These containers wrap by default, so a long parent-goal
     name would stack chips (or wrap inside a chip) and the strip would grow tall
     again — the exact extra-height problem the strip exists to remove. Overflow
     is clipped instead; the count has already stepped aside by then. */
  flex-wrap: nowrap;
}

.ltg-foot-right > .ltg-row-foot-tags:empty {
  display: none;
}

/* The chips keep their natural width — they must NOT shrink. Two reasons: a
   squashed chip is unreadable (the count would otherwise sit there while the
   chip crushed to nothing), and the fit test reads the container's scrollWidth
   to decide about crowding, which only reports the true content width if the
   chips inside refuse to compress. */
.ltg-foot-right > .ltg-row-foot-tags > * {
  flex: 0 0 auto;
  white-space: nowrap;   /* a long goal name must not wrap the chip onto 3 lines */
}

/* Word count sits between the tags and the rating pill. It degrades under
   crowding: full ("22 words") → compact ("22w") → hidden. */
.ltg-word-count--foot {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Crowded out by the chips + controls, or nothing written yet: pulled OUT OF
   FLOW rather than removed, so it keeps a measurable width and the fit test
   can't oscillate. `visibility` (not `display`) for the same reason. */
.ltg-row-foot.is-crowded .ltg-word-count--foot,
.ltg-word-count--foot.is-empty {
  position: absolute;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}

.ltg-rating {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.ltg-rating-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 0 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--utility-surface);
  color: var(--text-muted);
  font-size: 9px;
  line-height: 15px;           /* fixes the pill (and so the strip) at 17px tall */
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.ltg-rating-toggle:hover,
.ltg-rating-toggle[aria-expanded="true"] {
  color: var(--ltg-row-color, var(--text-primary));
  border-color: var(--ltg-row-color, rgba(var(--overlay-rgb), 0.32));
}

/* Once scored, the pill takes the goal's own color so it reads at a glance. */
.ltg-rating.is-rated .ltg-rating-toggle {
  color: var(--ltg-row-color, var(--text-primary));
  border-color: var(--ltg-row-color, var(--border-subtle));
}

body.theme-light .ltg-rating.is-rated .ltg-rating-toggle {
  color: var(--ltg-row-text-light, var(--ltg-row-color, var(--text-primary)));
}

.ltg-rating-value {
  font-size: 10px;
  font-weight: 700;
}

.ltg-rating-max {
  opacity: 0.65;
}

/* The 1–10 strip. `fixed`, not `absolute`: every surface that hosts a row sits
   inside an `overflow: hidden` container (the goals-dashboard scroller, the
   week/month/quarter grids), which CLIPPED an absolutely-positioned picker —
   the bottom row's strip got sliced to a couple of visible dots. Fixed takes it
   out of every clipping context; initLtgRating() places it against the pill's
   viewport rect on open and closes it on scroll (so it can't drift). */
.ltg-rating-scale {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
  width: max-content;
  max-width: 210px;
  padding: 5px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--card, var(--utility-surface));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.ltg-rating-scale[hidden] {
  display: none;
}

.ltg-rating-dot,
.ltg-rating-clear {
  width: 17px;
  height: 17px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  background: var(--utility-surface);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color 100ms ease, background-color 100ms ease, border-color 100ms ease;
}

.ltg-rating-dot:hover,
.ltg-rating-clear:hover {
  border-color: var(--ltg-row-color, var(--accent, #4a9eff));
  color: var(--ltg-row-color, var(--accent, #4a9eff));
}

.ltg-rating-dot.selected {
  background: var(--ltg-row-color, var(--accent, #4a9eff));
  border-color: var(--ltg-row-color, var(--accent, #4a9eff));
  color: #fff;
}

.ltg-rating-clear {
  margin-left: 2px;
  font-size: 11px;
}

/* ── Competence variant (skill-improvement goals) ─────────────────────
   Same pill, but the picker is four labelled stage rows (unconscious
   incompetence → unconscious competence) stacked vertically instead of a
   1–10 number strip. */
.ltg-rating-scale--competence {
  flex-direction: column;
  align-items: stretch;
  max-width: 230px;
}

.ltg-rating-stage {
  width: 100%;
  height: auto;
  justify-items: start;
  padding: 3px 8px;
  text-align: left;
  white-space: nowrap;
}

/* The clear button keeps its square look but rides its own line, far right. */
.ltg-rating-scale--competence .ltg-rating-clear {
  margin-left: auto;
}

/* The closed pill carries the full stage name AND its abbreviation; the foot
   strip's fit test (ltg_row_foot.js) stamps `.ltg-rating--abbrev` when the
   full name would crowd the strip. Full name by default, UI/CI/CC/UC when
   abbreviated. Both spans stay in the DOM so a resize can swap back. */
.ltg-rating--competence .ltg-rating-toggle {
  white-space: nowrap;   /* the name must widen the pill, not wrap it two lines tall */
}

.ltg-rating--competence .ltg-rating-value-short {
  display: none;
}

.ltg-rating--competence.ltg-rating--abbrev .ltg-rating-value-full {
  display: none;
}

.ltg-rating--competence.ltg-rating--abbrev .ltg-rating-value-short {
  display: inline;
}