/* Weekly long-term goals view */

@import url('../week/cards/card-header.css');
@import url('../week/shared/long-term-popup.css');
/* "Connect to <parent> Goals" — the horizon above this board, as a column of
   it. See js/horizon-connect/. */
@import url('../../styles/horizon-connect.css');

/* ── Section card base (needed if grid.css not loaded first) ─── */
.wlg-view .section-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── View layout ─────────────────────────────────────────────── */
/* The board FILLS the tab. 24px of page padding around a bordered, rounded,
   filled grid made the week a floating island with the page showing through
   around it — three surfaces stacked to say one thing. 12px matches the Daily
   tab's, and the grid below stretches into what is left (2026-08-07). */
.wlg-view {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  box-sizing: border-box;
}

/* The wrapper `buildViewDom` puts the grid in. It is a flex child, so without
   these the grid sizes to its content and the columns stop short of the bottom of
   the tab — which is the "island" complaint again, in the other axis. */
.wlg-grid-wrap {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
.wlg-grid-wrap > .wlg-grid {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── Sidebar (monthly goals) ─────────────────────────────────── */
.wlg-sidebar {
  width: 100%;
  display: flex;
  justify-content: center;
}

.wlg-sidebar > * {
  width: min(480px, calc(100% - 32px));
}

.wlg-sidebar .card-header {
  height: auto;
  min-height: 32px;
}


/* ── Week grid (column count set dynamically by JS) ──────────── */
/* ⚠️ The bordered, rounded, filled panel this used to be went on 2026-08-07 —
   see `.gb-board` in styles/goal-board.css, which every grid that draws goal
   cards now also wears and which carries the surface (transparent), the flow (one
   row) and the 12px gutter between columns. What is left here is the fallback
   track template only; the JS writes the real one, one track per week on screen.

   The Daily Goals tab @imports this file for the `.wlg-grid` frame and then
   overrides it at `.dlg-view .wlg-grid.dlg-grid` — its seven day columns are the
   one board that deliberately scrolls sideways. */
.wlg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr)); /* fallback; JS overrides */
}

/* 🔴 A week column is a REAL BOX again (`.gb-col`, styles/goal-board.css).
   It was `display: contents` for as long as a column held two stacked cards —
   the trick that let outcome cards share grid row 1 and process cards row 2
   across every column. The board merged those two cards into one list on
   2026-08-07, so the trick bought nothing, and it cost the whole gesture: a
   `display: contents` element generates NO box, so it has no rect, and
   `elementFromPoint(...).closest('.gb-col')` — how the drag layer decides which
   week you dropped on — could never find one. The card armed, the carry
   followed the pointer, and the drop landed on nothing.

   Do not reintroduce it here to line cards up across columns; the columns are
   flex and stretch on their own. */

/* Section-card inside wlg-grid: borderless inset style */
.wlg-grid .section-card {
  background: transparent;
  border: none;
  border-right: 1px solid rgba(var(--overlay-rgb), 0.05);
  border-bottom: 1px solid rgba(var(--overlay-rgb), 0.05);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 12px 14px 10px;
}

.wlg-grid .wlg-week-column:last-child > * {
  border-right: none;
}

