/* journal-cards.css — Phase 4 page-by-page redesign for /journal.html.
 *
 * The design's base entry-card / entry-side / mood-dot / entry-meta / entry-title /
 * entry-body / entry-tags / entry-arrow rules already live in app-shell.css. This
 * file ONLY adds the pieces that aren't in app-shell yet:
 *
 *   1. .mood-strip — horizontal scrollable pill bar showing emoji+label per recent
 *      entry's mood, color-coded. Sits above "Recent entries" grid.
 *   2. .entry-mood — color stripe on the left edge of an entry card (replaces the
 *      design's dot+number circle with a vertical stripe; same color logic).
 *   3. .entry-snippet — alias of .entry-body but with stricter 2-line clamp for
 *      grid layout, matching screenshot 12.
 *   4. Bridging rules so existing `.journal-entry` cards (kept for legacy JS hooks)
 *      look identical to the design's `.entry-card`.
 *
 * Per frontend/CLAUDE.md: NO inline styles in HTML/JS, NO inline scripts. All
 * color tokens come from tokens.css. Cozy-theme overrides honored via
 * [data-ux-mode="cozy"].
 */

/* ─── Phase-4: Hide legacy filter panel — design uses pills only ─── */
/* The .controls-panel glass-panel with select dropdowns is replaced by
 * the .timeline-filters pill row (#journalTypePills) in the Phase 4 design.
 * Keep the DOM for backward-compat progressive enhancement, just hide it. */
.controls-panel { display: none !important; }

/* ─── Phase-4: Journal hero → action-row ─── */
/* Replace the glass-panel wrapper with flat action-row styling so the
 * action cards match the design (screenshot 12): dark surface-2, no glass. */
.journal-hero.glass-panel {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
}
.journal-hero .hero-body { display: none !important; }
.journal-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}

/* ─── Action cards: 3-col layout with arrow affordance (matches mockup) ─── */
/* §101: the display:grid !important below outranks the UA [hidden] rule, so a
   card with the `hidden` attribute would still show. This guard restores the
   hide (hidden_attr_author_css_leak trap). */
.journal-action-card[hidden] { display: none !important; }
.journal-action-card {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  border-radius: var(--radius-md, 14px) !important;
  background: var(--surface-2, rgba(255,255,255,0.04)) !important;
  border: 1px solid var(--border, rgba(148,163,184,0.15)) !important;
  color: var(--fg, #f1f5f9) !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s !important;
  text-decoration: none !important;
  font-family: inherit !important;
}
.journal-action-card:hover {
  transform: translateY(-1px) !important;
  border-color: var(--border-strong, rgba(79,172,254,0.35)) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28) !important;
}
.journal-action-card.journal-action-primary {
  background: linear-gradient(135deg, rgba(79,172,254,0.10), rgba(148,121,255,0.10)) !important;
  border-color: var(--border-subtle, rgba(148,121,255,0.22)) !important;
}

/* Arrow glyph on the right of each action card */
.journal-action-card .jac-body::after {
  display: none;
}
.journal-action-card::after {
  content: "›";
  font-size: 20px;
  color: var(--fg-faded, rgba(148,163,184,0.6));
  line-height: 1;
}

.jac-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(79,172,254,0.12);
  color: var(--accent-cyan, #4facfe);
  font-size: 18px;
}
.journal-action-primary .jac-icon {
  background: var(--gradient-brand, linear-gradient(135deg,#4facfe,#9479ff));
  color: white;
}
.jac-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jac-title { font-size: 14px; font-weight: 600; }
.jac-desc { font-size: 12px; color: var(--fg-muted, #94a3b8); line-height: 1.4; }

/* ─── Phase-4: Journal stat grid spacing overrides ─── */
/* The stat-grid and stat-card base rules live in app-shell.css.
 * Here we only adjust margins so the grid sits tightly between the
 * action cards and the filter pills on the journal page. */
#journalStatGrid {
  margin-top: 0;
  margin-bottom: 18px;
}

/* Per-card icon tint colours — match mockup's colour-coded stat icons.
 * Target by nth-child since the icons render as generic .stat-ico divs.
 * 1=This month (cyan/blue), 2=Voice notes (green), 3=Longest entry (purple), 4=Mood (rose). */
#journalStatGrid .stat-card:nth-child(1) .stat-ico {
  background: rgba(79,172,254,0.14);
  color: #4facfe;
}
#journalStatGrid .stat-card:nth-child(2) .stat-ico {
  background: rgba(52,211,153,0.14);
  color: #34d399;
}
#journalStatGrid .stat-card:nth-child(3) .stat-ico {
  background: rgba(148,121,255,0.14);
  color: #9479ff;
}
#journalStatGrid .stat-card:nth-child(4) .stat-ico {
  background: rgba(251,113,133,0.14);
  color: #fb7185;
}

