/*
 * css/components/noticing.css
 * Alongside: Move — Noticing Hub view styles
 *
 * 04 Oct 2026 v5
 *
 * v5 - LOOK-4. Suggested now as a green card with its tile; the four
 *   practices as a 2x2 grid of tiles (.wb-practice); this week's question,
 *   your reflections and the support lines as cards. Green is the mind's
 *   kind colour everywhere (variables.css --kind-green).
 *
 * 01 Oct 2026 v4
 *
 * v4 - SIGNPOST-STATIC. .support-lines, on Wellbeing and the journal.
 *
 * 01 Oct 2026 v3
 *
 * v3 - PT-2. .journal-delete: the ask under a journal entry before it
 *   is deleted. (SMOOTH-P4b) - .wb-*: the Wellbeing heading, the coach's
 *   one line and the "Suggested now" card, whose Start is the one filled
 *   button on the screen.
 *
 * 21 Jun 2026 v1 (S4-CSS-NOTICING)
 *
 * The Noticing tab is a card-based hub. Its cards use the shared .card
 * class from components/cards.css. This file handles layout and any
 * noticing-specific overrides.
 *
 * If noticing.js introduces component-specific class names in a future
 * session, add them here. For now this file handles spacing and layout
 * of the hub shell so the tab feels distinct from Today and Progress.
 */

/* ── Hub shell ────────────────────────────────────────────────────────────── */

.noticing-view {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: var(--space-4) var(--space-4) var(--space-8);
  background: var(--color-bg);
  box-sizing: border-box;
}

.noticing-header {
  margin-bottom: var(--space-5);
}

.noticing-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.noticing-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── Card grid / stack ────────────────────────────────────────────────────── */

.noticing-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Individual noticing card overrides ───────────────────────────────────── */

.noticing-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.noticing-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary);
}

.noticing-card-icon {
  font-size: calc(1.75rem * var(--user-text-scale, 1));
  flex-shrink: 0;
  line-height: 1.2;
}

.noticing-card-body {
  flex: 1;
  min-width: 0;
}

.noticing-card-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.noticing-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.4;
}

.noticing-card-arrow {
  color: var(--color-primary);
  font-size: calc(1.25rem * var(--user-text-scale, 1));
  flex-shrink: 0;
}

/* ── "On its way" / disabled card state ───────────────────────────────────── */

.noticing-card--coming-soon {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.noticing-card--coming-soon .noticing-card-arrow {
  display: none;
}

.noticing-coming-tag {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 2px var(--space-2);
  flex-shrink: 0;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .noticing-card {
    transition: none;
  }
}

/* ── SMOOTH-P4b. Wellbeing's top: heading, one line, one practice ── */
.wb-title { margin: 0 0 var(--space-2); font-size: var(--text-2xl, 1.5rem); color: var(--color-text); }
.wb-coach { margin: 0 0 var(--space-4); line-height: 1.55; color: var(--color-text); }
.wb-suggest { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.wb-suggest__kicker { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
.wb-suggest__name { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--color-text); }
.wb-suggest__desc { margin: 0 0 var(--space-2); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }

/* PT-2, 01 Oct 2026. "Delete this entry?" under a journal entry. */
.journal-delete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.journal-delete p { flex-basis: 100%; margin: 0; }
.journal-delete .btn { min-height: 44px; }

/* SIGNPOST-STATIC, 01 Oct 2026. Free support, always the same. */
.support-lines {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.support-lines__title { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.support-lines__lede  { margin: 0 0 var(--space-3); color: var(--color-text-secondary); }
.support-lines__list  { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); line-height: 1.6; }
.support-lines__link  { color: var(--color-primary); text-decoration: underline; }


/* LOOK-4 — Wellbeing, 04 Oct 2026 */
.noticing-view .wb-suggest {
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: 20px;
  background: var(--color-bg);
  background: color-mix(in srgb, var(--kind-green) 12%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--kind-green) 35%, var(--color-border-light));
}
.wb-suggest__head { display: flex; align-items: center; gap: var(--space-3); }
.noticing-view .wb-suggest__kicker { color: var(--color-text); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-xs); }
.noticing-view .wb-suggest__desc { color: var(--color-text); }
.noticing-view .wb-suggest .btn-primary { background: var(--kind-green); border-color: var(--kind-green); color: var(--color-text-inverse); }
.noticing-view .wb-question,
.noticing-view .wb-reflections .card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
}
.wb-practices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.wb-practice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 132px;
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wb-practice:hover { background: var(--color-bg-hover); }
.wb-practice:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.wb-practice__name { font-size: var(--text-base); font-weight: 600; }
.wb-practice__sub { font-size: var(--text-sm); line-height: 1.35; color: var(--color-text-secondary); }
.noticing-view .support-lines {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
}