.wlg-grid .wlg-week-column.is-current > .section-card {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
.wlg-grid .wlg-week-column.is-current .wlg-week-label {
  color: var(--accent);
}

/* ── Outcome card ────────────────────────────────────────────── */
.wlg-grid .wlg-outcome-card {
  min-height: 140px;
  padding-top: 14px;
}

.wlg-grid .wlg-outcome-card .card-header {
  height: 28px;
  margin-bottom: 10px;
}

/* ── Process card ────────────────────────────────────────────── */
.wlg-grid .wlg-process-card {
  min-height: 120px;
  padding-top: 10px;
  border-bottom: none;
}

/* ── Week label in column header ────────────────────────────── */
.wlg-week-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* ── Process section label ───────────────────────────────────── */
.wlg-process-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ── Ltg-rows inside week columns ────────────────────────────── */
.wlg-outcome-card .ltg-rows,
.wlg-process-card .ltg-rows {
  gap: 4px;
}

.wlg-outcome-card .ltg-row,
.wlg-process-card .ltg-row {
  padding: 4px;
  border-radius: 8px;
}

/* Override ltg-row-main grid for this whole view: add toggle column */
.wlg-view .ltg-row-main {
  grid-template-columns: 14px 32px minmax(0, 1fr) 28px auto;
  gap: 6px;
  align-items: center;
}

.wlg-outcome-card .ltg-row-main,
.wlg-process-card .ltg-row-main {
  /* toggle · emoji · title · color · remove. No goal-number track — the number
     span is gone from the row markup; leaving its 16px track here pushed the
     title textarea into it and squeezed it to one character per line. */
  grid-template-columns: 14px 28px minmax(0, 1fr) 26px auto;
  gap: 4px;
}

.wlg-outcome-card .ltg-add,
.wlg-process-card .ltg-add {
  width: 24px;
  height: 24px;
  font-size: 14px;
}

/* ── Toggle button ───────────────────────────────────────────── */
.wlg-toggle {
  width: 14px;
  height: 14px;
  min-width: 14px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wlg-toggle:hover {
  color: var(--text-secondary);
}

/* ── Goal title text ─────────────────────────────────────────── */
.wlg-view .ltg-text {
  font-size: 16px;
}

/* ── Reflection + support prompt textareas ───────────────────── */
.wlg-reflection-wrap {
  padding: 6px 4px 4px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wlg-reflection-wrap[hidden] {
  display: none;
}

.wlg-view .ltg-goal-prompt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wlg-view .ltg-goal-prompt[hidden] {
  display: none;
}

.wlg-view .ltg-goal-prompt-label {
  font-size: 16px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.4;
  padding: 0 2px;
}

.wlg-view .ltg-prompt-chip {
  font-style: normal;
  font-weight: normal;
  /* The chip holds the FULL goal title. nowrap made it an unbreakable run: with
     the reflection tray open, the row could not shrink below the chip, so the
     whole column stretched and the title field stopped wrapping. Let it wrap. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.wlg-view .ltg-prompt-chip-emoji {
  margin-right: 2px;
  color: var(--text-primary, #fff);
}

.wlg-reflection,
.wlg-view .ltg-support-answer {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  padding: 2px;
  resize: none;
  overflow: hidden;
  min-height: 38px;
}

.wlg-reflection:focus,
.wlg-view .ltg-support-answer:focus {
  outline: none;
}

.wlg-reflection::placeholder,
.wlg-view .ltg-support-answer::placeholder {
  color: var(--text-muted);
}

/* Light mode: each goal's reflection (and support answer) sits on the accent
   row below the goal, so its text + placeholder go light for contrast. */
/* ⚠️ The light-mode `color: #fff` that used to be here is GONE (2026-08-13).
   It was written when the accent row was a saturated colour; `--utility-surface-accent`
   now resolves 88% toward WHITE in light themes, so white ink on it measured
   ~1.15:1 across every light preset — invisible. The base rules above are already
   theme-aware (`--text-secondary` / `--text-muted`), which is what these now use. */
body.theme-light .wlg-reflection,
body.theme-light .wlg-view .ltg-support-answer {
  color: var(--text-secondary);
}

body.theme-light .wlg-reflection::placeholder,
body.theme-light .wlg-view .ltg-support-answer::placeholder {
  color: var(--text-muted);
}

/* ── Link tag chips (monthly + quarterly) ─────────────────────────── */
.wlg-monthly-tags,
.wlg-quarterly-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 4px 4px;
}

/* Unlinked goal → empty tag rail. Collapse it so the row's grid gap doesn't
   leave a phantom band between the title and the reflection tray below it. */
.wlg-monthly-tags:empty,
.wlg-quarterly-tags:empty {
  display: none;
}

.wlg-monthly-tag,
.wlg-quarterly-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--utility-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 100px;
  padding: 2px 6px 2px 5px;
  font-size: 14px;
  color: var(--wlg-tag-color, var(--text-secondary));
  max-width: 100%;
}

/* Same as long-term-popup.css: the chip is FILLED with its parent's colour in
   light mode, not written in it. (This sheet carries its own copy of the chip
   because the standalone Weekly tab sizes it larger.) */
body.theme-light .wlg-monthly-tag,
body.theme-light .wlg-quarterly-tag {
  background: var(--wlg-tag-bg-light, var(--utility-surface));
  border-color: transparent;
  color: var(--wlg-tag-fg-light, var(--wlg-tag-color-light, var(--wlg-tag-color, var(--text-secondary))));
}

.wlg-tag-emoji {
  font-size: 14px;
  flex-shrink: 0;
}

.wlg-tag-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wlg-tag-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 1px;
}

.wlg-tag-remove:hover {
  color: var(--text-secondary);
}

/* Live word count for reflection textareas. The count is inserted after the
   textarea, then pulled into the textarea's bottom-left corner. Loaded app-wide
   via index.html, so it styles every goal-horizon view, the goals sidebar, and
   calendar reflection cards. */
.ltg-word-count {
  font-size: 11px;
  line-height: 1;
  color: var(--text-muted);
  text-align: left;
  user-select: none;
  pointer-events: none;
}

textarea.ltg-word-count-target {
  padding-bottom: 16px !important;
}

textarea.ltg-word-count-target + .ltg-word-count:not(.ltg-word-count--strip) {
  position: relative;
  z-index: 1;
  width: max-content;
  max-width: 100%;
  margin-top: -14px;
  margin-left: 2px;
  margin-bottom: 2px;
}

/* Card surfaces with a bottom actions strip (calendar goal cards, placeholder
   cards, goal trays, daily dashboard cards): one aggregate count at the FAR
   LEFT of the strip. The strip is flex + justify-content:flex-end, so
   margin-right:auto pins the count left while the pencil/"edit" stays right. */
.icx-prompts-actions .ltg-word-count--strip {
  position: static;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  align-self: center;
}

/* Surfaces that hide the bare reflection textarea itself (hidden attr, no
   wrapping tray) hide its below-box count with it. */
textarea[hidden] + .ltg-word-count {
  display: none;
}

/* "edit" label after the pencil icon in the actions strip. */
.icx-prompts-edit-label {
  margin-left: 4px;
  font-size: 11px;
  line-height: 1;
}

/* ── Ended goals (deleted mid-week, earlier days kept) ─────────── */
/* The goal is over but its reflections aren't: it stays legible so the days
   before its cutoff still read, while making clear nothing more lands here.
   Opacity only — the row keeps its goal color, so it still scans as itself. */
.wlg-row-ended {
  opacity: 0.55;
}

.wlg-row-ended .ltg-text {
  text-decoration: line-through;
}

/* The × stays fully live: it's how an ended goal gets removed for good. */
.wlg-row-ended .ltg-remove {
  opacity: 1;
}

.wlg-row-ended .ltg-color-btn {
  cursor: default;
}