/* =====================================================================
 * winFocus styles. BEM-ish, prefixed `wf-`. Scoped to .wf-shell so
 * they never leak into the rest of the site. See docs/winFocus/.
 * ===================================================================== */

/* Reserve scrollbar gutter so hiding board columns never shifts content */
html { scrollbar-gutter: stable; }

.wf-shell {
  --wf-bg: #f7f8fa;
  --wf-card: #ffffff;
  --wf-border: #e3e6eb;
  --wf-ink: #1f2330;
  --wf-muted: #6b7280;
  --wf-accent: #2563eb;
  --wf-warn: #d97706;
  --wf-danger: #dc2626;
  --wf-ok: #16a34a;
  --wf-pad: 16px;
  --wf-radius: 10px;
  color: var(--wf-ink);
}
.wf-shell.wf-adhd-on { --wf-pad: 22px; }
.wf-shell.wf-adhd-on .wf-card,
.wf-shell.wf-adhd-on .wf-section { padding: var(--wf-pad); }

.wf-header { background: var(--wf-bg); border-bottom: 1px solid var(--wf-border); padding: 10px 16px; }
.wf-title { font-size: 1.1rem; }
/* nowrap: prevents the nav from growing to 2 rows (which would change
   appbar height and cause the whole page to jump on level change) */