/* ─── Filter pills row ─── */
/* Inactive pills: dark outlined (surface-flat bg, border token).
 * Active pill: exactly ONE filled with the cyan→purple gradient.
 * These rules live in app-shell.css already — override only specifics. */
#journalTypePills {
  margin-bottom: 12px;
}

/* Ensure inactive pills use the dark outlined style from the mockup */
#journalTypePills .filter-pill:not(.active) {
  background: var(--surface-flat, #0f172a) !important;
  border: 1px solid var(--border, #1f2937) !important;
  color: var(--fg-muted, #94a3b8) !important;
}
#journalTypePills .filter-pill:not(.active):hover {
  color: var(--fg, #e6edf3) !important;
  border-color: var(--border-strong, rgba(79,172,254,0.35)) !important;
}
#journalTypePills .filter-pill.active {
  background: var(--gradient-brand, linear-gradient(135deg,#4facfe,#9479ff)) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* ─── Phase-4: Entries panel — switch grid → list layout ─── */
/* Mockup (screenshot 12) shows entries as a vertical list of .entry-card rows,
 * NOT a masonry/grid. Override the auto-fill grid from journal.html <style>. */
#journalEntries.journal-entries {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  grid-template-columns: unset !important;
}

/* Bridge .journal-entry.entry-card to the design system's 4-col entry row:
 * [tick] [avatar-dot] [main-content] [plus-affordance]. Overrides the 2-col
 * (auto 1fr) grid from journal.html's page <style>. */
.journal-entry.entry-card {
  display: grid !important;
  grid-template-columns: auto auto 1fr auto !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 16px 18px !important;
  border-radius: var(--radius-md, 14px) !important;
  border-radius: 14px !important;
  border: 1px solid var(--border, #1f2937) !important;
  background: var(--surface-2, rgba(15,23,42,0.85)) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  cursor: pointer !important;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s !important;
}

/* Avatar dot — small purple gradient circle on the left of each entry row,
 * matching the target design (screenshot 12). Purely decorative. */
.journal-entry.entry-card .entry-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #4FACFE, #9479FF);
  box-shadow: 0 0 0 2px rgba(148, 121, 255, 0.18);
  margin-top: 2px;
}

[data-ux-mode="cozy"] .journal-entry.entry-card .entry-avatar {
  background: linear-gradient(135deg, #b69763, #8a6a3b);
  box-shadow: 0 0 0 2px rgba(182, 151, 99, 0.22);
}

/* Meta-row dot separator — keeps the inline rhythm of "Mon · May 11 · 7:43am". */
.journal-entry.entry-card .entry-meta-sep {
  color: var(--fg-faded, rgba(148,163,184,0.5)) !important;
  font-size: 11px !important;
  opacity: 0.7;
}
.journal-entry.entry-card:hover {
  transform: translateY(-1px) !important;
  border-color: var(--border-strong, rgba(79,172,254,0.35)) !important;
  box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,0.28)) !important;
}

/* Column 1: tick-box + mood-stripe container */
.journal-entry.entry-card .journal-entry-tick {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}

/* Column 2: main content */
.journal-entry.entry-card .journal-entry-body.entry-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Column 4: "+" expand affordance, styled as a slim icon-button (matches
 * screenshot 12 — light grey "+" on the right edge of every row). The
 * outer card already handles the click; this button is decorative + a11y
 * label for screen readers. Specificity bumped via doubled class so any
 * page-level <style> rule loses the cascade. */
.journal-entry.entry-card .entry-arrow,
.journal-entry.entry-card button.entry-arrow {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--fg-faded, rgba(148,163,184,0.55)) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin-top: 2px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  font-family: inherit !important;
  transition: background 0.16s, color 0.16s !important;
}
.journal-entry.entry-card:hover .entry-arrow,
.journal-entry.entry-card:hover button.entry-arrow {
  color: var(--fg, #e6edf3) !important;
  background: rgba(148, 163, 184, 0.10) !important;
  background-image: none !important;
}

/* Meta row: date · type chip · word count */
.journal-entry.entry-card .journal-entry-header.entry-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--fg-muted, #94a3b8);
  margin-bottom: 4px;
}
.journal-entry.entry-card .journal-entry-date.entry-date {
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 11px !important;
}
.journal-entry.entry-card .entry-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--surface-flat, #0f172a);
  border: 1px solid var(--border, #1f2937);
  font-size: 11px;
}
.journal-entry.entry-card .entry-words {
  color: var(--fg-faded, rgba(148,163,184,0.6));
  font-size: 11px;
}

/* Title */
.journal-entry.entry-card .journal-entry-title.entry-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--fg-strong, #ffffff) !important;
  line-height: 1.3 !important;
  margin: 0 0 4px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Body excerpt: 2-line clamp */
.journal-entry.entry-card .journal-entry-content.entry-snippet.entry-body {
  font-size: 13px !important;
  color: var(--fg-muted, #94a3b8) !important;
  line-height: 1.55 !important;
  margin: 0 0 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Tag row — keep but slim down */
.journal-entry.entry-card .journal-entry-meta.entry-tags {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  font-size: 11px !important;
  margin: 0 !important;
}
.journal-entry.entry-card .journal-entry-type.entry-tag,
.journal-entry.entry-card .journal-mood.entry-tag {
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: var(--surface-flat, #0f172a) !important;
  border: 1px solid var(--border, #1f2937) !important;
  color: var(--fg-faded, rgba(148,163,184,0.6)) !important;
}

/* Mood left-edge stripe — position:absolute still works inside grid cell */
.journal-entry.entry-card .entry-mood {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  background: var(--entry-mood-color, transparent);
  opacity: 0.8;
}

/* ─── Mood strip (pill bar at top of recent entries) ─── */
.journal-mood-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  margin: 6px 0 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.journal-mood-strip::-webkit-scrollbar { height: 6px; }
.journal-mood-strip::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.journal-mood-strip::-webkit-scrollbar-track { background: transparent; }

.journal-mood-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted, #94a3b8);
  cursor: default;
  transition: border-color 0.18s, transform 0.18s;
}

.journal-mood-pill:hover {
  border-color: var(--border-strong, rgba(148, 163, 184, 0.35));
  transform: translateY(-1px);
}

.journal-mood-pill-emoji { font-size: 14px; line-height: 1; }
.journal-mood-pill-label {
  font-size: 11px;
  opacity: 0.85;
  letter-spacing: 0.02em;
}

/* Mood-color tint on the pill border, set inline-safe via CSS var. */
.journal-mood-pill[data-mood-tier="high"]   { border-color: rgba(34, 197, 94, 0.45); }
.journal-mood-pill[data-mood-tier="mid"]    { border-color: rgba(56, 189, 248, 0.45); }
.journal-mood-pill[data-mood-tier="low"]    { border-color: rgba(245, 158, 11, 0.45); }
.journal-mood-pill[data-mood-tier="vlow"]   { border-color: rgba(239, 68, 68, 0.45); }

[data-ux-mode="cozy"] .journal-mood-pill {
  background: var(--surface-raised, #FFFBF2);
  border-color: rgba(182, 151, 99, 0.28);
  color: var(--fg, #2b2b2b);
}

/* ─── Mood color stripe on the card's left edge ─── */
.journal-entry .entry-mood {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  background: var(--entry-mood-color, var(--fg-faded, #64748b));
  box-shadow: 0 0 12px var(--entry-mood-color, transparent);
  opacity: 0.85;
}

.journal-entry[data-mood-tier="high"]  { --entry-mood-color: #22c55e; }
.journal-entry[data-mood-tier="mid"]   { --entry-mood-color: #38bdf8; }
.journal-entry[data-mood-tier="low"]   { --entry-mood-color: #f59e0b; }
.journal-entry[data-mood-tier="vlow"]  { --entry-mood-color: #ef4444; }

/* The existing .journal-entry card needs position:relative for the stripe.
 * The journal.html page-level <style> block already gives the card padding +
 * radius; we only set position here so the absolute stripe anchors correctly. */
.journal-entry { position: relative; }

/* ─── 2-line snippet clamp inside the grid ─── */
.journal-entry .entry-snippet {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--fg-muted, #94a3b8);
  margin: 0.35rem 0 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-ux-mode="cozy"] .journal-entry .entry-snippet {
  color: var(--fg, #2b2b2b);
  opacity: 0.78;
  font-style: italic;
}

/* ─── Tag chip ─── */
.journal-entry .entry-tag {
  font-size: 10px;
  color: var(--fg-faded, #64748b);
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--surface-flat, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border, rgba(148, 163, 184, 0.16));
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Cozy-mode tint */
[data-ux-mode="cozy"] .journal-entry .entry-tag {
  background: rgba(182, 151, 99, 0.10);
  border-color: rgba(182, 151, 99, 0.22);
  color: var(--fg, #2b2b2b);
}

/* ============================================================
 * Android-parity mobile polish (≤900px)  — 2026-06-12
 * Android's three capture tiles (Voice / Write / Photo) are small
 * icon-over-label cards, not full-width rows. On phones, collapse
 * the description + chevron and stack icon over title in a tight
 * 3-up grid so the capture row reads as one clean band — matching
 * the native journal screen. !important here mirrors the base grid
 * rules above (which are also !important); kept in THIS file so it
 * wins regardless of EN/CN app-shell.css load order. Desktop (>900px)
 * keeps the full-width labelled rows.
 * ========================================================== */
@media (max-width: 900px) {
  .journal-actions-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .journal-action-card {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 14px 8px !important;
  }
  .journal-action-card::after { display: none !important; }
  .journal-action-card .jac-desc { display: none !important; }
  .journal-action-card .jac-body { align-items: center !important; }
  .journal-action-card .jac-title { font-size: 12px !important; }
}

/* Journal search match highlight (jsearch-hit) — set via safe DOM in
   journal_init.js highlightMatches(). color-mix so cozy warms it automatically. */
.jsearch-hit {
    background: color-mix(in srgb, var(--accent-cyan, #4facfe) 30%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}
[data-ux-mode="cozy"] .jsearch-hit {
    background: color-mix(in srgb, var(--accent-gold, #d9a441) 32%, transparent);
}

/* ─── Full-corpus journal search bar (2026-07-06) ─────────────────────────
   Visible replacement for the hidden legacy .controls-panel search box.
   Server-ranked search over ALL entries; results count + clear button. */
.journal-search-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 680px;
    margin: 0 0 1rem;
    padding: 0.65rem 0.95rem;
    border-radius: 14px;
    background: var(--surface-2, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--glass-border, rgba(79, 172, 254, 0.22));
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.journal-search-bar:focus-within {
    border-color: color-mix(in srgb, var(--accent-cyan, #4facfe) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan, #4facfe) 15%, transparent);
}
.journal-search-icon { color: var(--fg-muted, #94a3b8); flex: 0 0 auto; }
.journal-search-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--fg, #f8fafc);
    font-size: 0.95rem;
}
.journal-search-input::placeholder { color: var(--fg-muted, #94a3b8); }
.journal-search-count {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--fg-muted, #94a3b8);
    white-space: nowrap;
}
.journal-search-clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--fg-muted, #94a3b8);
}
.journal-search-clear:hover {
    background: color-mix(in srgb, var(--fg-muted, #94a3b8) 18%, transparent);
    color: var(--fg, #f8fafc);
}
[data-ux-mode="cozy"] .journal-search-bar:focus-within {
    border-color: color-mix(in srgb, var(--accent-gold, #d9a441) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold, #d9a441) 16%, transparent);
}