/* Goals side panel.
   Panel chrome (slide-in, fixed positioning, header) is inherited from
   .chat-panel in chat.css. This file only lays out the embedded goals editors;
   their column/row styling comes from each view's stylesheet (the wlg one is
   loaded globally; the mlg/qlg ones are loaded when those views are visited,
   which always happens before their panel can be opened). */

/* The ‹ period › row (2026-08-12). Sits between the header and the body, and is
   the only thing naming the horizon on screen now that the title is fixed at
   "Long-Term Goals" for every scope.

   A row of its own rather than controls in the panel header, for the reason the
   Today's-schedule panel gives: the header's right edge is the close button, and
   an arrow next to it gets pressed by anyone aiming for ×.

   The arrow and title classes are the shared day-stepper's
   (`styles/daily-goals-sidebar.css`) because the control IS that island — only
   the surrounding row is local. */
.weekly-goals-nav-slot {
  flex: 0 0 auto;
}

.weekly-goals-nav {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

/* The label is the horizon PICKER (2026-08-12) — pressing it opens the menu. It
   is a span in both renders (React owns the island's children; see
   js/weekly-goals-panel/weekly_goals_panel_horizons.js for why the click is
   delegated rather than bound), so the affordance has to be CSS: the caret, the
   cursor, and a focus ring on the row that carries the keyboard path. */
.weekly-goals-nav .daily-goals-sidebar-date-title {
  overflow: hidden;
  color: var(--text-primary);
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-goals-nav .daily-goals-sidebar-date-title::after {
  content: '▾';
  margin-left: 6px;
  opacity: 0.55;
}

.weekly-goals-nav .daily-goals-sidebar-date-title:hover::after {
  opacity: 1;
}

.weekly-goals-nav:focus-visible {
  outline: 2px solid var(--accent, #4a9eff);
  outline-offset: -2px;
  border-radius: 6px;
}

/* Narrow enough to sit under the label rather than over the panel's edge. */
.weekly-goals-horizon-menu {
  min-width: 148px;
}

/* The refused pairing: this horizon's own board is the view behind the panel.
   See `conflictView` in js/weekly-goals-panel/weekly_goals_panel_periods.js. */
.weekly-goals-conflict-note {
  margin: 0;
  padding: 14px 4px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

/* The DAILY horizon mounts one column of the Daily board. That board's own
   stylesheet lays it out as a seven-track sideways scroller; in a ~320px panel it
   is a single column that fills the width. */
.weekly-goals-body .dlg-view--embedded {
  padding: 0;
  overflow: visible;
}

.weekly-goals-body .dlg-view--embedded .dlg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
  background: var(--card);
}

.weekly-goals-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

/* Each embedded editor is wrapped in its view's `.*-view` class so every
   view-scoped rule applies; strip the full view's page padding/scroll inside
   the panel, and let the parent-scope section card fill the panel width. */
.weekly-goals-body .wlg-view--embedded,
.weekly-goals-body .mlg-view--embedded,
.weekly-goals-body .qlg-view--embedded {
  padding: 0;
  overflow: visible;
  gap: 0;
}
.weekly-goals-body .mlg-view--embedded > *,
.weekly-goals-body .qlg-view--embedded > * {
  width: 100%;
}

/* Monthly-goals sidebar fills the panel rather than the view's centered,
   max-width column. */
.weekly-goals-body .wlg-sidebar--embedded {
  justify-content: stretch;
}
.weekly-goals-body .wlg-sidebar--embedded > * {
  width: 100%;
}

/* The embedded column is a single full-width column, not the month grid's
   multi-column layout. JS also sets grid-template-columns; this is the CSS
   fallback + a panel-friendly background. */
.weekly-goals-body .wlg-grid--single {
  grid-template-columns: minmax(0, 1fr);
  background: var(--card);
}

/* Let the two cards (outcome / skill) breathe a little more in the narrow
   panel than they do in the dense month grid. */
.weekly-goals-body .wlg-grid .section-card {
  padding: 12px 14px;
}

/* ── Text sizing ─────────────────────────────────────────────────────────
   Match the long-term-goals tabs: 16px goal-title / reflection / support /
   prompt text, 14px parent-link tags. The embedded editors already carry their
   view class, but scoping to the panel body makes this hold for every mounted
   scope (weekly / monthly / quarterly / yearly) regardless. */
.weekly-goals-body .ltg-text,
.weekly-goals-body .wlg-reflection,
.weekly-goals-body .mlg-reflection,
.weekly-goals-body .qlg-reflection,
.weekly-goals-body .ltg-support-answer,
.weekly-goals-body .ltg-goal-prompt-label {
  font-size: 16px;
}

.weekly-goals-body .wlg-monthly-tag,
.weekly-goals-body .wlg-quarterly-tag,
.weekly-goals-body .mlg-quarterly-tag,
.weekly-goals-body .mlg-yearly-tag,
.weekly-goals-body .qlg-yearly-tag,
.weekly-goals-body .wlg-tag-emoji,
.weekly-goals-body .mlg-tag-emoji,
.weekly-goals-body .qlg-tag-emoji {
  font-size: 14px;
}

/* Let parent-link tags grow to the panel width before truncating (no 140px cap). */
.weekly-goals-body .wlg-tag-name,
.weekly-goals-body .mlg-tag-name,
.weekly-goals-body .qlg-tag-name {
  max-width: none;
}