.wf-nav { display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; }
.wf-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px; color: var(--wf-muted); text-decoration: none;
  font-size: 0.92rem;
}
.wf-nav__link:hover { background: #eef1f5; color: var(--wf-ink); text-decoration: none; }
.wf-nav__link.is-active { background: var(--wf-accent); color: #fff; }
.wf-adhd-pill { background: #eef2ff; color: #3730a3; padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; }

.wf-page { padding: 16px; max-width: 1400px; }

.wf-hero {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: #fff; padding: 20px 24px; border-radius: var(--wf-radius); margin-bottom: 16px;
}
.wf-hero__kicker { opacity: 0.85; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.wf-hero__next { font-size: 1.4rem; margin-top: 4px; }
.wf-hero__cta { color: #fff; text-decoration: underline; }

.wf-card, .wf-section {
  background: var(--wf-card); border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius); padding: 14px; height: 100%;
}
.wf-card__hd { font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.wf-card__list { list-style: none; padding-left: 0; margin: 0; }
.wf-card__list li { padding: 4px 0; border-bottom: 1px dashed #eef0f3; }
.wf-card__list li:last-child { border-bottom: 0; }
.wf-card__big { font-size: 1.6rem; font-weight: 600; }

.wf-pill { display: inline-block; background: #eef2ff; color: #3730a3; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; margin-left: 6px; }

.wf-section__hd { font-weight: 600; margin-bottom: 6px; }
.wf-section--must { border-color: var(--wf-accent); }
.wf-section--must .wf-section__hd { color: var(--wf-accent); }
.wf-section--avoid { border-color: #fde68a; background: #fffbeb; }

.wf-quick-capture { background: #fff; border: 1px dashed var(--wf-border); padding: 12px; border-radius: var(--wf-radius); }
.wf-quick-capture__label { font-weight: 600; display: block; margin-bottom: 4px; }

.wf-form .form-group { margin-bottom: 10px; }
.wf-more summary { cursor: pointer; }

.wf-list__row {
  display: flex; align-items: center; padding: 8px 4px; border-bottom: 1px solid #eef0f3; gap: 8px;
}
.wf-list__title { flex: 1; }
.wf-list__actions { display: flex; align-items: center; gap: 4px; }
.wf-list__actions .form-control { width: auto; }

.wf-type {
  display: inline-block; font-size: 0.7rem; padding: 1px 6px; border-radius: 4px;
  background: #f3f4f6; color: #4b5563; margin-right: 6px; text-transform: lowercase;
}
.wf-type--task { background: #dbeafe; color: #1e40af; }
.wf-type--idea { background: #fef3c7; color: #92400e; }
.wf-type--bug { background: #fee2e2; color: #991b1b; }
.wf-type--experiment { background: #ede9fe; color: #5b21b6; }
.wf-type--promise { background: #fce7f3; color: #9d174d; }

.wf-status {
  display: inline-block; font-size: 0.75rem; padding: 1px 8px; border-radius: 999px;
  background: #f3f4f6; color: #4b5563;
}
.wf-status--active   { background: #dcfce7; color: #166534; }
.wf-status--paused   { background: #fef9c3; color: #854d0e; }
.wf-status--shipped  { background: #dbeafe; color: #1e40af; }
.wf-status--killed   { background: #fee2e2; color: #991b1b; }
.wf-status--running  { background: #ede9fe; color: #5b21b6; }
.wf-status--complete { background: #dcfce7; color: #166534; }
.wf-status--abandoned{ background: #fee2e2; color: #991b1b; }

/* ---- Board ---------------------------------------------------------- */
.wf-board {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 16px;
  align-items: flex-start;
  -webkit-overflow-scrolling: touch;
}
.wf-col {
  flex: 0 0 260px;
  background: var(--wf-bg);
  border-radius: var(--wf-radius);
  padding: 8px;
}
@media (max-width: 600px) { .wf-col { flex: 0 0 82vw; } }
.wf-col__hd {
  font-weight: 600; padding: 4px 6px 8px; display: flex; align-items: center; gap: 6px;
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.wf-col__body { display: flex; flex-direction: column; gap: 6px; min-height: 48px; }
.wf-col__empty {
  border: 2px dashed var(--wf-border); border-radius: 8px;
  padding: 16px 8px; text-align: center; color: var(--wf-muted); font-size: 0.8rem;
}

/* Column accent icons */
.wf-col__icon--inbox   { color: #94a3b8; }
.wf-col__icon--next    { color: #2563eb; }
.wf-col__icon--doing   { color: #7c3aed; }
.wf-col__icon--waiting { color: #d97706; }
.wf-col__icon--done    { color: #16a34a; }
.wf-col__icon--parking { color: #64748b; }

/* Cards — fully enclosed with top accent (v0.1.9) */
.wf-card-item {
  background: #fff;
  border: 1px solid #c4c9d4;
  border-top-width: 3px;
  border-radius: 8px;
  padding: 10px 12px 8px;
  font-size: 0.9rem; cursor: default;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  transition: box-shadow 0.15s;
}
.wf-card-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.16); }
.wf-card-item--inbox   { border-top-color: #94a3b8; }
.wf-card-item--next    { border-top-color: #2563eb; }
.wf-card-item--doing   { border-top-color: #7c3aed; }
.wf-card-item--waiting { border-top-color: #d97706; }
.wf-card-item--done    { border-top-color: #16a34a; opacity: 0.72; }
.wf-card-item--parking { border-top-color: #64748b; }

.wf-card-item__top {
  display: flex; align-items: flex-start; gap: 5px; margin-bottom: 4px;
}
.wf-card-item__drag {
  color: var(--wf-muted); cursor: grab; font-size: 0.8rem;
  padding-top: 3px; flex-shrink: 0; touch-action: none;
}
.wf-card-item__drag:active { cursor: grabbing; }
.wf-card-item__title { flex: 1; font-size: 0.88rem; line-height: 1.4; word-break: break-word; }
.wf-card-item__del {
  background: none; border: none; color: var(--wf-muted); cursor: pointer;
  padding: 0 2px; font-size: 0.75rem; flex-shrink: 0;
  opacity: 0; transition: opacity 0.15s;
}
.wf-card-item:hover .wf-card-item__del,
.wf-card-item:focus-within .wf-card-item__del { opacity: 1; }
@media (max-width: 768px) { .wf-card-item__del { opacity: 0.5; } }

/* Rank control — ▲ badge ▼ stacked inline */
.wf-rank-ctrl {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; flex-shrink: 0; margin-top: 1px;
}
.wf-rank-btn {
  background: none; border: none; cursor: pointer;
  color: var(--wf-muted); font-size: 0.5rem; line-height: 1;
  padding: 0 2px; transition: color 0.12s;
}
.wf-rank-btn:hover:not(:disabled) { color: #374151; }
.wf-rank-btn:disabled { opacity: 0.2; cursor: default; }

/* Daily priority toggle on card */
.wf-card-daily-btn {
  background: none; border: none; cursor: pointer;
  color: #d1d5db; font-size: 0.78rem; flex-shrink: 0; padding: 0 2px;
  transition: color 0.15s, opacity 0.15s;
  opacity: 0;
}
.wf-card-item:hover .wf-card-daily-btn,
.wf-card-item:focus-within .wf-card-daily-btn { opacity: 1; }
.wf-card-daily-btn.is-active { color: #d97706; opacity: 1; }
@media (max-width: 768px) { .wf-card-daily-btn { opacity: 0.5; } }

.wf-card-item__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px; font-size: 0.72rem; margin-bottom: 4px;
}

/* Project name chip on board card */
.wf-card-project {
  display: inline-flex; align-items: center;
  font-size: 0.67rem; padding: 1px 6px; border-radius: 4px;
  background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Move-to footer — hidden, revealed on hover */
.wf-card-item__footer {
  display: flex; flex-wrap: wrap; gap: 3px;
  max-height: 0; overflow: hidden;
  transition: max-height 0.2s ease, padding-top 0.15s;
}
.wf-card-item:hover .wf-card-item__footer,
.wf-card-item:focus-within .wf-card-item__footer {
  max-height: 70px;
  padding-top: 4px;
}
@media (max-width: 768px) {
  .wf-card-item__footer { max-height: 70px; padding-top: 4px; }
}
.wf-tag {
  display: inline-block; font-size: 0.68rem; padding: 1px 5px;
  border-radius: 4px; background: #f3f4f6; color: #6b7280; margin-left: 4px;
}

/* Status move buttons (color-coded pills) */
.wf-status-btn {
  font-size: 0.68rem; padding: 2px 7px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; font-weight: 500;
  line-height: 1.6; transition: opacity 0.1s, transform 0.1s;
  /* min tap target on mobile */
  min-height: 28px;
}
.wf-status-btn:hover { opacity: 0.8; transform: translateY(-1px); }
.wf-status-btn--inbox   { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.wf-status-btn--next    { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.wf-status-btn--doing   { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.wf-status-btn--waiting { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.wf-status-btn--done    { background: #dcfce7; color: #166534; border-color: #86efac; }
.wf-status-btn--parking { background: #f1f5f9; color: #475569; border-color: #94a3b8; }

/* Drag ghost + chosen states (SortableJS classes) */
.wf-card-ghost  { opacity: 0.3; background: #e0e7ff !important; border: 2px dashed #6366f1 !important; }
.wf-card-chosen { box-shadow: 0 4px 18px rgba(37,99,235,0.22); }

.wf-table th { font-size: 0.8rem; text-transform: uppercase; color: var(--wf-muted); }

.wf-modal { position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 16px; }
.wf-modal[hidden] { display: none; }
.wf-modal__card { background: #fff; border-radius: var(--wf-radius); padding: 20px; max-width: 720px; width: 100%; max-height: 90vh; overflow: auto; }

.wf-collapsed { display: none; }
.wf-adhd-off .wf-collapsed { display: block; }

/* ---- Learning mode -------------------------------------------------- */
.wf-learn-pill {
  background: #f0fdf4; color: #166534;
  padding: 4px 10px; border-radius: 999px; font-size: 0.8rem;
  cursor: pointer; border: 1px solid #bbf7d0;
  white-space: nowrap;
}
.wf-learn-pill:hover { background: #dcfce7; }
.wf-learn-pill--active { background: #166534 !important; color: #fff !important; border-color: #166534 !important; transition: background 0.3s; }

/* ---- Focus level slider -------------------------------------------- */
.wf-level-wrap {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.wf-level-lbl {
  font-size: 0.75rem; color: var(--wf-muted); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.03em;
}
.wf-level-slider {
  -webkit-appearance: none; appearance: none;
  width: 80px; height: 4px; border-radius: 2px;
  background: linear-gradient(to right, #16a34a 0%, #ca8a04 50%, #dc2626 100%);
  outline: none; cursor: pointer; flex-shrink: 0; margin: 0;
}
.wf-level-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid #374151;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.wf-level-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid #374151;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.wf-level-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; border-radius: 50%;
  font-size: 0.78rem; font-weight: 700; flex-shrink: 0; border: 1px solid currentColor;
}
.wf-level-badge--low     { background: #dcfce7; color: #166534; border-color: #86efac; }
.wf-level-badge--mid     { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.wf-level-badge--high    { background: #ffedd5; color: #c2410c; border-color: #fb923c; }
.wf-level-badge--extreme { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.wf-level-name { font-size: 0.75rem; font-weight: 600; white-space: nowrap; display: inline-block; min-width: 4.5rem; /* longest: "Deep Work" */ }

/* ---- Progressive focus level hiding (1 change per level, cumulative) --------------- */
/* Nav tabs: each tab has a wf-nav-hide--Nup class */
.wf-shell.wf-level-3  .wf-nav-hide--3up,
.wf-shell.wf-level-4  .wf-nav-hide--4up,
.wf-shell.wf-level-5  .wf-nav-hide--5up,
.wf-shell.wf-level-7  .wf-nav-hide--7up,
.wf-shell.wf-level-8  .wf-nav-hide--8up,
.wf-shell.wf-level-9  .wf-nav-hide--9up { display: none !important; }

/* Board columns */
body.wf-level-2  .wf-col--parking { display: none !important; }
body.wf-level-4  .wf-col--done    { display: none !important; }
body.wf-level-6  .wf-col--inbox   { display: none !important; }
body.wf-level-8  .wf-col--waiting { display: none !important; }
body.wf-level-9  .wf-col--next    { display: none !important; }

/* Site chrome — progressive (Winfocus pages only, scoped to .wf-shell) */
.wf-shell.wf-level-3  ~ .footer,
body.wf-level-3  .wf-shell ~ .footer { display: none !important; }
.wf-shell.wf-level-9  .wf-view-bar > *:not(.wf-level-wrap) { display: none !important; }

/* Header icon hiding (classes on elements in layouts/nav.php) */
body.wf-level-2  .wf-hdr-hide--2up { display: none !important; }
body.wf-level-4  .wf-hdr-hide--4up { display: none !important; }
body.wf-level-6  .wf-hdr-hide--6up { display: none !important; }
body.wf-level-7  .wf-hdr-hide--7up { display: none !important; }
body.wf-level-8  .wf-hdr-hide--8up { display: none !important; }
body.wf-level-9  .wf-hdr-hide--9up { display: none !important; }
body.wf-level-10 .wf-hdr-hide--10up { display: none !important; }

/* Goals page: hide everything except focus zone at level 10 */
body.wf-level-10 .wf-goals-header,
body.wf-level-10 .wf-tier-section,
body.wf-level-10 .wf-learn-panel { display: none !important; }

/* Dashboard card hiding */
body.wf-level-7  .wf-dash-hide--7up { display: none !important; }
body.wf-level-9  .wf-dash-hide--9up { display: none !important; }

/* ---- Pinned project badge ------------------------------------------ */
.wf-pinned-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: #fef9c3; color: #854d0e; border: 1px solid #fde047;
  font-size: 0.68rem; padding: 1px 5px; border-radius: 4px; margin-left: 4px;
}

/* ---- Project tree hierarchy ----------------------------------------- */
.wf-tree-toggle { color: #6b7280; font-size: 0.85rem; line-height: 1; vertical-align: middle; }
.wf-tree-toggle:hover { color: #1d4ed8; }
.wf-tree-child { background: #fafbfc; }
tr[data-depth="2"] { background: #f5f6f8; }
tr[data-depth="3"] { background: #f0f1f4; }
.wf-proj-name-link { color: inherit; text-decoration: none; }
.wf-proj-name-link:hover { color: #2563eb; text-decoration: underline; }
.wf-add-sub-project, .wf-move-project { color: #9ca3af; }
.wf-add-sub-project:hover, .wf-move-project:hover { color: #2563eb; }
/* Drag handle */
.wf-drag-handle { cursor: grab; color: #d1d5db; margin-right: 6px; font-size: 0.8rem; display: inline-block; }
.wf-drag-handle:hover { color: #6b7280; }
.wf-row-dragging { opacity: 0.4; }
.wf-drag-hidden { display: none !important; }
/* Drop indicator: blue line above = insert as sibling before */
.wf-drop-before { position: relative; }
.wf-drop-before td { border-top: 3px solid #3b82f6 !important; }
/* Drop indicator: blue line below = insert as sibling after */
.wf-drop-after { position: relative; }
.wf-drop-after td { border-bottom: 3px solid #3b82f6 !important; }
/* Drop indicator: outline = nest as child of this project */
.wf-drop-child { outline: 2px solid #3b82f6; outline-offset: -2px; background: #eff6ff !important; }
.wf-drop-child td { background: inherit !important; }

/* ---- Project dashboard ---------------------------------------------- */
.wf-breadcrumb { font-size: 0.85rem; }
.wf-breadcrumb a { color: #6b7280; text-decoration: none; }
.wf-breadcrumb a:hover { color: #2563eb; text-decoration: underline; }
.wf-breadcrumb__sep { color: #d1d5db; margin: 0 4px; }
.wf-breadcrumb__current { color: #111827; font-weight: 600; }
.wf-proj-dash-header { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; }
.wf-proj-dash-stats .badge { font-size: 0.78rem; padding: 4px 8px; }
.wf-subproj-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px 14px; transition: border-color 0.15s, box-shadow 0.15s; text-decoration: none; color: inherit; }
.wf-subproj-card:hover { border-color: #3b82f6; box-shadow: 0 1px 4px rgba(59,130,246,0.15); text-decoration: none; color: inherit; }

/* ---- Learn mode full-content panel ---------------------------------- */
.wf-learn-experiments { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid #e5e7eb; }
.wf-learn-experiments ul { margin-bottom: 0; }

/* Guide reflection prompts (levels 4-5) */
.wf-guide-reflect { margin: 12px 0; background: rgba(239,246,255,0.7); border-radius: 8px; border: 1px solid #dbeafe; }
.wf-guide-reflect > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: #1d4ed8; font-size: 0.85rem; list-style: none; }
.wf-guide-reflect > summary::-webkit-details-marker { display: none; }
.wf-guide-reflect > summary::before { content: '▸ '; font-size: 0.75rem; }
.wf-guide-reflect[open] > summary::before { content: '▾ '; }
.wf-guide-reflect__body { padding: 4px 14px 14px; }

/* ---- Learn panels: visible by default; hidden per-page by JS/localStorage ---------- */
/* (old wf-learn-show toggle removed — panels now always render, JS dismisses them) */
.wf-learn-panel { transition: opacity 0.2s; }

.wf-insight {
  background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: var(--wf-radius); padding: 14px 16px;
  margin-bottom: 16px;
}
.wf-insight__hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  font-weight: 600; color: #1d4ed8;
  margin-bottom: 8px; font-size: 0.95rem;
}
.wf-insight__hd-text { flex: 1; }
/* .wf-learn-dismiss — removed in v0.1.5 (replaced by guide depth segmented control) */
.wf-insight__body { font-size: 0.88rem; color: #1e3a5f; line-height: 1.65; }
.wf-insight__body p { margin-bottom: 6px; }
.wf-insight__body p:last-child { margin-bottom: 0; }
.wf-insight__body strong { color: #1d4ed8; }

/* =====================================================================
 * Guide depth slider  (v0.1.8 — replaces dropdown)
 * ===================================================================== */
.wf-guide-slider {
  -webkit-appearance: none; appearance: none;
  width: 60px; height: 4px; border-radius: 2px;
  background: linear-gradient(to right, #e0e7ff 0%, #7c3aed 100%);
  outline: none; cursor: pointer; flex-shrink: 0; margin: 0;
}
.wf-guide-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid #7c3aed;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.wf-guide-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid #7c3aed;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.wf-guide-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; border-radius: 50%;
  font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
  background: #ede9fe; color: #6d28d9; border: 1px solid #c4b5fd;
}
.wf-guide-name { font-size: 0.75rem; font-weight: 600; color: #6d28d9; white-space: nowrap; display: inline-block; min-width: 5rem; /* longest: "Psychology" */ }

/* Level 0 — hide all guide panels entirely */
body[data-guide-level="0"] .wf-learn-panel { display: none; }

/* Guide tier visibility gating — tiers above current level are hidden */
.wf-guide-tier[data-guide-min="2"],
.wf-guide-tier[data-guide-min="3"],
.wf-guide-tier[data-guide-min="4"],
.wf-guide-tier[data-guide-min="5"] { display: none; }

body[data-guide-level="2"] .wf-guide-tier[data-guide-min="2"] { display: block; }

body[data-guide-level="3"] .wf-guide-tier[data-guide-min="2"],
body[data-guide-level="3"] .wf-guide-tier[data-guide-min="3"] { display: block; }

body[data-guide-level="4"] .wf-guide-tier[data-guide-min="2"],
body[data-guide-level="4"] .wf-guide-tier[data-guide-min="3"],
body[data-guide-level="4"] .wf-guide-tier[data-guide-min="4"] { display: block; }

body[data-guide-level="5"] .wf-guide-tier[data-guide-min="2"],
body[data-guide-level="5"] .wf-guide-tier[data-guide-min="3"],
body[data-guide-level="5"] .wf-guide-tier[data-guide-min="4"],
body[data-guide-level="5"] .wf-guide-tier[data-guide-min="5"] { display: block; }
.wf-insight__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px;
  background: rgba(255,255,255,0.5); border-radius: 6px; padding: 10px;
}
@media (max-width: 576px) { .wf-insight__cols { grid-template-columns: 1fr; } }

/* "?" help tooltip icons */
.wf-tip { cursor: help; color: var(--wf-muted); font-size: 0.78rem; margin-left: 4px; }
.wf-tip:hover { color: var(--wf-accent); }

/* =====================================================================
 * Item card modal (wf-item-modal)
 * ===================================================================== */

.wf-item-modal { max-width: 680px; }

.wf-item-modal__hd {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.wf-item-modal__title-input {
  flex: 1; font-size: 1.1rem; font-weight: 600;
  border: none; border-bottom: 2px solid #e3e6eb;
  padding: 4px 6px; outline: none; background: transparent; width: 100%;
}
.wf-item-modal__title-input:focus { border-bottom-color: #2563eb; }
.wf-item-modal__close {
  background: none; border: none; font-size: 1.5rem; line-height: 1;
  color: #6b7280; cursor: pointer; padding: 0 6px; flex-shrink: 0;
}
.wf-item-modal__close:hover { color: #1f2330; }

.wf-item-modal__meta-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center;
}
.wf-item-modal__select {
  padding: 4px 8px; border: 1px solid #e3e6eb; border-radius: 6px;
  font-size: 0.85rem; background: #f7f8fa; cursor: pointer;
}
.wf-item-modal__select:focus { outline: none; border-color: #2563eb; }

.wf-item-modal__daily-btn {
  padding: 4px 10px; border: 1px solid #d97706; border-radius: 6px;
  font-size: 0.85rem; background: #fff; color: #d97706;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.wf-item-modal__daily-btn:hover { background: #fef3c7; }
.wf-item-modal__daily-btn.is-active { background: #d97706; color: #fff; }
.wf-item-modal__daily-btn.is-active:hover { background: #b45309; }

.wf-item-modal__section { margin-bottom: 14px; }
.wf-item-modal__label {
  display: block; font-size: 0.78rem; font-weight: 600;
  color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px;
}
.wf-item-modal__hint { font-weight: normal; text-transform: none; }
.wf-item-modal__desc { font-size: 0.9rem; resize: vertical; }
.wf-item-modal__tags-input { font-size: 0.9rem; }

.wf-item-modal__actions {
  display: flex; align-items: center;
  padding: 10px 0; margin-bottom: 14px;
  border-top: 1px solid #e3e6eb; border-bottom: 1px solid #e3e6eb;
}

/* =====================================================================
 * Event / history timeline
 * ===================================================================== */
.wf-event-timeline__hd {
  font-size: 0.78rem; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
}
.wf-event-timeline__list {
  display: flex; flex-direction: column; gap: 0;
  max-height: 220px; overflow-y: auto;
}
.wf-event-timeline__item {
  display: flex; gap: 10px; font-size: 0.82rem;
  padding: 5px 0; border-bottom: 1px solid #f1f3f5;
}
.wf-event-timeline__item:last-child { border-bottom: none; }
.wf-event-timeline__time { color: #9ca3af; white-space: nowrap; flex-shrink: 0; }
.wf-event-timeline__desc { color: #4b5563; word-break: break-word; }
.wf-event-timeline__empty { color: #9ca3af; font-size: 0.82rem; font-style: italic; }

/* =====================================================================
 * Daily priority badge + clickable card titles
 * ===================================================================== */
/* Daily-priority star badge kept for daily.php view only */
.wf-daily-badge { color: #d97706; font-size: 0.75rem; margin-left: 3px; vertical-align: middle; }

/* ---- Board card priority rank badge -------------------------------- */
.wf-rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; border-radius: 50%;
  font-size: 0.62rem; font-weight: 700; flex-shrink: 0;
  background: #f3f4f6; color: #9ca3af; border: 1px solid #e5e7eb;
  line-height: 1;
}
.wf-col--doing .wf-rank-badge {
  background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe;
}
.wf-col--next .wf-rank-badge {
  background: #f0fdf4; color: #166534; border-color: #bbf7d0;
}

/* ---- Focus-gate Lockdown toast ------------------------------------ */
.wf-level-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1f2937; color: #f9fafb; padding: 9px 18px; border-radius: 8px;
  font-size: 0.85rem; z-index: 9999; opacity: 0;
  transition: opacity 0.2s ease; pointer-events: none; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.wf-level-toast.is-visible { opacity: 1; }
.wf-card-open { cursor: pointer; }
.wf-card-open:hover { text-decoration: underline; }

/* =====================================================================
 * Capture drawer (global, lives inside .wf-shell below the header bar)
 * ===================================================================== */
.wf-capture-drawer {
  overflow: hidden;
  max-height: 0;
  padding: 0 16px;
  transition: max-height 0.28s ease, padding 0.28s ease;
  background: #eef2ff;
  border-bottom: 2px solid var(--wf-accent);
}
.wf-capture-drawer.is-open {
  max-height: 700px;
  padding: 14px 16px 12px;
}
.wf-drawer-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.wf-drawer-close {
  background: none; border: none; color: var(--wf-muted);
  cursor: pointer; font-size: 1.1rem; padding: 0 6px; line-height: 1;
}
.wf-drawer-close:hover { color: var(--wf-ink); }
@media (max-width: 576px) {
  .wf-capture-drawer.is-open { max-height: 1000px; }
}

/* =====================================================================
 * Today's Plan — horizon board (second section on board.php)
 * ===================================================================== */
.wf-horizon__board {
  display: flex; flex-wrap: nowrap; gap: 12px;
  overflow-x: auto; padding-bottom: 8px;
}
.wf-horizon-col { min-width: 210px; flex: 1 0 210px; }
.wf-horizon-card {
  background: var(--wf-card); border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius); padding: 10px 12px; margin-bottom: 8px;
}
.wf-horizon-card__top { display: flex; align-items: flex-start; gap: 6px; }
.wf-hz-title {
  flex: 1; font-size: 0.9rem; line-height: 1.35; cursor: pointer;
}
.wf-hz-title:hover { text-decoration: underline; }
.wf-hz-star {
  background: none; border: none; font-size: 1rem; line-height: 1;
  cursor: pointer; color: var(--wf-muted); padding: 0 2px; flex-shrink: 0;
}
.wf-hz-star.is-active { color: var(--wf-warn); }
.wf-hz-star:hover { color: var(--wf-warn); }
.wf-horizon-card__meta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.wf-horizon-card__actions { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.wf-hz-move {
  background: none; border: 1px solid var(--wf-border); border-radius: 5px;
  font-size: 0.78rem; padding: 2px 8px; cursor: pointer; color: var(--wf-muted);
}
.wf-hz-move:hover { background: #f1f5f9; color: var(--wf-ink); }
.wf-hz-tag { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; }
.wf-hz-tag--doing { background: #dbeafe; color: #1e40af; }

/* col tinting for horizon */
.wf-col--today .wf-col__icon--today { color: #d97706; }
.wf-col--next .wf-col__icon--next   { color: #2563eb; }
.wf-col--hold .wf-col__icon--hold   { color: #6b7280; }
.wf-col--done .wf-col__icon--done   { color: #16a34a; }

@media (max-width: 576px) {
  .wf-horizon__board { flex-wrap: wrap; }
  .wf-horizon-col { min-width: 100%; flex: 1 0 100%; }
}

/* =====================================================================
 * Glossary / terminology tooltips — dotted amber underline on jargon
 * ===================================================================== */
.wf-gloss {
  text-decoration: underline dotted;
  text-decoration-color: #d97706;
  text-underline-offset: 2px;
  cursor: help;
  font-style: normal;
}
.wf-gloss:hover { text-decoration-color: #92400e; }

/* =====================================================================
 * v0.4.0 � Focus layout polish
 *   - Constrain header rows to same width as page content
 *   - Tighten slider/filter row on mobile
 *   - Drop full-width container-fluid in favor of wf-page max-width
 * ===================================================================== */
.wf-header__row {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.wf-view-bar { gap: 0.35rem 0.5rem; }
.wf-view-bar > * { margin-bottom: 0.25rem; }
/* At ≤900px the 8-item nav overflows a single line with text labels —
   switch to icon-only so the appbar stays one row at all levels */
@media (max-width: 900px) {
  .wf-nav__link span { display: none; }
  .wf-nav__link.is-active span { display: inline; }
}
@media (max-width: 575.98px) {
  .wf-header { padding: 8px 10px; }
  .wf-page { padding: 12px 10px; }
  .wf-nav { gap: 2px; }
  .wf-nav__link { padding: 5px 7px; font-size: 0.85rem; }
  .wf-level-slider { width: 64px; }
  .wf-guide-slider { width: 48px; }
  .wf-view-mode, .wf-view-project { max-width: 130px; }
}

/* =====================================================================
 * v0.4.2 — merged single-row appbar (brand + tabs + avatar in one bar)
 *   Removes the old separate wf-topbar from the layout.
 *   Logo links back to the main WinWinLabs site.
 * ===================================================================== */

/* Reset header padding — individual rows supply their own */
.wf-header { padding: 0 0 6px; }
@media (max-width: 575.98px) { .wf-header { padding: 0 0 4px; } }

/* The single combined app bar row */
.wf-appbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
}
@media (max-width: 575.98px) { .wf-appbar { padding: 6px 10px; } }

/* Add horizontal padding to the view-filter row to match appbar */
.wf-view-bar { padding: 0 16px 2px; }
@media (max-width: 575.98px) { .wf-view-bar { padding: 0 10px 2px; } }

/* Brand: gradient "winFocus" wordmark */
.wf-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 8px;
}
.wf-brand__app {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.4;
  white-space: nowrap;
  background: linear-gradient(90deg, #7c3aed 0%, #6366f1 50%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Life Timeline page header favicon */
.wf-tl-header-icon {
  width: 28px;
  height: 28px;
  vertical-align: -6px;
  margin-right: 2px;
}

/* Powered-by footer — always centered at page bottom */
.wf-powered-footer {
  text-align: center;
  padding: 16px 0 20px;
  margin-top: 2rem;
  border-top: 1px solid #f0f0f2;
}
.wf-powered-footer__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none !important;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.wf-powered-footer__link:hover { opacity: 1; }
.wf-powered-footer__label {
  font-size: 0.6rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}
.wf-powered-footer__logo { height: 48px; width: auto; display: block; }

/* Avatar (moved from layout wf-topbar) */
.wf-appbar__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e5e7eb;
  display: block;
}
.wf-appbar__avatar-icon {
  font-size: 1.5rem;
  color: #9ca3af;
  display: block;
}
/* Hide Bootstrap's default caret on the avatar toggle */
.wf-appbar .dropdown-toggle::after { display: none; }

/* ---- Must Do picker (Daily page) ----------------------------------- */
.wf-picker-toggle { font-size: 0.82rem; }
.wf-picker-chevron { display: inline-block; transition: transform 0.15s; }
.wf-picker-panel {
  border: 1px solid var(--wf-border);
  border-radius: 8px;
  background: var(--wf-card);
  margin-top: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.wf-picker-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--wf-border);
  font-size: 0.87rem;
}
.wf-picker-item:last-child { border-bottom: none; }
.wf-picker-item--added { opacity: 0.4; }
.wf-picker-item__title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-picker-add {
  background: none;
  border: 1px solid var(--wf-border);
  border-radius: 5px;
  padding: 1px 9px;
  cursor: pointer;
  color: var(--wf-accent);
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.wf-picker-add:hover:not(:disabled) {
  background: var(--wf-accent); color: #fff; border-color: var(--wf-accent);
}
.wf-picker-add:disabled { opacity: 0.4; cursor: default; }

/* ---- Board top capture bar ---------------------------------------- */
.wf-board-topbar { gap: 6px; }
.wf-board-capture-input { max-width: 440px; min-width: 200px; }
.wf-board-capture-more { white-space: nowrap; }
.wf-board-capture-more kbd {
  font-size: 0.7rem;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  padding: 0 4px;
  color: #374151;
}

/* ===================================================================
   Goals page  (v0.4.6)
   =================================================================== */
.wf-goals-page { padding-top: 1rem; }
.wf-goals-title { font-size: 1.1rem; font-weight: 700; color: #1f2937; }
.wf-goals-header { gap: 12px; margin-bottom: 0.75rem; }
@media (max-width: 575.98px) {
  /* Button group wraps below the title; let it fill the row */
  .wf-goals-header > div:last-child { width: 100%; justify-content: flex-end; }
  /* Tighten the left-border indent on tiers for narrow screens */
  .wf-tier-section { padding-left: 0.6rem !important; }
}

/* ── Research banner (collapsible) ─────────────────────────────────── */
.wf-goals-research-banner { display: none; } /* old class — superseded */
.wf-research-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f5f3ff;
  border: 1px solid #c4b5fd;
  border-radius: 8px;
  padding: 12px 14px;
}
.wf-research-banner--collapsed { padding: 8px 14px; }
.wf-research-banner__icon {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  color: #6366f1;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  margin-top: 2px;
}
.wf-research-banner--collapsed .wf-research-banner__body { display: none; }
.wf-research-banner__body { flex: 1; }
.wf-research-stat {
  font-size: 0.95rem;
  color: #1f2937;
  line-height: 1.5;
}
.wf-research-note {
  font-size: 0.78rem;
  color: #6b7280;
}
.wf-research-banner__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.82rem;
  color: #374151;
}
.wf-research-banner__hide {
  background: none;
  border: 1px solid #c4b5fd;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 0.75rem;
  color: #6366f1;
  cursor: pointer;
  flex-shrink: 0;
}
.wf-research-banner__hide:hover { background: #ede9fe; }

/* ── Quotes carousel ───────────────────────────────────────────────── */
/* ── Quotes carousel wrapper ──────────────────────────────────────────── */
.wf-quotes-wrap {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Collapsed "Quotes" pill — positioned left of action buttons;
   kept in flow (visibility:hidden) so other buttons never shift */
.wf-quotes-pill {
  display: inline-flex;    /* always occupies space */
  visibility: hidden;      /* JS switches to visible when carousel is collapsed */
  align-items: center;
  gap: 6px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  color: #6b7280;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 3px 12px;
  transition: background 0.12s;
  width: fit-content;
}
.wf-quotes-pill:hover { background: #e5e7eb; color: #374151; }

.wf-quotes-carousel {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px 6px;
  position: relative;
  flex-wrap: wrap;
}
/* "Hide" toggle — absolutely positioned top-right inside the carousel */
.wf-quotes-hide-btn {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  color: #d1d5db;
  cursor: pointer;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  padding: 0;
  text-transform: uppercase;
  transition: color 0.12s;
}
.wf-quotes-hide-btn:hover { color: #9ca3af; }

.wf-quotes-carousel__track {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.wf-quotes-carousel__slide {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease-in-out;
}
.wf-quotes-carousel__slide--active {
  opacity: 1;
  height: auto;
  overflow: visible;
}
.wf-quote__text {
  font-size: 0.95rem;
  font-style: italic;
  color: #374151;
  /* Reserve exactly 2 lines so single-line quotes don't collapse the layout */
  min-height: calc(0.95rem * 1.5 * 2);
  margin: 0 0 4px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wf-quote__attr {
  /* override global footer { background:#1f1f1f } from style.css */
  background: transparent;
  color: #4b5563;
  font-size: 0.8rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 0;
}
.wf-quotes-carousel__arrow {
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #6b7280;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}
.wf-quotes-carousel__arrow:hover { border-color: #6366f1; color: #6366f1; }
.wf-quotes-carousel__dots {
  display: flex;
  gap: 5px;
  width: 100%;
  justify-content: center;
  margin-top: 6px;
  margin-bottom: 2px;
}
.wf-quotes-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d1d5db;
  cursor: pointer;
  transition: background 0.15s;
}
.wf-quotes-carousel__dot--active { background: #6366f1; }

.wf-goals-empty { padding: 3rem 1rem; }
.wf-goals-cat-hd { border-bottom: 2px solid #f3f4f6; padding-bottom: 6px; margin-bottom: 10px; }
.wf-goals-cat-label { font-size: 0.95rem; color: #111827; }
.wf-goals-cat-icon { font-size: 1rem; }

/* Goal cards */
.wf-goal-card {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.wf-goal-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-color: #c7d2fe; }
.wf-goal-card--abandoned { opacity: 0.5; }
.wf-goal-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}
.wf-goal-vision-preview {
  font-size: 0.82rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wf-goal-status-badge { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* Goal card footer action buttons */
.wf-goal-action-btn {
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  padding: 4px 8px;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.wf-goal-action-btn + .wf-goal-action-btn { margin-left: 2px; }
.wf-goal-action-btn i { font-size: 0.7rem; margin-right: 3px; }

.wf-goal-action-btn--edit  { color: #4f46e5; }
.wf-goal-action-btn--edit:hover  { background: #ede9fe; color: #3730a3; }

.wf-goal-action-btn--delete { color: #9ca3af; }
.wf-goal-action-btn--delete:hover { background: #fee2e2; color: #b91c1c; }

/* Profile definition label in goal card footer */
.wf-goal-profile-label {
  color: #9ca3af;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}
.wf-goal-profile-label i { margin-right: 3px; font-size: 0.68rem; }
.wf-goal-profile-label--complete { color: #059669; }

.dark .wf-goal-action-btn--edit  { color: #818cf8; }
.dark .wf-goal-action-btn--edit:hover  { background: rgba(129,140,248,0.15); color: #a5b4fc; }
.dark .wf-goal-action-btn--delete { color: #64748b; }
.dark .wf-goal-profile-label { color: #64748b; }
.dark .wf-goal-profile-label--complete { color: #34d399; }
.dark .wf-goal-action-btn--delete:hover { background: rgba(239,68,68,0.12); color: #f87171; }
.dark .wf-goal-completeness-label { color: #64748b; }

/* Goals category add-card button — override Bootstrap btn-light blue states */
.wf-goal-add-cat {
  background: #fff !important;
  border: 2px dashed #d1d5db !important;
  color: #6b7280 !important;
  box-shadow: none !important;
  transition: border-color 0.15s, background 0.15s;
}
.wf-goal-add-cat:hover,
.wf-goal-add-cat:focus,
.wf-goal-add-cat:active {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
  color: #374151 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Goals category quick-add row */
.wf-goals-cat-quick { margin-top: 0.5rem; }
.gap-2 { gap: 0.5rem !important; }

/* Goals modal */
#posGoalModal .modal-dialog { max-width: 680px; }
#posGoalModal .form-row .form-group { margin-bottom: 0; }

/* Capture drawer: goal selector */
.wf-capture-goal-select { border-left: 3px solid #6366f1; }

/* =============================================================
   v0.4.8 — Goal completeness bar
   ============================================================= */
.wf-goal-completeness {
  height: 4px;
  background: #f3f4f6;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
  position: relative;
}
.wf-goal-completeness__bar {
  height: 100%;
  border-radius: 2px 2px 0 0;
  transition: width 0.4s ease;
}
.wf-goal-completeness__bar--low  { background: #f87171; }
.wf-goal-completeness__bar--mid  { background: #fbbf24; }
.wf-goal-completeness__bar--high { background: #34d399; }
.wf-goal-completeness-label {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* =============================================================
   v0.4.8 — Goal type badge (on cards)
   ============================================================= */
.wf-goal-type-badge { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; }
.wf-goal-type-badge--life      { background: #ede9fe; color: #6d28d9; }
.wf-goal-type-badge--decade    { background: #e0f2fe; color: #0369a1; }
.wf-goal-type-badge--five_year { background: #cffafe; color: #0891b2; }
.wf-goal-type-badge--annual    { background: #ccfbf1; color: #0d9488; }
.wf-goal-type-badge--current   { background: #fef3c7; color: #d97706; }

/* =============================================================
   v0.4.8 — Goal type picker (step 1 in modal)
   ============================================================= */
#posGoalModal .modal-dialog { max-width: 720px; }

.wf-goal-type-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf-goal-type-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  background: #fff;
}
.wf-goal-type-card:hover {
  border-color: var(--type-color, #6366f1);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  background: #fafafa;
}
.wf-goal-type-card__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--type-color, #6366f1);
  background: color-mix(in srgb, var(--type-color, #6366f1) 12%, white);
  border: 1.5px solid color-mix(in srgb, var(--type-color, #6366f1) 30%, white);
}
.wf-goal-type-card__body { flex: 1; min-width: 0; }
.wf-goal-type-card__label  { font-weight: 700; font-size: 0.9rem; color: var(--type-color, #111); }
.wf-goal-type-card__tagline{ font-size: 0.78rem; color: #6b7280; margin-bottom: 2px; }
.wf-goal-type-card__desc   { font-size: 0.78rem; color: #374151; margin-bottom: 4px; display: none; }
.wf-goal-type-card:hover .wf-goal-type-card__desc { display: block; }
.wf-goal-type-card__examples {
  display: none;
  padding-left: 1rem;
  margin: 0;
  font-size: 0.72rem;
  color: #9ca3af;
  font-style: italic;
}
.wf-goal-type-card:hover .wf-goal-type-card__examples { display: block; }
.wf-goal-type-card__select {
  flex-shrink: 0;
  align-self: center;
  color: var(--type-color, #6366f1);
  font-weight: 600;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.wf-goal-type-card:hover .wf-goal-type-card__select { opacity: 1; }

/* Badge in modal header (edit mode) */
.wf-goal-type-badge-hd {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
}

/* =============================================================
   v0.4.8 — Life Timeline page
   ============================================================= */
.wf-life-timeline-page { overflow-x: hidden; }

/* Empty state */
.wf-tl-empty-state { padding: 40px 20px; }
.wf-tl-empty-state__icon { font-size: 4rem; display: block; }

/* Zoom controls */
.wf-tl-zoom-controls { display: flex; gap: 4px; }
.wf-tl-zoom-btn { min-width: 56px; }
.wf-tl-zoom-btn.active {
  background: #1e40af;
  border-color: #1e40af;
  color: #fff;
}

/* Outer scroll container */
.wf-tl-outer {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  user-select: none;
  cursor: grab;
  position: relative;
}
.wf-tl-outer:active { cursor: grabbing; }
.wf-tl-outer:focus  { outline: 2px solid #6366f1; }
/* Life view: single-screen fit — no scrollbar */
.wf-tl-outer--fit   { overflow: hidden; }

/* Inner track (width set by JS) */
.wf-tl-track {
  position: relative;
  min-height: 270px;
  padding: 12px 30px 0;
}

/* Horizontal spine */
.wf-tl-spine {
  position: absolute;
  height: 4px;
  background: #d1d5db;
  border-radius: 2px;
}
/* Projected future segment: dashed to signal it’s estimated */
.wf-tl-spine--projected {
  background: repeating-linear-gradient(90deg, #d1d5db, #d1d5db 6px, transparent 6px, transparent 14px);
}

/* Decade tick marks */
.wf-tl-decade-mark {
  position: absolute;
  width: 2px;
  height: 20px;
  background: #9ca3af;
  border-radius: 1px;
}
.wf-tl-fiveyear-mark {
  position: absolute;
  width: 1px;
  height: 10px;
  background: #d1d5db;
}
.wf-tl-decade-label {
  position: absolute;
  font-size: 0.65rem;
  color: #9ca3af;
  white-space: nowrap;
}

/* Milestone markers */
.wf-tl-milestone {
  position: absolute;
  display: flex;
  flex-direction: column-reverse; /* dot at bottom, label always above */
  align-items: center;
}
/* above-lane: dot above spine, label above dot (column-reverse matches the default) */
.wf-tl-milestone--above { flex-direction: column-reverse; }
/* below-lane: dot below spine, label below dot */
.wf-tl-milestone--below { flex-direction: column; }
/* Thin vertical connector between dot and spine */
.wf-tl-milestone__connector {
  position: absolute;
  width: 1px;
  background: #e5e7eb;
  pointer-events: none;
}
/* Dot-only (both lanes crowded) — dot on spine, label as hover tooltip */
.wf-tl-milestone--dotonly { cursor: pointer; }
.wf-tl-milestone--dotonly::after {
  content: attr(data-label);
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 20;
  pointer-events: none;
}
.wf-tl-milestone--dotonly:hover::after { display: block; }
.wf-tl-milestone::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #6b7280;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #6b7280;
  margin-bottom: 4px;
}
.wf-tl-milestone--born::before   { background: #16a34a; box-shadow: 0 0 0 2px #16a34a; }
.wf-tl-milestone--today::before  {
  background: #2563eb; box-shadow: 0 0 0 2px #2563eb;
  animation: wf-tl-pulse 1.6s ease-in-out infinite;
}
.wf-tl-milestone--retirement::before { background: #7c3aed; box-shadow: 0 0 0 2px #7c3aed; }
.wf-tl-milestone--death::before      { background: #374151; box-shadow: 0 0 0 2px #374151; }
/* Hollow gray ring = estimated/projected end, not a known date */
.wf-tl-milestone--est_end::before    { background: transparent; border: 3px solid #9ca3af; box-shadow: 0 0 0 2px #d1d5db; }
.wf-tl-milestone--personal::before   { background: #f59e0b; box-shadow: 0 0 0 2px #f59e0b; }

@keyframes wf-tl-pulse {
  0%,100% { box-shadow: 0 0 0 2px #2563eb; }
  50%      { box-shadow: 0 0 0 6px rgba(37,99,235,.2); }
}

.wf-tl-milestone__label {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 110px;
}
.wf-tl-milestone__main { font-size: 0.72rem; font-weight: 700; color: #374151; white-space: nowrap; }
.wf-tl-milestone__sub  { font-size: 0.6rem; color: #9ca3af; white-space: normal; word-break: break-word; text-align: center; line-height: 1.3; }

/* Example mode — banner + examples dropdown */
.wf-tl-example-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 14px;
  margin-bottom: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #1e40af;
  flex-wrap: wrap;
}
.wf-tl-example-banner__name { font-weight: 700; }
.wf-tl-example-banner__bio  { color: #4b5563; flex-basis: 100%; font-size: 0.78rem; margin-top: 2px; }
.wf-tl-examples-menu { min-width: 280px; max-height: 380px; overflow-y: auto; }
.wf-tl-example-item  { font-size: 0.82rem; padding: 4px 16px; }
.wf-tl-example-item em { color: #6b7280; font-style: normal; }

/* =====================================================================
 * v0.4.23 — Resource Links Editor (card modal)
 * ===================================================================== */
.wf-links-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 4px;  /* prevent layout collapse when empty */
}
.wf-link-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.wf-link-row__title {
  flex: 0 0 150px;
  min-width: 0;
}
.wf-link-row__url {
  flex: 1;
  min-width: 0;
}
.wf-link-row__del {
  flex-shrink: 0;
  padding: 2px 7px;
}
@media (max-width: 575.98px) {
  .wf-link-row { flex-wrap: wrap; }
  .wf-link-row__title { flex: 1 1 100%; }
  .wf-link-row__url   { flex: 1 1 auto; }
}

/* Links count badge on board cards */
.wf-card-links-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  color: #6366f1;
  background: #ede9fe;
  border-radius: 999px;
  padding: 1px 7px;
  cursor: default;
}
.wf-card-links-badge i { font-size: 0.65rem; }

/* =====================================================================
 * v0.4.23 — Deep Focus Zone (level 8+)
 * ===================================================================== */
.wf-focus-zone {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #1e40af 100%);
  border-radius: 14px;
  padding: 20px 24px;
  color: #e0e7ff;
}
.wf-focus-zone--level-10 {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
}

.wf-focus-zone__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.wf-focus-zone__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #a5b4fc;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 3px 12px;
}
.wf-focus-zone__sub {
  font-size: 0.82rem;
  color: #a5b4fc;
  opacity: 0.8;
}
.wf-focus-zone__board-toggle {
  color: #a5b4fc;
  border-color: rgba(255,255,255,0.2);
  margin-left: auto;
}
.wf-focus-zone__board-toggle:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}

/* Individual focus task card */
.wf-focus-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.wf-focus-card:last-child { margin-bottom: 0; }

.wf-focus-card__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  cursor: pointer;
  margin-bottom: 10px;
  transition: color 0.12s;
}
.wf-focus-card__title:hover { color: #c7d2fe; text-decoration: underline; }

.wf-focus-card__project-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: #a5b4fc;
  margin-bottom: 10px;
}
.wf-focus-card__project-row i { margin-right: 3px; }
.wf-focus-card__due { color: #fbbf24; }

.wf-focus-card__desc {
  font-size: 0.9rem;
  color: #c7d2fe;
  line-height: 1.6;
  margin-bottom: 12px;
  white-space: pre-wrap;
}

.wf-focus-card__next {
  font-size: 0.9rem;
  color: #6ee7b7;
  margin-bottom: 12px;
}
.wf-focus-card__next i { margin-right: 6px; color: #34d399; }
.wf-focus-card__next strong { color: #a7f3d0; }

/* Stats badges row */
.wf-focus-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.wf-focus-stat {
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wf-focus-stat--urgency { background: rgba(239,68,68,0.2);  color: #fca5a5; }
.wf-focus-stat--value   { background: rgba(34,197,94,0.2);  color: #86efac; }
.wf-focus-stat--effort  { background: rgba(251,191,36,0.2); color: #fde68a; }
.wf-focus-stat--energy  { background: rgba(139,92,246,0.2); color: #c4b5fd; }
.wf-focus-stat--time    { background: rgba(99,102,241,0.2); color: #a5b4fc; }
.wf-focus-stat--due     { background: rgba(251,191,36,0.15); color: #fbbf24; }

/* Resources links in the focus zone */
.wf-focus-card__links { margin-top: 4px; }
.wf-focus-card__links-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #818cf8;
  margin-bottom: 8px;
}
.wf-focus-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #a5b4fc;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 4px 12px;
  margin: 0 6px 6px 0;
  text-decoration: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.wf-focus-link:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
  text-decoration: none;
}
.wf-focus-link--distraction {
  color: #d1d5db;
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.07);
  opacity: 0.6;
}
.wf-focus-link--distraction:hover { opacity: 0.9; }

/* =====================================================================
 * v0.4.24 — Focus card quick-action buttons + next-task picker panel
 * ===================================================================== */

/* Done / Blocked buttons at the bottom of each level-10 focus card */
.wf-focus-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.wf-focus-done-btn {
  color: #6ee7b7;
  background: rgba(52,211,153,0.12);
  border: 1px solid rgba(52,211,153,0.25);
}
.wf-focus-done-btn:hover, .wf-focus-done-btn:focus {
  background: rgba(52,211,153,0.22);
  color: #a7f3d0;
  border-color: rgba(52,211,153,0.45);
}
.wf-focus-done-btn:disabled { opacity: 0.5; pointer-events: none; }

.wf-focus-block-btn {
  color: #fca5a5;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
}
.wf-focus-block-btn:hover, .wf-focus-block-btn:focus {
  background: rgba(239,68,68,0.2);
  color: #fca5a5;
  border-color: rgba(239,68,68,0.4);
}
.wf-focus-block-btn:disabled { opacity: 0.5; pointer-events: none; }

/* ── Next-task picker panel (appears after a focus card is resolved) ── */
@keyframes wf-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wf-focus-next-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-top: 3px solid #6ee7b7;
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 16px;
  animation: wf-fade-in 0.25s ease;
}

.wf-focus-next__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.wf-focus-next__icon {
  font-size: 1.3rem;
  color: #6ee7b7;
}
.wf-focus-next__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e0e7ff;
}
.wf-focus-next__done {
  font-size: 0.85rem;
  color: #86efac;
  margin: 0 0 12px;
}
.wf-focus-next__done em { font-style: normal; font-weight: 600; }
.wf-focus-next__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #818cf8;
  margin: 0 0 8px;
}
.wf-focus-next__empty {
  font-size: 0.85rem;
  color: #9ca3af;
  margin: 0 0 12px;
}
.wf-focus-next__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

/* Individual candidate row */
.wf-focus-next-candidate {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 12px;
  transition: background 0.12s;
}
.wf-focus-next-candidate:hover { background: rgba(255,255,255,0.08); }
.wf-focus-next-candidate__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wf-focus-next-candidate__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e0e7ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-focus-next-candidate__proj {
  font-size: 0.75rem;
  color: #818cf8;
}
.wf-focus-next-candidate__proj i { margin-right: 3px; }

/* "Start" button on each candidate */
.wf-focus-start-btn {
  flex-shrink: 0;
  color: #a5b4fc;
  background: rgba(99,102,241,0.15);
  border: 1px solid rgba(99,102,241,0.25);
  white-space: nowrap;
}
.wf-focus-start-btn:hover, .wf-focus-start-btn:focus {
  background: rgba(99,102,241,0.3);
  color: #c7d2fe;
  border-color: rgba(99,102,241,0.5);
}

/* Footer with "step back" link */
.wf-focus-next__footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 12px;
}
.wf-focus-step-back-btn {
  font-size: 0.8rem;
  color: #9ca3af;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
}
.wf-focus-step-back-btn:hover, .wf-focus-step-back-btn:focus {
  color: #d1d5db;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.2);
}

@media (max-width: 575.98px) {
  .wf-focus-next-candidate { flex-wrap: wrap; }
  .wf-focus-start-btn { width: 100%; justify-content: center; }
}

.wf-focus-link--distraction .fa-exclamation-triangle { color: #fbbf24; }

/* Board collapse when focus zone is active at level 10 */
.wf-board--focus-collapsed {
  display: none !important;
}

@media (max-width: 575.98px) {
  .wf-focus-zone { padding: 14px 14px; }
  .wf-focus-card { padding: 14px 14px; }
  .wf-focus-card__title { font-size: 1.1rem; }
}

/* Goal dots */
.wf-tl-goal-dot {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #6366f1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  z-index: 2;
}
.wf-tl-goal-dot:hover {
  transform: scale(1.35);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  z-index: 5;
}

/* Connector lines from goal dot to spine */
.wf-tl-goal-connector {
  position: absolute;
  width: 0;
  border-left: 1px dashed #d1d5db;
}

/* Goal popup (tooltip-style) */
.wf-tl-goal-popup {
  position: absolute;
  z-index: 20;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 200px;
  max-width: 240px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  font-size: 0.78rem;
  top: -60px;
}
.wf-tl-goal-popup__type   { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.wf-tl-goal-popup__title  { font-weight: 600; color: #111827; margin-bottom: 3px; line-height: 1.3; }
.wf-tl-goal-popup__meta   { color: #6b7280; font-size: 0.7rem; margin-bottom: 6px; }
.wf-tl-goal-popup__link   { font-size: 0.72rem; color: #2563eb; text-decoration: none; font-weight: 600; }
.wf-tl-goal-popup__link:hover { text-decoration: underline; }

/* Legend */
.wf-tl-legend { font-size: 0.78rem; color: #6b7280; gap: 12px !important; }
.wf-tl-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.wf-tl-legend-dot        { font-size: 0.8rem; }
.wf-tl-legend-dot--life      { color: #6d28d9; }
.wf-tl-legend-dot--decade    { color: #0369a1; }
.wf-tl-legend-dot--five_year { color: #0891b2; }
.wf-tl-legend-dot--annual    { color: #0d9488; }
.wf-tl-legend-dot--current   { color: #d97706; }

/* Goal list below timeline */
.wf-tl-goal-row {
  padding: 6px 10px;
  border: 1px solid #f3f4f6;
  border-radius: 6px;
  background: #fff;
  transition: border-color 0.15s;
}
.wf-tl-goal-row:hover { border-color: #d1d5db; }
.wf-tl-goal-type-icon        { font-size: 0.9rem; }
.wf-tl-goal-type-icon--life      { color: #6d28d9; }
.wf-tl-goal-type-icon--decade    { color: #0369a1; }
.wf-tl-goal-type-icon--five_year { color: #0891b2; }
.wf-tl-goal-type-icon--annual    { color: #0d9488; }
.wf-tl-goal-type-icon--current   { color: #d97706; }

/* =====================================================================
 * Powered-by footer — centered stack: "Powered by" above logo
 * ===================================================================== */
.pos-powered-footer {
  text-align: center;
  padding: 28px 16px 32px;
  margin-top: auto;
}
.pos-powered-footer__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.pos-powered-footer__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
}
.pos-powered-footer__logo {
  height: 42px;
  width: auto;
}

/* =====================================================================
   v0.5.0 — Goal-Project Connection  (#1565)
   ===================================================================== */

/* ─── Project support panel (on goal cards) ─────────────────────────── */
.wf-goal-project-panel {
  border-top: 1px solid #dde3f5;
  background: #f7f8ff;
}
.dark .wf-goal-project-panel { background: rgba(30,41,59,0.5); border-top-color: #334155; }

.wf-gpp-toggle {
  font-size: 0.78rem;
  color: #4338ca;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px !important;
  border: none;
  background: rgba(238,242,255,0.5); /* subtle indigo tint — visible at rest */
  width: 100%;
  text-align: left;
}
.wf-gpp-toggle:hover { color: #4f46e5; background: rgba(99,102,241,0.05); }
.dark .wf-gpp-toggle { color: #a5b4fc; }
.dark .wf-gpp-toggle:hover { color: #c7d2fe; background: rgba(99,102,241,0.1); }

.wf-gpp-chevron {
  margin-left: auto;
  font-size: 0.65rem;
  transition: transform 0.2s;
}
.wf-gpp-chevron.rotate-180 { transform: rotate(180deg); }

.wf-gpp-progress-pill {
  font-size: 0.68rem;
  background: #d1fae5;
  color: #065f46;
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.dark .wf-gpp-progress-pill { background: rgba(16,185,129,0.15); color: #6ee7b7; }

.wf-gpp-list { padding: 0; margin: 0; }
.wf-gpp-item {
  padding: 8px 12px !important;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.82rem;
  line-height: 1.4;
}
.wf-gpp-item:last-child { border-bottom: none; }
.dark .wf-gpp-item { border-bottom-color: #334155; }

.wf-gpp-item-title { font-size: 0.85rem; flex-wrap: wrap; gap: 4px; }
.wf-gpp-impact-statement { color: #64748b; font-style: italic; font-size: 0.77rem; }
.dark .wf-gpp-impact-statement { color: #94a3b8; }

.wf-gpp-stars i { font-size: 0.6rem; color: #fbbf24; }
.wf-gpp-stars i.fa-star-empty { color: #d1d5db; }

.wf-gpp-item-actions .btn-link { color: #94a3b8; padding: 2px 4px; }
.wf-gpp-item-actions .btn-link:hover { color: #475569; }

/* Legacy area card footer buttons */
.wf-legacy-card-footer .btn { padding: 2px 8px; }
.wf-cascade-open-btn { color: #7c3aed; font-size: 0.8rem; }
.wf-cascade-open-btn:hover { color: #5b21b6; text-decoration: none; }
.dark .wf-cascade-open-btn { color: #a78bfa; }
.dark .wf-cascade-open-btn:hover { color: #c4b5fd; }

/* Empty legacy area card "Define" prompt button */
.wf-legacy-prompt-card .btn-link { padding: 4px 10px; }

/* Cascade wizard tier buttons */
.wf-cascade-toggle-add { padding: 2px 8px; color: #6366f1; }
.wf-cascade-toggle-add:hover { color: #4f46e5; text-decoration: none; }
.dark .wf-cascade-toggle-add { color: #a5b4fc; }

/* Legacy goal picker option chips */
.wf-legacy-option-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  margin: 3px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: transparent;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  color: #374151;
}
.wf-legacy-option-chip:hover:not(:disabled) { border-color: #7c3aed; color: #7c3aed; background: rgba(124,58,237,0.06); }
.wf-legacy-option-chip.selected { border-color: #7c3aed; background: #7c3aed; color: #fff; }
.wf-legacy-option-chip.already-added { opacity: 0.45; cursor: default; }
.dark .wf-legacy-option-chip { color: #e2e8f0; border-color: #475569; }
.dark .wf-legacy-option-chip:hover:not(:disabled) { border-color: #a78bfa; color: #a78bfa; background: rgba(167,139,250,0.1); }
.dark .wf-legacy-option-chip.selected { background: #7c3aed; border-color: #7c3aed; color: #fff; }

/* Dashed "Add another" legacy card */
.wf-legacy-add-card:hover { border-color: #7c3aed !important; opacity: 1 !important; }
.dark .wf-legacy-add-card { border-color: #4c1d95 !important; }

/* Stakes pill grid (goal enrichment) */
.wf-stakes-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; margin: 2px; border: 1px solid #d1d5db; border-radius: 999px;
  background: transparent; font-size: 0.76rem; cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s; color: #374151;
}
.wf-stakes-pill:hover:not(.maxed):not(.selected) { border-color: #7c3aed; color: #7c3aed; }
.wf-stakes-pill.selected { border-color: #7c3aed; background: #7c3aed; color: #fff; }
.wf-stakes-pill.maxed:not(.selected) { opacity: 0.35; cursor: not-allowed; }
.wf-stakes-pill .wf-rank-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,0.9);
  color: #7c3aed; font-size: 0.65rem; font-weight: 800; flex-shrink: 0;
}
.dark .wf-stakes-pill { color: #e2e8f0; border-color: #475569; }
.dark .wf-stakes-pill:hover:not(.maxed) { border-color: #a78bfa; color: #a78bfa; }
.dark .wf-stakes-pill.selected { background: #7c3aed; border-color: #7c3aed; color: #fff; }

/* Clickable 0-5 / 1-5 scale buttons (project form) */
.wf-scale-btns { display: flex; gap: 4px; }
.wf-scale-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #d1d5db; background: #fff; color: #6b7280;
  font-size: 0.8rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s; padding: 0;
}
.wf-scale-btn:hover { border-color: #7c3aed; color: #7c3aed; }
.wf-scale-btn.active { border-color: #7c3aed; background: #7c3aed; color: #fff; }
.dark .wf-scale-btn { border-color: #475569; background: #1e293b; color: #94a3b8; }
.dark .wf-scale-btn:hover { border-color: #a78bfa; color: #a78bfa; }
.dark .wf-scale-btn.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }

/* Goal chips in project modal */
.wfp-goal-chip {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border: 1px solid #d1d5db; border-radius: 999px;
  font-size: 0.8rem; cursor: pointer; background: #fff; color: #374151;
  transition: all 0.12s; user-select: none; margin: 0;
}
.wfp-goal-chip:hover { border-color: #7c3aed; color: #7c3aed; }
.wfp-goal-chip.checked { border-color: #7c3aed; background: #7c3aed; color: #fff; }
.wfp-goal-chip-icon { display: none; font-size: 0.65rem; }
.wfp-goal-chip.checked .wfp-goal-chip-icon { display: inline; }

/* Project grid cards in Map My Path */
.wf-proj-grid-card { transition: border-color 0.15s, box-shadow 0.15s; }
.wf-proj-grid-card--checked { border-color: #7c3aed !important; box-shadow: 0 0 0 1px #7c3aed, 0 2px 4px rgba(124,58,237,0.12) !important; }

/* Reality conversation chat */
.wf-chat-msg {
  margin-bottom: 10px; padding: 10px 14px; border-radius: 12px;
  font-size: 0.85rem; line-height: 1.5; max-width: 85%; animation: wfChatFade 0.2s ease;
}
.wf-chat-msg.ai { background: #f3f0ff; color: #1e1b4b; border-bottom-left-radius: 4px; }
.wf-chat-msg.user { background: #7c3aed; color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.wf-chat-msg.ai-thinking { background: #f3f0ff; color: #6b7280; font-style: italic; }
@keyframes wfChatFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.wf-gpp-empty { padding: 6px 0; }
.wf-gpp-empty .btn-link { font-size: 0.8rem; color: #6366f1; padding: 6px 12px !important; border-radius: 6px; }
.wf-gpp-empty .btn-link:hover { color: #4f46e5; }
.dark .wf-gpp-empty .btn-link { color: #a5b4fc; }
.wf-gpp-add-link .wf-arrow { font-size: 1.05em; }

/* ─── Emotional tag chips ────────────────────────────────────────────── */
.wf-emotional-chip {
  display: inline-block;
  font-size: 0.68rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-weight: 500;
}
.wf-emotional-chip--freedom  { background:#dbeafe; color:#1d4ed8; }
.wf-emotional-chip--security { background:#dcfce7; color:#15803d; }
.wf-emotional-chip--pride    { background:#fef9c3; color:#a16207; }
.wf-emotional-chip--love     { background:#fce7f3; color:#be185d; }
.wf-emotional-chip--legacy   { background:#f0fdf4; color:#166534; }
.wf-emotional-chip--health   { background:#d1fae5; color:#065f46; }
.wf-emotional-chip--growth   { background:#f0fdf4; color:#15803d; }
.wf-emotional-chip--joy      { background:#fef3c7; color:#b45309; }
.wf-emotional-chip--purpose  { background:#ede9fe; color:#6d28d9; }
.wf-emotional-chip--other    { background:#f1f5f9; color:#475569; }

/* ─── Link modal — star rating ───────────────────────────────────────── */
.wf-star-rating { display: flex; gap: 4px; margin-bottom: 4px; }
.wf-star-btn {
  background: none;
  border: none;
  padding: 2px;
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
  color: #d1d5db;
  transition: color 0.1s, transform 0.1s;
}
.wf-star-btn:hover, .wf-star-btn:focus { color: #fbbf24; transform: scale(1.15); outline: none; }
.wf-star-btn i.text-warning { color: #fbbf24 !important; }

/* ─── Link modal — emotion tag picker ───────────────────────────────── */
.wf-emotion-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-etag-btn {
  font-size: 0.78rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wf-etag-btn:hover { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; }
.wf-etag-btn.active { background: #ede9fe; border-color: #7c3aed; color: #5b21b6; font-weight: 600; }
.dark .wf-etag-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
.dark .wf-etag-btn:hover, .dark .wf-etag-btn.active { background: rgba(124,58,237,0.2); border-color: #7c3aed; color: #c4b5fd; }

/* ─── AI badge (inline in impact statement) ─────────────────────────── */
.wf-ai-badge { font-size: 0.65rem; color: #7c3aed; }

/* ─── Goal chips on projects page ───────────────────────────────────── */
.wf-proj-goal-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wf-goal-chip {
  font-size: 0.68rem;
  background: #e0e7ff;
  color: #3730a3;
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 500;
}
.wf-goal-chip .wf-chip-primary { color: #f59e0b; margin-left: 2px; }
.wf-proj-impact-score { font-size: 0.72rem; }
.wf-proj-impact-score i { color: #f97316; }
.dark .wf-goal-chip { background: rgba(99,102,241,0.2); color: #a5b4fc; }

/* v0.5.0 — Goal chain breadcrumb on board task cards (#1565) */
.wf-goal-chain {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: #6366f1;
  margin: 3px 0 1px;
  line-height: 1.2;
  flex-wrap: wrap;
}
.wf-goal-chain__icon { font-size: 0.6rem; flex-shrink: 0; }
.wf-goal-chain__label { font-style: italic; }
.wf-goal-chain__etag {
  font-size: 0.6rem;
  padding: 1px 5px;
  line-height: 1.4;
}
/* Focus zone variant — slightly larger so it reads at a glance */
.wf-goal-chain--focus {
  font-size: 0.75rem;
  margin: 4px 0 2px;
}
.wf-goal-chain--focus .wf-goal-chain__icon { font-size: 0.65rem; }
.wf-goal-chain--focus .wf-goal-chain__etag { font-size: 0.65rem; }
/* Dark mode */
.dark .wf-goal-chain { color: #a5b4fc; }
.dark .wf-goal-chain--focus { color: #c4b5fd; }

/* ─── Project card grid (link modal) ─────────────────────────────────── */
.wf-lm-proj-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 2px;
}
.wf-lm-proj-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  font-size: 0.83rem;
  min-width: 110px;
  max-width: 190px;
  text-decoration: none;
  color: inherit;
}
.wf-lm-proj-card:hover { border-color: #6366f1; background: #eef2ff; text-decoration: none; color: inherit; }
.wf-lm-proj-card--selected { border-color: #4f46e5 !important; background: #e0e7ff !important; color: #312e81 !important; }
.wf-lm-proj-card__name { font-weight: 500; line-height: 1.3; }
.wf-lm-proj-card__tasks { font-size: 0.72rem; color: #64748b; }
.wf-lm-proj-card--add {
  flex-direction: row;
  align-items: center;
  gap: 5px;
  border-style: dashed;
  color: #6366f1;
  background: transparent;
  font-size: 0.8rem;
}
.wf-lm-proj-card--add:hover { background: #eef2ff; color: #4f46e5; }
.dark .wf-lm-proj-card { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.dark .wf-lm-proj-card:hover { border-color: #818cf8; background: rgba(99,102,241,0.15); }
.dark .wf-lm-proj-card--selected { border-color: #818cf8 !important; background: rgba(79,70,229,0.25) !important; color: #c7d2fe !important; }

/* ─── Task progress bar in goal-project panel ────────────────────────── */
.wf-gpp-task-progress { }
.wf-gpp-task-bar { height: 4px; background: #e2e8f0; border-radius: 2px; margin-bottom: 2px; overflow: hidden; }
.wf-gpp-task-bar__fill { height: 100%; background: #10b981; border-radius: 2px; transition: width 0.3s; }
.dark .wf-gpp-task-bar { background: #334155; }
.dark .wf-gpp-task-bar__fill { background: #34d399; }

/* ─── Goal "why" motivational line in GPP panel ──────────────────────── */
.wf-gpp-goal-why { font-size: 0.72rem; color: #6366f1; font-style: italic; }
.dark .wf-gpp-goal-why { color: #a5b4fc; }

/* ─── Capture star widgets (urgency / energy / effort / value) ────────── */
.wf-star-rating--sm .wf-star-btn { font-size: 0.9rem; padding: 1px 2px; }
.wf-capture-stars { display: flex; flex-direction: column; gap: 1px; }
.wf-capture-stars .wf-star-rating { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Goals Fan View  (winfocus/goals_fan)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page layout ──────────────────────────────────────────────────────────── */
.wf-fan-page { padding-bottom: 2rem; }

/* Horizontal scroll row of path columns */
.wf-fan-row {
  display: flex;
  overflow-x: auto;
  overflow-y: visible;
  gap: 12px;
  padding: 4px 2px 16px 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}
.wf-fan-row::-webkit-scrollbar { height: 5px; }
.wf-fan-row::-webkit-scrollbar-track { background: transparent; }
.wf-fan-row::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* ── Path column ──────────────────────────────────────────────────────────── */
.wf-fan-path {
  flex-shrink: 0;
  width: 270px;
  display: flex;
  flex-direction: column;
  cursor: default;
}
/* On small screens one column fills most of the viewport */
@media (max-width: 480px) { .wf-fan-path { width: calc(100vw - 48px); } }

/* ── Anchor card (legacy goal, always fully visible) ─────────────────────── */
.wf-fan-anchor {
  border-radius: 10px;
  border: 2px solid #7c3aed;
  background: #f5f3ff;
  overflow: hidden;
  margin-bottom: 5px;
  cursor: pointer;
  transition: box-shadow .2s;
}
.wf-fan-anchor:hover { box-shadow: 0 2px 12px rgba(124,58,237,.18); }
.wf-fan-path.is-active .wf-fan-anchor { box-shadow: 0 4px 16px rgba(124,58,237,.22); }

.wf-fan-anchor__stripe {
  height: 4px;
  background: #7c3aed;
  border-radius: 2px 2px 0 0;
}
.wf-fan-anchor__body { padding: 10px 12px 10px; }
.wf-fan-anchor__icon { color: #7c3aed; font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.wf-fan-anchor__title { font-size: 0.88rem; font-weight: 600; line-height: 1.3; color: #1f2937; }
.wf-fan-anchor__vision { font-size: 0.78rem; line-height: 1.4; }

.wf-fan-anchor__progress {
  height: 3px; background: rgba(124,58,237,.15); border-radius: 2px; overflow: hidden;
}
.wf-fan-anchor__progress-fill {
  height: 100%; background: #7c3aed; border-radius: 2px; transition: width .4s;
}

/* ── Deck container ───────────────────────────────────────────────────────── */
.wf-fan-deck {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wf-fan-deck--empty {
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  background: #fafafa;
}

/* ── Sub-goal card (peeked by default, full when path is active) ─────────── */
.wf-fan-card {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  overflow: hidden;
  /* Peek: show only the header row */
  max-height: 44px;
  transition: max-height .35s ease, border-color .15s, box-shadow .15s;
  cursor: pointer;
  user-select: none;
  position: relative;
}
/* Hover nudge — shows it's interactive */
.wf-fan-card:not(.is-selected):hover {
  border-color: #c4b5fd;
  transform: translateX(4px);
  transition: transform .15s, border-color .15s, max-height .35s;
  box-shadow: 0 1px 6px rgba(0,0,0,.07);
}

/* Peek row ----------------------------------------------------------------- */
.wf-fan-card__peek {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 44px;
  flex-shrink: 0;
}
.wf-fan-card__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.wf-fan-card__tier {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; flex-shrink: 0; width: 48px; line-height: 1;
}
.wf-fan-card__ptitle {
  font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: #1f2937; flex-grow: 1;
}
.wf-fan-card__sbadge {
  font-size: 0.6rem; flex-shrink: 0; text-transform: uppercase;
}

/* Full body ---------------------------------------------------------------- */
.wf-fan-card__body {
  border-top: 1px solid #f3f4f6;
}
.wf-fan-card__prog {
  height: 3px; background: #f3f4f6; overflow: hidden;
}
.wf-fan-card__prog-fill { height: 100%; transition: width .4s; }
.wf-fan-card__body-inner { padding: 8px 10px 10px; }
.wf-fan-card__full-title { font-size: 0.84rem; font-weight: 600; line-height: 1.3; color: #111827; }
.wf-fan-card__vision { font-size: 0.78rem; line-height: 1.4; }
.wf-fan-card__actions .btn { font-size: 0.78rem; }

/* When path is active: expand all cards ------------------------------------ */
.wf-fan-path.is-active .wf-fan-card {
  max-height: 400px; /* large enough for any content */
  cursor: default;
}
.wf-fan-path.is-active .wf-fan-card:hover { transform: none; }

/* Selected card within active path ----------------------------------------- */
.wf-fan-card.is-selected {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124,58,237,.2);
}

/* ── Flipped mode (current-first) ─────────────────────────────────────────── */
.wf-fan-row.is-flipped .wf-fan-path {
  flex-direction: column-reverse;
}
.wf-fan-row.is-flipped .wf-fan-anchor {
  margin-bottom: 0;
  margin-top: 5px;
}

/* ── Orphan chips ─────────────────────────────────────────────────────────── */
.wf-fan-orphan-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  user-select: none;
}
.wf-fan-orphan-chip:hover {
  border-color: #7c3aed;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ── Bottom drawer ────────────────────────────────────────────────────────── */
.wf-fan-drawer { position: fixed; inset: 0; z-index: 1060; pointer-events: none; }
.wf-fan-drawer.is-open { pointer-events: all; }

.wf-fan-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0; transition: opacity .3s;
}
.wf-fan-drawer.is-open .wf-fan-drawer__backdrop { opacity: 1; }

.wf-fan-drawer__panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 32px rgba(0,0,0,.16);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* On wider screens, show as side panel */
@media (min-width: 640px) {
  .wf-fan-drawer__panel {
    bottom: auto; top: 0; left: auto; right: 0;
    width: 380px;
    border-radius: 0;
    max-height: 100dvh;
    transform: translateX(100%);
  }
  .wf-fan-drawer.is-open .wf-fan-drawer__panel { transform: translateX(0); }
}
@media (max-width: 639px) {
  .wf-fan-drawer.is-open .wf-fan-drawer__panel { transform: translateY(0); }
}
/* Prevent body scroll when drawer open */
body.wf-fan-drawer-open { overflow: hidden; }

.wf-fan-drawer__handle {
  width: 40px; height: 4px; background: #d1d5db; border-radius: 2px;
  margin: 10px auto 0; display: block;
}
@media (min-width: 640px) { .wf-fan-drawer__handle { display: none; } }

.wf-fan-drawer__header {
  padding: 12px 16px 8px;
  border-bottom: 1px solid #f3f4f6;
}
.wf-fan-drawer__tier-icon { font-size: 1.1rem; }
.wf-fan-drawer__body { padding: 14px 16px; }
.wf-fan-drawer__close { line-height: 1; }

.wf-fan-drawer__projects { border-top: 1px solid #f3f4f6; }
.wf-fan-drawer__projects-header {
  font-size: 0.8rem; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 16px 6px;
}

/* Empty state */
.wf-fan-empty-state { max-width: 400px; margin: 0 auto; }

/* ── Journal modal (#1627) ──────────────────────────────────── */

.wf-journal-modal { max-width: 680px; }

.wf-journal-modal__hd {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--wf-border);
}
.wf-journal-modal__hd h4 { font-size: 1.05rem; }
.wf-journal-privacy {
  color: var(--wf-muted); font-size: 0.78rem; margin-left: auto; white-space: nowrap;
}
.wf-journal-today-link {
  font-size: 0.78rem; color: var(--wf-accent); text-decoration: underline;
}

/* Today's entries list */
.wf-journal-today-list { margin-bottom: 12px; }
.wf-journal-today-entry {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 6px; font-size: 0.82rem;
  transition: background 0.12s;
}
.wf-journal-today-entry:hover { background: #f1f5f9; }
.wf-journal-today-entry__mood { font-size: 1.1rem; flex-shrink: 0; }
.wf-journal-today-entry__text {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wf-ink);
}
.wf-journal-today-entry__time { color: var(--wf-muted); font-size: 0.72rem; flex-shrink: 0; }
.wf-journal-today-entry__pts { color: var(--wf-accent); font-size: 0.72rem; font-weight: 600; flex-shrink: 0; }

/* Realm toggle — removed, journal captures everything in one form */

/* Mood picker */
.wf-journal-mood { margin-bottom: 16px; }
.wf-journal-mood__options { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.wf-journal-mood__btn {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 14px; border-radius: 10px; border: 2px solid var(--wf-border);
  background: none; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wf-journal-mood__btn:hover { border-color: var(--wf-accent); background: #eef2ff; }
.wf-journal-mood__btn.active {
  border-color: var(--wf-accent); background: #eef2ff; font-weight: 600;
}
.wf-journal-mood__emoji { font-size: 1.5rem; line-height: 1; }
.wf-journal-mood__word { font-size: 0.7rem; color: var(--wf-muted); margin-top: 3px; }
.wf-journal-mood__btn.active .wf-journal-mood__word { color: var(--wf-accent); }

/* Labels */
.wf-journal-label {
  display: block; font-size: 0.85rem; font-weight: 500;
  color: var(--wf-ink); margin-bottom: 3px;
}

/* Section dividers */
.wf-journal-section { margin-bottom: 14px; }
.wf-journal-section__hd {
  font-weight: 600; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--wf-muted);
  border-bottom: 1px solid var(--wf-border); padding-bottom: 4px;
  margin-bottom: 10px;
}
.wf-journal-textarea {
  width: 100%; border: 1px solid #e3e6eb !important; border-radius: 6px;
  padding: 8px 10px; font-size: 0.88rem; resize: vertical; margin-bottom: 8px;
  font-family: inherit; transition: border-color 0.15s; background: #fff;
}
.wf-journal-textarea:focus { border-color: var(--wf-accent) !important; outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,.1); }

/* Context tags row */
.wf-journal-context { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.wf-journal-context__field { flex: 1; min-width: 120px; }
.wf-journal-context__field .wf-journal-label { font-size: 0.75rem; margin-bottom: 2px; }

/* Points preview */
.wf-journal-points-preview { color: var(--wf-accent); font-weight: 600; font-size: 0.88rem; }

/* Actions bar */
.wf-journal-actions {
  display: flex; align-items: center; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--wf-border);
}

/* Nav badge */
.wf-journal-nav-badge {
  position: absolute; top: 2px; right: 0;
  background: var(--wf-accent); color: #fff; font-size: 0.6rem; font-weight: 700;
  min-width: 15px; height: 15px; line-height: 15px; text-align: center;
  border-radius: 99px; padding: 0 3px;
}
.wf-nav__link { position: relative; }

/* Header journal icon (site-wide nav) */
.wf-header-journal-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #6366f1; padding: 6px 10px; border-radius: 8px;
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.wf-header-journal-btn:hover { background: rgba(99,102,241,0.1); color: #4338ca; text-decoration: none; }

/* Timeline: journal milestone dot */
.wf-tl-milestone--journal .wf-tl-milestone__main { color: #7c3aed; }
.wf-tl-milestone--journal::before {
  content: ''; display: block; width: 12px; height: 12px;
  border-radius: 50%; background: #8b5cf6; margin: 0 auto 4px;
}
.wf-tl-legend-dot--journal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #8b5cf6; color: #fff; font-size: 0.6rem;
}

/* AI Advisor coach response */
.wf-journal-coach {
  margin-top: 14px; padding: 14px 16px; border-radius: 10px;
  background: linear-gradient(135deg, #f0f4ff 0%, #ede9fe 100%);
  border: 1px solid #c7d2fe;
}
.wf-journal-coach__hd {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 0.82rem; color: #4338ca;
  margin-bottom: 8px;
}
.wf-journal-coach__dismiss {
  margin-left: auto; background: none; border: none;
  font-size: 1.1rem; color: #6366f1; cursor: pointer; line-height: 1;
}
.wf-journal-coach__message {
  font-size: 0.9rem; line-height: 1.5; color: #1e1b4b;
}
.wf-journal-coach__action { margin-top: 4px; }

/* Calendar page */
.wf-journal-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wf-journal-cal-hd {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  color: var(--wf-muted); text-align: center; padding: 4px;
}
.wf-journal-cal-day {
  min-height: 52px; padding: 4px; border-radius: 6px; border: 1px solid transparent;
  font-size: 0.75rem; cursor: pointer; position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.wf-journal-cal-day:hover { border-color: var(--wf-accent); }
.wf-journal-cal-day--empty { cursor: default; background: none; }
.wf-journal-cal-day--empty:hover { border-color: transparent; }
.wf-journal-cal-day__num { font-weight: 600; color: var(--wf-ink); }
.wf-journal-cal-day__count { font-size: 0.65rem; color: var(--wf-muted); }
.wf-journal-cal-day__star {
  position: absolute; top: 2px; right: 3px; font-size: 0.6rem; color: #f59e0b;
}
.wf-journal-cal-day--great  { background: #dcfce7; }
.wf-journal-cal-day--good   { background: #e8f5e9; }
.wf-journal-cal-day--okay   { background: #fef9c3; }
.wf-journal-cal-day--low    { background: #fed7aa; }
.wf-journal-cal-day--struggling { background: #fecaca; }
.wf-journal-cal-day--none   { background: #f1f5f9; }
.wf-journal-cal-day--today  { border-color: var(--wf-accent); border-width: 2px; }

/* Calendar nav */
.wf-journal-cal-nav {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.wf-journal-cal-nav__title { font-weight: 600; font-size: 1rem; min-width: 140px; text-align: center; }
.wf-journal-cal-nav button {
  background: none; border: 1px solid var(--wf-border); border-radius: 6px;
  padding: 4px 10px; cursor: pointer; font-size: 0.85rem;
}
.wf-journal-cal-nav button:hover { border-color: var(--wf-accent); }

/* Search bar */
.wf-journal-search { margin-bottom: 12px; }
.wf-journal-search input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--wf-border);
  border-radius: 6px; font-size: 0.88rem;
}
.wf-journal-search input:focus { border-color: var(--wf-accent); outline: none; }

/* Entry list in calendar detail */
.wf-journal-day-entries { margin-top: 12px; }
.wf-journal-day-entry {
  padding: 10px 12px; border: 1px solid var(--wf-border); border-radius: 8px;
  margin-bottom: 8px; cursor: pointer; transition: border-color 0.15s;
}
.wf-journal-day-entry:hover { border-color: var(--wf-accent); }
.wf-journal-day-entry__mood { font-size: 1.2rem; }
.wf-journal-day-entry__preview {
  font-size: 0.85rem; color: var(--wf-ink); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-journal-day-entry__meta { font-size: 0.72rem; color: var(--wf-muted); margin-top: 2px; }

/* Mobile */
@media (max-width: 575.98px) {
  .wf-journal-modal { max-width: 100%; padding: 14px; }
  .wf-journal-mood__options { gap: 4px; }
  .wf-journal-mood__btn { padding: 6px 10px; }
  .wf-journal-mood__emoji { font-size: 1.3rem; }
  .wf-journal-context { flex-direction: column; }
  .wf-journal-context__field { min-width: 100%; }
  .wf-journal-today-entry { font-size: 0.78rem; }
  .wf-journal-cal-day { min-height: 40px; }
  .wf-journal-coach { padding: 10px 12px; }
}