/* ── Daily Reflection ── */

/* Card */
/* .task-list-card (tasks.css) carries no background of its own — every
   other .task-list-card on the app relies on that (transparent shell over
   --bg-dark). The Daily Reflection card is the one exception: it needs its
   own --bg-card fill to read as an elevated card, matching the prototype's
   .task-list-card background. Scoped to .diary-card so no other card page
   is affected. */
.diary-card { background: var(--bg-card); border-top: 2px solid var(--purple, #9b8ecf); }
.diary-header:hover { background: color-mix(in srgb, var(--bg-dark) 90%, var(--purple, #9b8ecf) 10%); }

/* Adaptive weight: with nothing completed, felt, or written yet, the card
   reads as a thin rail rather than a full card, so the top of the page
   doesn't open on an empty box — it fills in as the day's reflection
   accumulates. */
.diary-card--empty {
    background: transparent;
    border-color: transparent;
    border-top-color: color-mix(in srgb, var(--purple, #9b8ecf) 40%, transparent);
}
.diary-card--empty .diary-header {
    background: transparent;
    border-bottom-color: transparent;
    color: var(--text-muted);
}
.diary-card--empty .diary-header:hover {
    background: var(--accent-glow);
}

.diary-status-badge {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 20px;
    padding: 1px 9px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.diary-status-badge .material-icons { font-size: 13px; }
.diary-status-badge--empty {
    color: var(--text-muted);
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
}
.diary-status-badge--saved {
    color: var(--green);
    background: var(--green-glow, rgba(63,184,127,0.10));
    border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
}

.diary-teaser {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
}
.diary-teaser .material-icons { font-size: 17px; color: var(--purple, #9b8ecf); }

.diary-preview {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0.75rem 1rem;
    cursor: pointer;
}
.diary-preview:hover { background: var(--accent-glow); }
.diary-preview .material-icons { font-size: 16px; color: var(--text-muted); margin-top: 1px; }
.diary-preview-text {
    flex: 1; min-width: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.diary-preview-text p { margin: 0; }
.diary-preview-text p + p { margin-top: 0.3em; }
.diary-preview-text ul,
.diary-preview-text ol {
    margin: 0;
    padding-left: 1.1em;
}
.diary-preview-text ul { list-style: disc; }
.diary-preview-text ol { list-style: decimal; }
.diary-preview-text li { margin: 0; }
.diary-preview-text a { color: var(--accent); text-decoration: underline; }
.diary-preview-edit {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
}

.diary-collapsible { overflow: hidden; transition: max-height 0.25s ease, opacity 0.25s ease; }
.diary-body { padding: 0.85rem 1rem 1rem; }

#diary-wins { padding: 0.75rem 1rem 0; }

.diary-summary-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.diary-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    /* Matches the prototype's 1.1rem — .diary-entry-wins > .diary-summary-chips
       (below) overrides this back to 0 for the diary timeline, so this only
       affects the Today card's wins row, right above the feelings section. */
    margin-bottom: 1.1rem;
}
.diary-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
}
.diary-chip .material-icons { font-size: 13px; }
.diary-chip--task .material-icons { color: var(--green); }
.diary-chip--habit .material-icons { color: var(--amber); }
.diary-chip--reminder .material-icons { color: var(--accent); }
/* A note exists on this completion — muted, not the habit's amber, so it
   reads as a secondary marker rather than competing with the flame icon. */
.diary-chip-note-icon.material-icons { font-size: 12px; color: var(--text-muted); margin-left: 2px; }

/* Soften the live wins-chip refresh so it doesn't feel like the page is
   fidgeting under the reader's cursor while they're writing. */
@keyframes diaryChipFadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.diary-chip { animation: diaryChipFadeIn 0.15s ease; }
.diary-summary-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 0.4rem;
}

/* ══════════════════════════════════════════════════════════════════════
   Feelings — "How did today feel?" chip row + Miller-column picker.
   Ported from claude/daily-reflection-feelings-columns-prototype.html.
   ══════════════════════════════════════════════════════════════════════ */

/* .task-list-card carries no padding of its own (every section supplies
   its own, see #diary-wins / .diary-preview / .diary-body above) — without
   this, the feelings block sits flush against the card edge instead of
   lining up with every other section. */
.feelings-wrap { padding: 0 1rem; margin-bottom: 1.15rem; }
.feelings-chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 26px; }

.feeling-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; cursor: pointer; border: 1px solid; transition: transform 0.12s ease; }
.feeling-chip:hover { transform: translateY(-1px); }
.feeling-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.feeling-chip-remove { font-size: 13px !important; display: inline-flex; opacity: 0.55; border-radius: 50%; padding: 2px; cursor: pointer; transition: opacity 0.15s, background 0.15s, color 0.15s; }
.feeling-chip-remove:hover { opacity: 1; background: rgba(199,90,90,0.22); color: var(--clear-red); }

.feeling-chip--green  { background: color-mix(in srgb, var(--green) 15%, transparent);      border-color: color-mix(in srgb, var(--green) 45%, transparent);      color: var(--green); }
.feeling-chip--blue   { background: color-mix(in srgb, var(--accent) 15%, transparent);      border-color: color-mix(in srgb, var(--accent) 45%, transparent);     color: var(--accent); }
.feeling-chip--amber  { background: color-mix(in srgb, var(--amber) 15%, transparent);       border-color: color-mix(in srgb, var(--amber) 45%, transparent);      color: var(--amber); }
.feeling-chip--red    { background: color-mix(in srgb, var(--clear-red) 15%, transparent);   border-color: color-mix(in srgb, var(--clear-red) 45%, transparent);  color: var(--clear-red); }
.feeling-chip--purple { background: color-mix(in srgb, var(--purple) 15%, transparent);      border-color: color-mix(in srgb, var(--purple) 45%, transparent);     color: var(--purple); }
.feeling-chip--teal   { background: color-mix(in srgb, var(--teal) 15%, transparent);        border-color: color-mix(in srgb, var(--teal) 45%, transparent);       color: var(--teal); }
.feeling-chip--green  .feeling-dot { background: var(--green); }
.feeling-chip--blue   .feeling-dot { background: var(--accent); }
.feeling-chip--amber  .feeling-dot { background: var(--amber); }
.feeling-chip--red    .feeling-dot { background: var(--clear-red); }
.feeling-chip--purple .feeling-dot { background: var(--purple); }
.feeling-chip--teal   .feeling-dot { background: var(--teal); }

/* Standalone dot modifiers — for dots that appear outside a .feeling-chip
   (the detail card head, the read-only diary timeline row). */
.feeling-dot--green  { background: var(--green); }
.feeling-dot--blue   { background: var(--accent); }
.feeling-dot--amber  { background: var(--amber); }
.feeling-dot--red    { background: var(--clear-red); }
.feeling-dot--purple { background: var(--purple); }
.feeling-dot--teal   { background: var(--teal); }

.feelings-trigger-wrap { margin-top: 8px; }
.feelings-add-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px 4px 8px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); background: transparent; border: 1px dashed var(--border-color); cursor: pointer; transition: border-color 0.15s, color 0.15s; font-family: inherit; }
.feelings-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.feelings-add-btn .material-icons { font-size: 15px; }

.feeling-detail-card { margin-top: 0.7rem; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.7rem 0.85rem; }
.feeling-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 0.3rem; }
.feeling-detail-name { font-weight: 700; font-size: 0.9rem; }
.feeling-detail-close { margin-left: auto; cursor: pointer; color: var(--text-muted); font-size: 19px !important; }
.feeling-detail-close:hover { color: var(--text-primary); }
.feeling-detail-path { font-size: 0.68rem; color: var(--text-muted); display: flex; align-items: center; gap: 1px; margin: 0 0 0.5rem; }
.feeling-detail-path .material-icons { font-size: 13px; }
.feeling-detail-context {
    width: 100%; min-height: 44px; resize: vertical; background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: 0.82rem;
    padding: 0.5rem 0.65rem; margin-bottom: 0.65rem; outline: none;
}
.feeling-detail-context::placeholder { color: var(--text-muted); }
.feeling-detail-context:focus { border-color: var(--purple); }
.feeling-detail-desc { display: flex; gap: 8px; font-size: 0.8rem; color: var(--text-secondary); font-style: italic; line-height: 1.5; }
.feeling-detail-desc .material-icons { font-size: 15px; color: var(--text-muted); flex-shrink: 0; margin-top: 1px; }

.feeling-detail-manage { margin-top: 0.6rem; font-size: 0.78rem; }
.feeling-detail-manage summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; }
.feeling-detail-manage summary::-webkit-details-marker { display: none; }
.feeling-detail-manage summary:hover { text-decoration: underline; }
.feeling-detail-manage summary::before { content: 'chevron_right'; font-family: 'Material Icons'; font-size: 15px; vertical-align: -3px; margin-right: 2px; transition: transform 0.15s; display: inline-block; }
.feeling-detail-manage[open] summary::before { transform: rotate(90deg); }
.feeling-detail-manage p { margin-top: 0.4rem; color: var(--text-secondary); line-height: 1.55; }

/* ── Feelings picker modal (Miller columns) ── */
.feelings-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.2s; padding: 1rem; }
.feelings-modal-backdrop.is-open { opacity: 1; pointer-events: all; }
.feelings-modal { background: var(--bg-card2, var(--bg-dark)); border: 1px solid var(--border-color); border-radius: 16px; width: 100%; max-width: 760px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-drop); transform: scale(0.94); transition: transform 0.2s cubic-bezier(0.4,0,0.2,1); }
.feelings-modal-backdrop.is-open .feelings-modal { transform: scale(1); }
.feelings-modal-header { display: flex; align-items: center; gap: 8px; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; background: var(--bg-card2, var(--bg-dark)); z-index: 2; border-radius: 16px 16px 0 0; }
.feelings-modal-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.feelings-modal-close { margin-left: auto; cursor: pointer; color: var(--text-muted); border-radius: 50%; padding: 2px; }
.feelings-modal-close:hover, .feelings-modal-close:focus-visible { color: var(--text-primary); background: var(--accent-glow); }
.feelings-modal-body { padding: 1rem 1.1rem 0.4rem; }
.feelings-modal-hint { font-size: 0.74rem; color: var(--text-muted); text-align: center; margin: 0.7rem 0 0.2rem; }
.feelings-modal-footer { display: flex; justify-content: flex-end; padding: 0.8rem 1.1rem; border-top: 1px solid var(--border-color); }
.feelings-modal-done { background: var(--accent); border: none; color: #fff; font-family: inherit; font-size: 0.82rem; font-weight: 700; padding: 6px 18px; border-radius: 8px; cursor: pointer; }

.columns-path { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-align: center; min-height: 1.2rem; margin-bottom: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap; }
.columns-path-seg { color: var(--text-primary); cursor: pointer; padding: 2px 4px; border-radius: 5px; background: transparent; border: none; font: inherit; font-weight: 700; }
.columns-path-seg:hover, .columns-path-seg:focus-visible { background: var(--accent-glow); color: var(--accent); }
.columns-path .material-icons { font-size: 14px; color: var(--text-muted); }
.columns-path-placeholder { color: var(--text-muted); font-weight: 500; font-style: italic; }

.feelings-columns { display: flex; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; background: var(--bg-dark); height: 400px; }
.feelings-column { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border-color); }
.feelings-column:last-child { border-right: none; }
.feelings-column-head { padding: 0.5rem 0.75rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border-color); background: var(--bg-card2, var(--bg-card)); flex-shrink: 0; }
.feelings-column-list { overflow-y: auto; flex: 1; padding: 0.4rem; display: flex; flex-direction: column; gap: 4px; }
.feelings-column-empty { margin: auto; padding: 1rem; text-align: center; font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.feelings-column-empty .material-icons { font-size: 22px; color: var(--text-muted); display: block; margin: 0 auto 0.4rem; }

.col-row { display: flex; align-items: stretch; gap: 4px; }
.col-row-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 0.45rem 0.55rem; cursor: pointer; font-family: inherit; color: var(--text-primary); font-size: 0.82rem; font-weight: 600; transition: background 0.15s, border-color 0.15s; }
.col-row-pick .feeling-dot { flex-shrink: 0; }
.col-row-pick-label { flex: 1; min-width: 0; }
.col-row-pick-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-row-pick-desc { display: block; font-size: 0.68rem; font-weight: 400; color: var(--text-secondary); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-row-pick:hover, .col-row-pick:focus-visible { background: var(--accent-glow); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.col-row-pick.is-active-drill { border-color: var(--accent); background: var(--accent-glow); }
.col-row-pick.is-picked { background: color-mix(in srgb, var(--purple) 12%, transparent); border-color: color-mix(in srgb, var(--purple) 40%, transparent); }
.col-row-check { margin-left: auto; font-size: 16px !important; color: var(--purple); flex-shrink: 0; }
.col-row-drill { flex-shrink: 0; width: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.col-row-drill .material-icons { font-size: 18px; }
.col-row-drill:hover, .col-row-drill:focus-visible { color: var(--accent); background: var(--accent-glow); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.col-row-drill.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-glow); }
.col-row-slice { flex-shrink: 0; width: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.col-row-slice .material-icons { font-size: 17px; }
.col-row-slice:hover, .col-row-slice:focus-visible { color: var(--amber); background: var(--amber-glow); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }

/* Search-jump flash — briefly rings the row a search result landed on */
.col-row-pick.is-search-flash { animation: feelingsSearchFlash 1.1s ease; }
@keyframes feelingsSearchFlash {
    0%   { box-shadow: 0 0 0 2px var(--accent); background: var(--accent-glow); }
    65%  { box-shadow: 0 0 0 2px var(--accent); background: var(--accent-glow); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (max-width: 640px) {
    .feelings-columns { height: auto; min-height: 340px; }
    .feelings-columns.mobile-single .feelings-column { display: none; }
    .feelings-columns.mobile-single .feelings-column.is-active-mobile { display: flex; }
    .mobile-back-row { display: none; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border-color); }
    .feelings-columns.mobile-single .mobile-back-row.is-shown { display: flex; }
    .mobile-back-btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none; color: var(--accent); font: inherit; font-weight: 600; font-size: 0.78rem; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
    .mobile-back-btn:hover { background: var(--accent-glow); }
}
@media (min-width: 641px) {
    .mobile-back-row { display: none !important; }
}

/* ── Search bar — autocomplete over the taxonomy, above the columns ── */
.feelings-search-wrap { position: relative; margin-bottom: 0.85rem; }
.feelings-search-input-row { display: flex; align-items: center; gap: 8px; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.5rem 0.7rem; transition: border-color 0.15s; }
.feelings-search-input-row:focus-within { border-color: var(--accent); }
.feelings-search-input-row > .material-icons { font-size: 18px; color: var(--text-muted); flex-shrink: 0; }
.feelings-search-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text-primary); font-family: inherit; font-size: 0.85rem; }
.feelings-search-input::placeholder { color: var(--text-muted); }
.feelings-search-clear { cursor: pointer; color: var(--text-muted); border-radius: 50%; padding: 2px; font-size: 16px !important; display: none; flex-shrink: 0; }
.feelings-search-clear.is-shown { display: inline-flex; }
.feelings-search-clear:hover, .feelings-search-clear:focus-visible { color: var(--text-primary); background: var(--accent-glow); }

.feelings-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-card2, var(--bg-card)); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: var(--shadow-drop); max-height: 280px; overflow-y: auto; z-index: 5; display: none; }
.feelings-search-results.is-open { display: block; }
.feelings-search-result { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 0.5rem 0.7rem; background: transparent; border: none; border-bottom: 1px solid var(--border-color); cursor: pointer; font-family: inherit; color: var(--text-primary); }
.feelings-search-result:last-child { border-bottom: none; }
.feelings-search-result:hover, .feelings-search-result.is-active { background: var(--accent-glow); }
.feelings-search-result-label { flex: 1; min-width: 0; }
.feelings-search-result-name { display: block; font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feelings-search-result-path { display: block; font-size: 0.7rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feelings-search-result-check { color: var(--accent) !important; font-size: 16px !important; flex-shrink: 0; }
.feelings-search-empty { padding: 0.9rem 0.7rem; text-align: center; font-size: 0.78rem; color: var(--text-muted); }
.feelings-search-more { padding: 0.4rem 0.7rem; text-align: center; font-size: 0.7rem; color: var(--text-muted); font-style: italic; border-top: 1px solid var(--border-color); }

/* ── Core slice — stacked dialog on top of the columns modal ── */
.feelings-slice-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.2s; padding: 1rem; }
.feelings-slice-backdrop.is-open { opacity: 1; pointer-events: all; }
.feelings-slice-modal { background: var(--bg-card2, var(--bg-dark)); border: 1px solid var(--border-color); border-radius: 16px; width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; box-shadow: 0 12px 48px rgba(0,0,0,0.55); transform: scale(0.94); transition: transform 0.2s cubic-bezier(0.4,0,0.2,1); }
.feelings-slice-backdrop.is-open .feelings-slice-modal { transform: scale(1); }
.feelings-slice-header { display: flex; align-items: center; gap: 8px; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; background: var(--bg-card2, var(--bg-dark)); border-radius: 16px 16px 0 0; }
.feelings-slice-title-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.feelings-slice-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.feelings-slice-close { margin-left: auto; cursor: pointer; color: var(--text-muted); border-radius: 50%; padding: 2px; }
.feelings-slice-close:hover, .feelings-slice-close:focus-visible { color: var(--text-primary); background: var(--accent-glow); }
.feelings-slice-body { padding: 0.7rem 1rem 0.3rem; }
/* The core's own meaning, always visible (not hover-gated like the wedges)
   — it's the one node in this dialog with no touch-friendly hover
   equivalent, since the hub itself isn't a wedge in the list view. */
.slice-core-desc { font-size: 0.8rem; color: var(--text-secondary); text-align: center; line-height: 1.5; margin: 0 0 0.7rem; }
.feelings-slice-hint { font-size: 0.72rem; color: var(--text-muted); text-align: center; margin: 0.4rem 0 0.2rem; }
.feelings-slice-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.1rem; border-top: 1px solid var(--border-color); }
.feelings-slice-done { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); font-family: inherit; font-size: 0.78rem; font-weight: 600; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
.feelings-slice-done:hover { border-color: var(--text-muted); color: var(--text-primary); }
.feelings-slice-back { display: inline-flex; align-items: center; gap: 4px; background: var(--accent); border: none; color: #fff; font-family: inherit; font-size: 0.8rem; font-weight: 700; padding: 6px 16px; border-radius: 8px; cursor: pointer; }
.feelings-slice-back .material-icons { font-size: 16px; }

.slice-svg-view { display: block; position: relative; }
.slice-svg { display: block; margin: 0 auto; max-width: 520px; width: 100%; height: auto; }

/* Description-on-hover/focus — same floating-card pattern as
   .week-pulse-tooltip (tasks.css), positioned by JS since wedges sit at
   arbitrary angles rather than in a fixed row. */
.slice-tooltip {
    position: absolute;
    max-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    box-shadow: var(--shadow-drop);
    font-family: inherit;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.slice-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.slice-tooltip-name { display: block; font-size: 0.78rem; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.slice-tooltip-desc { display: block; font-size: 0.72rem; line-height: 1.4; color: var(--text-secondary); }
.slice-wedge { cursor: pointer; outline: none; }
.slice-wedge path { stroke-width: 1.5; transition: opacity 0.15s ease, stroke-width 0.15s ease; }
.slice-wedge text { font-family: inherit; font-weight: 600; pointer-events: none; dominant-baseline: middle; }
.slice-wedge text tspan { font-family: inherit; font-weight: inherit; }
.slice-wedge:hover path { opacity: 0.8; }
.slice-wedge:focus-visible path { stroke: var(--text-primary); stroke-width: 2.5; }
.slice-wedge--secondary path { opacity: 0.42; }
.slice-wedge--secondary text { font-size: 11px; font-weight: 700; }
.slice-wedge--tertiary path { opacity: 0.26; }
.slice-wedge--tertiary text { font-size: 10.5px; font-weight: 500; }
.slice-wedge.is-picked path { opacity: 0.92; stroke: var(--text-primary); stroke-width: 2; }
.slice-wedge.is-picked text { font-weight: 800; }

.slice-wedge--green  path { fill: var(--green);     stroke: var(--bg-card2, var(--bg-dark)); }
.slice-wedge--green  text { fill: var(--green); }
.slice-wedge--blue   path { fill: var(--accent);    stroke: var(--bg-card2, var(--bg-dark)); }
.slice-wedge--blue   text { fill: var(--accent); }
.slice-wedge--amber  path { fill: var(--amber);     stroke: var(--bg-card2, var(--bg-dark)); }
.slice-wedge--amber  text { fill: var(--amber); }
.slice-wedge--red    path { fill: var(--clear-red); stroke: var(--bg-card2, var(--bg-dark)); }
.slice-wedge--red    text { fill: var(--clear-red); }
.slice-wedge--purple path { fill: var(--purple);    stroke: var(--bg-card2, var(--bg-dark)); }
.slice-wedge--purple text { fill: var(--purple); }
.slice-wedge--teal   path { fill: var(--teal);      stroke: var(--bg-card2, var(--bg-dark)); }
.slice-wedge--teal   text { fill: var(--teal); }

.slice-hub { fill: var(--bg-card2, var(--bg-dark)); stroke: var(--border-color); stroke-width: 1.5; transition: stroke 0.15s ease; }
.slice-hub-label { font-family: inherit; font-size: 13px; font-weight: 700; pointer-events: none; }
.slice-hub-group { outline: none; cursor: pointer; }
.slice-hub-group:hover .slice-hub,
.slice-hub-group:focus-visible .slice-hub { stroke: var(--text-secondary); }
.slice-hub-group.is-picked .slice-hub { stroke: var(--accent); stroke-width: 2.5; }

/* Mobile fallback — flat, fully-expanded list (no drill-down needed: one
   core's whole branch is short enough to show entirely at once). */
.slice-list-view { display: none; }
.slice-list-section { margin-bottom: 0.55rem; }
.slice-sec-row, .slice-tert-row { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.55rem 0.7rem; cursor: pointer; font-family: inherit; color: var(--text-primary); margin-bottom: 6px; transition: border-color 0.15s; }
.slice-sec-row .feeling-dot, .slice-tert-row .feeling-dot { margin-top: 5px; flex-shrink: 0; }
.slice-sec-row .slice-row-check, .slice-tert-row .slice-row-check { margin-top: 2px; }
.slice-sec-row { font-size: 0.85rem; font-weight: 700; }
.slice-tert-row { width: calc(100% - 20px); margin-left: 20px; font-size: 0.82rem; font-weight: 600; border-radius: 9px; }
.slice-sec-row:hover, .slice-tert-row:hover, .slice-sec-row:focus-visible, .slice-tert-row:focus-visible { border-color: var(--accent); }
.slice-sec-row.is-picked, .slice-tert-row.is-picked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-dark)); }
.slice-row-check { margin-left: auto; color: var(--accent) !important; font-size: 16px !important; flex-shrink: 0; }
/* Meaning shown inline here, not on hover — this is the mobile/touch
   fallback, and hover has no touch equivalent. */
.slice-row-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.slice-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slice-row-desc { font-size: 0.7rem; font-weight: 400; line-height: 1.35; color: var(--text-secondary); white-space: normal; }

/* Independent breakpoint from the columns picker's own 640px collapse
   above — these are two different dialogs with different collapse points. */
@media (max-width: 620px) {
    .slice-svg-view { display: none; }
    .slice-list-view { display: block; }
    .feelings-slice-backdrop { padding: 0; }
    .feelings-slice-modal { max-width: 100%; width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
    .feelings-slice-header, .feelings-slice-footer { border-radius: 0; }
}

.diary-toolbar {
    display: flex;
    gap: 4px;
    margin-bottom: 0.4rem;
}
.diary-toolbar-btn {
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.diary-toolbar-btn .material-icons { font-size: 15px; }
.diary-toolbar-btn:hover {
    color: var(--purple, #9b8ecf);
    border-color: var(--purple, #9b8ecf);
    background: color-mix(in srgb, var(--purple, #9b8ecf) 10%, transparent);
}

.diary-textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.55;
    padding: 0.65rem 0.8rem;
    outline: none;
    transition: border-color 0.2s;
}
.diary-textarea::placeholder { color: var(--text-muted); }
.diary-textarea:focus { border-color: var(--purple, #9b8ecf); }

.diary-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.7rem;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.diary-hint { font-size: 0.72rem; color: var(--text-muted); }
.diary-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.diary-btn-cancel {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.diary-btn-cancel:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.diary-btn-save {
    background: var(--purple, #9b8ecf);
    border: none;
    color: #0b0f14;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.diary-btn-save:hover { opacity: 0.88; }

/* ══════════════════════════════════════════════════════════════════════
   Diary Memories — lookback section at the top of the diary page.
   ══════════════════════════════════════════════════════════════════════ */

.diary-memories {
    margin-bottom: 2rem;
}
.diary-memory {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.diary-memory + .diary-memory {
    margin-top: 0.75rem;
}
.diary-memory-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}
.diary-memory-icon {
    font-size: 17px;
    color: var(--purple, #9b8ecf);
    flex-shrink: 0;
}
.diary-memory-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--purple, #9b8ecf);
}
.diary-memory-card {
    padding: 0.8rem 1rem 0.9rem;
}
.diary-memory-card + .diary-memory-card {
    border-top: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}
.diary-memory-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.5rem;
}
.diary-memory-meta time {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.diary-memory-date {
    text-decoration: none;
}
.diary-memory-date:hover time {
    color: var(--accent);
    text-decoration: underline;
}
.diary-memory-meta .diary-entry-open {
    margin-left: auto;
}

@media (max-width: 768px) {
    .diary-memories { margin-bottom: 1.5rem; }
    .diary-memory-card { padding: 0.7rem 0.8rem 0.75rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   Diary Timeline — reverse-chronological page of day entries.

   Everything below is either a new .diary-timeline-* / .diary-entry-*
   class, or an override SCOPED under .diary-timeline. No existing
   .diary-* rule above this point is modified, so the Today page's
   reflection card (partials/daily_reflection_section.html) is untouched.
   ══════════════════════════════════════════════════════════════════════ */

.diary-timeline {
    /* Column geometry lives here so the media query can retune it in one
       place. The rail is a real grid item, so nothing hardcodes its x. */
    --diary-date-col: 60px;
    --diary-rail-col: 20px;
    --diary-entry-gap: 1.25rem;
}

/* ── Month header ─────────────────────────────────────────────────────
   First position:sticky in the app. 3.25rem = Bulma's fixed navbar
   height (cf. navbar.css:178). z-index 5 sits under the navbar's 30. */
.diary-timeline-month {
    position: sticky;
    top: 3.25rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 2rem 0 1rem;
    padding: 0.5rem 0;
    background: var(--bg-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.diary-timeline-month:first-child { margin-top: 0; }
.diary-timeline-month::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}
.diary-timeline-month-count {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary);
    opacity: 0.75;
}

/* ── Entry shell ──────────────────────────────────────────────────────
   column-gap is 0 on purpose: padding on the date and card columns does
   the spacing, so the rail's centre stays a pure function of the two
   fixed column widths at every breakpoint. */
.diary-entry {
    display: grid;
    grid-template-columns: var(--diary-date-col) var(--diary-rail-col) minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
    content-visibility: auto;
    contain-intrinsic-size: auto 190px;
}

/* ── Date gutter ── */
.diary-entry-date {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0.15rem 0.7rem 0 0;
    margin: 0;
}
.diary-entry-date time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.diary-entry-daynum {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    /* --text-muted fails contrast on --bg-card/--bg-dark (2.07:1) —
       --text-primary is the readable choice for the headline number. */
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.diary-entry-weekday {
    margin-top: 3px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.diary-entry--noteless .diary-entry-daynum { color: var(--text-secondary); }
.diary-entry--today .diary-entry-daynum { color: var(--purple, #9b8ecf); }

/* ── Rail ─────────────────────────────────────────────────────────────
   align-self:stretch overrides the grid's align-items:start so the rail
   spans the full row. Grid item margins participate in track sizing, so
   .diary-entry-card's margin-bottom lets the rail bridge the gap between
   entries with no magic numbers. */
.diary-entry-rail {
    grid-column: 2;
    align-self: stretch;
    justify-self: center;
    position: relative;
    width: 1px;
    background: var(--border-color);
}

/* First entry under a month header: rail starts below the dot. */
.diary-timeline-month + .diary-entry .diary-entry-rail {
    background: linear-gradient(to bottom, transparent 0 9px, var(--border-color) 22px);
}
/* Last entry of a month / of the page / before the load-more control:
   rail fades out instead of stopping dead. */
.diary-entry:last-child .diary-entry-rail,
.diary-entry:has(+ .diary-timeline-month) .diary-entry-rail,
.diary-entry:has(+ .diary-timeline-gap) .diary-entry-rail,
.diary-entry:has(+ .diary-timeline-more) .diary-entry-rail,
.diary-entry:has(+ .diary-timeline-end) .diary-entry-rail {
    background: linear-gradient(to bottom, var(--border-color) 58%, transparent 100%);
}
/* A month with exactly one entry needs both caps. */
.diary-timeline-month + .diary-entry:has(+ .diary-timeline-month) .diary-entry-rail,
.diary-timeline-month + .diary-entry:has(+ .diary-timeline-gap) .diary-entry-rail,
.diary-timeline-month + .diary-entry:last-child .diary-entry-rail,
.diary-timeline-month + .diary-entry:has(+ .diary-timeline-more) .diary-entry-rail,
.diary-timeline-month + .diary-entry:has(+ .diary-timeline-end) .diary-entry-rail {
    background: linear-gradient(to bottom,
        transparent 0 9px, var(--border-color) 22px, var(--border-color) 58%, transparent 100%);
}

/* Dot: filled = a reflection was written that day, hollow = the day only
   has completions. Fill vs. ring is a SHAPE difference, so the "did I
   write?" scan still works in greyscale / for colourblind readers. */
.diary-entry-dot {
    position: absolute;
    top: 0.55rem;
    left: 50%;
    transform: translateX(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--purple, #9b8ecf);
    box-shadow: 0 0 0 3px var(--bg-dark);
}
.diary-entry--noteless .diary-entry-dot {
    width: 8px;
    height: 8px;
    background: var(--bg-dark);
    border: 1.5px solid var(--border-color);
}
.diary-entry--today .diary-entry-dot {
    box-shadow: 0 0 0 3px var(--bg-dark),
                0 0 0 5px color-mix(in srgb, var(--purple, #9b8ecf) 30%, transparent);
}

/* ── Card ── */
.diary-entry-card {
    grid-column: 3;
    margin-left: 12px;
    margin-bottom: var(--diary-entry-gap);
    padding: 0.8rem 1rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: border-color 0.15s ease;
}
.diary-entry:hover .diary-entry-card {
    border-color: color-mix(in srgb, var(--purple, #9b8ecf) 30%, var(--border-color));
}
/* Log-only day: drop the card weight so written days visually dominate. */
.diary-entry--noteless .diary-entry-card {
    background: transparent;
    border-color: color-mix(in srgb, var(--border-color) 60%, transparent);
    padding: 0.6rem 0.9rem 0.7rem;
}
/* Today echoes the purple top border of .diary-card on the Today page. */
.diary-entry--today .diary-entry-card {
    border-color: color-mix(in srgb, var(--purple, #9b8ecf) 35%, var(--border-color));
    border-top: 2px solid var(--purple, #9b8ecf);
    background: var(--bg-card);
}

/* ── Card head (meta row) ── */
.diary-entry-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}
.diary-entry-ago {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.diary-entry-today-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 10px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--purple, #9b8ecf) 45%, transparent);
    background: color-mix(in srgb, var(--purple, #9b8ecf) 12%, transparent);
    color: var(--purple, #9b8ecf);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Type counts — survives chip clamping, so a 20-win day is still
   readable at a glance. */
.diary-entry-counts {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.diary-entry-count { display: inline-flex; align-items: center; gap: 3px; }
.diary-entry-count .material-icons { font-size: 14px; flex-shrink: 0; }
.diary-entry-count--task     .material-icons { color: var(--green); }
.diary-entry-count--habit    .material-icons { color: var(--amber); }
.diary-entry-count--reminder .material-icons { color: var(--accent); }

.diary-entry-open {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.diary-entry-open .material-icons { font-size: 15px; flex-shrink: 0; }
.diary-entry-open:hover { text-decoration: underline; }
.diary-entry-open:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
    opacity: 1;
}
/* Reveal-on-hover only where hover exists — on touch it stays visible. */
@media (hover: hover) {
    .diary-entry-open { opacity: 0; }
    .diary-entry:hover .diary-entry-open,
    .diary-entry:focus-within .diary-entry-open { opacity: 1; }
}

/* ── The note: the headline of the entry ──────────────────────────────
   Markdown child rules are duplicated from .diary-preview-text rather
   than shared, deliberately: .diary-preview-text is 0.85rem /
   --text-secondary (a *preview*), this is 0.9rem / --text-primary (the
   *body*). Extracting a common class would mean editing the Today
   card's markup for a ~10-line saving — not worth the regression risk. */
.diary-entry-note {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.diary-entry-note p { margin: 0; }
.diary-entry-note p + p { margin-top: 0.55em; }
.diary-entry-note ul,
.diary-entry-note ol { margin: 0.4em 0 0; padding-left: 1.15em; }
.diary-entry-note ul { list-style: disc; }
.diary-entry-note ol { list-style: decimal; }
.diary-entry-note li { margin: 0.12em 0; }
.diary-entry-note strong { font-weight: 700; color: var(--text-primary); }
.diary-entry-note em { color: var(--text-secondary); }
.diary-entry-note a { color: var(--accent); text-decoration: underline; }

/* ── Feelings row: read-only, between the note and the wins footer.
   Never merged into .diary-summary-chips — accomplishment (green/amber
   wins) and emotion are different axes and shouldn't visually compete
   when scanning past entries. ── */
/* One feeling per row (not a wrapping badge row) — each dlf may carry a
   free-text context note, and the user wants that note fully readable
   inline, not truncated behind a hover tooltip. A wrapping row of badges
   can't fit unclamped multi-word context next to its neighbours, so each
   feeling gets its own line; context wraps to as many lines as it needs. */
.diary-entry-feelings {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0.6rem;
}
.diary-entry-feeling {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.diary-entry-feeling-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.diary-entry-feeling-label .feeling-dot { width: 6px; height: 6px; }
/* Emotion-wheel ancestry (core -> secondary), muted so the logged feeling
   itself (inherits --text-secondary from the label) stays the focal point. */
.diary-entry-feeling-path {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: var(--text-muted);
}
.diary-entry-feeling-path .material-icons { font-size: 13px; }
/* Context is optional per dlf — shown only when present, as a second,
   quieter line under the label rather than reproducing the Today card's
   expandable .feeling-detail-card. Full text, no truncation: wraps
   naturally within the card. --text-secondary (not --text-muted) because
   this is now permanent, readable body content rather than a hover-only
   hint — --text-muted fails AA contrast on --bg-card. Indent (11px) lines
   the context up under the name, past the dot + gap of the label above. */
.diary-entry-feeling-context {
    margin: 0;
    padding-left: 11px;
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Long notes: clamp with a fade + native <details> toggle. No JS, no ids
   — the timeline renders N of these, so an id-bound toggle (like the
   Today card's) is unusable here. */
.diary-entry-note-wrap { display: flex; flex-direction: column; }
.diary-entry-note-wrap > .diary-entry-note { order: 1; }
.diary-entry-note-toggle { order: 2; }
.diary-entry-note-wrap:not([open]) > .diary-entry-note {
    max-height: 11rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
            mask-image: linear-gradient(to bottom, #000 62%, transparent);
}
.diary-entry-note-toggle,
.diary-entry-wins-toggle {
    list-style: none;
    width: fit-content;
    margin-top: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}
.diary-entry-note-toggle::-webkit-details-marker,
.diary-entry-wins-toggle::-webkit-details-marker { display: none; }
.diary-entry-note-toggle:hover,
.diary-entry-wins-toggle:hover { text-decoration: underline; }
.diary-entry-note-toggle:focus-visible,
.diary-entry-wins-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.diary-entry-note-wrap[open]      .diary-entry-note-more { display: none; }
.diary-entry-note-wrap:not([open]) .diary-entry-note-less { display: none; }
.diary-entry-wins[open]           .diary-entry-wins-more { display: none; }
.diary-entry-wins:not([open])     .diary-entry-wins-less { display: none; }

/* Today with nothing written yet: the one write affordance on the page.
   Links to /today/ — the editor is never duplicated into the timeline. */
.diary-entry-write {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    color: var(--purple, #9b8ecf);
    text-decoration: none;
}
.diary-entry-write .material-icons { font-size: 17px; flex-shrink: 0; }
.diary-entry-write:hover { text-decoration: underline; }

/* ── Wins footer ── */
.diary-entry-wins {
    display: flex;
    flex-direction: column;
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}
/* No note AND no feelings above => nothing to separate from. When a
   noteless day still logged feelings, those sit directly above the wins
   footer and still need the separator — only drop it when both are absent. */
.diary-entry--noteless:not(:has(.diary-entry-feelings)) .diary-entry-wins {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
/* <summary> must be the first DOM child; order flips it below the chips. */
.diary-entry-wins > .diary-summary-chips { order: 1; margin-bottom: 0; }
.diary-entry-wins-toggle { order: 2; }
.diary-entry-wins--clamped:not([open]) > .diary-summary-chips {
    max-height: 3.6rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
            mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

/* ── Scoped overrides of the reused daily_log_wins.html partial ───────
   All under .diary-timeline: the Today card is unaffected. */

/* The partial's "That day's wins" label is redundant N times over — the
   entry's own date heading already scopes it. */
.diary-timeline .diary-summary-label { display: none; }

/* .diary-chip carries `animation: diaryChipFadeIn` unconditionally
   (see above) — fine for a handful of chips refreshing on Today, a paint
   cost and a vestibular annoyance for 100+ at page load / Load earlier. */
.diary-timeline .diary-chip { animation: none; }

/* One long task title must not eat three chip rows. */
.diary-timeline .diary-chip { max-width: 100%; }
.diary-timeline .diary-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 20rem;
}
/* 13px glyphs are one of the only non-colour cues distinguishing chip
   types — 14px + full opacity makes the silhouettes legible at a glance. */
.diary-timeline .diary-chip .material-icons { font-size: 14px; }

/* ── Timeline chrome: gaps, end-of-history, load earlier ── */

/* An empty stretch inside the loaded window. Dashed rail = "time passed,
   nothing recorded" — visually distinct from a solid live rail. */
.diary-timeline-gap {
    display: grid;
    grid-template-columns: var(--diary-date-col) var(--diary-rail-col) minmax(0, 1fr);
    column-gap: 0;
    align-items: center;
    margin-bottom: var(--diary-entry-gap);
}
.diary-timeline-gap-rail {
    grid-column: 2;
    align-self: stretch;
    justify-self: center;
    width: 1px;
    min-height: 44px;
    background: repeating-linear-gradient(
        to bottom, var(--border-color) 0 3px, transparent 3px 8px);
}
.diary-timeline-gap-text {
    grid-column: 3;
    margin-left: 12px;
    font-size: 0.76rem;
    font-style: italic;
    color: var(--text-secondary);
}

.diary-timeline-end {
    display: grid;
    grid-template-columns: var(--diary-date-col) var(--diary-rail-col) minmax(0, 1fr);
    column-gap: 0;
    align-items: center;
    padding-bottom: 2.5rem;
}
.diary-timeline-end-dot {
    grid-column: 2;
    justify-self: center;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border-color);
    box-shadow: 0 0 0 3px var(--bg-dark);
}
.diary-timeline-end-text {
    grid-column: 3;
    margin-left: 12px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Reuses .load-more-wrapper / .load-more-btn (sections.css) unchanged;
   this class only scopes the disabled/in-flight state. */
.diary-timeline-more .load-more-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ── Responsive ───────────────────────────────────────────────────────
   Lives here, not in responsive.css: that file holds only shared,
   cross-page components. Feature-local breakpoints live in the feature
   file — cf. goals.css, habits.css, week.css, panel.css.

   The spine SHRINKS rather than collapsing: moving the date <h4> inside
   the card is impossible in CSS, and the rail is worth the gutter width
   on the device where a diary is most likely to be read. */
@media (max-width: 768px) {
    .diary-timeline {
        --diary-date-col: 38px;
        --diary-rail-col: 16px;
        --diary-entry-gap: 1rem;
    }
    .diary-entry-date { padding-right: 0.45rem; }
    .diary-entry-daynum { font-size: 1.1rem; }
    .diary-entry-weekday { font-size: 0.6rem; }

    .diary-entry-card { margin-left: 9px; padding: 0.7rem 0.8rem 0.75rem; }
    .diary-entry--noteless .diary-entry-card { padding: 0.55rem 0.75rem 0.6rem; }

    .diary-entry-head { gap: 0.5rem; }
    .diary-entry-note { font-size: 0.88rem; line-height: 1.6; }
    .diary-entry-note-wrap:not([open]) > .diary-entry-note { max-height: 9rem; }

    .diary-timeline .diary-chip-label { max-width: 12rem; }

    .diary-timeline-month { margin: 1.5rem 0 0.85rem; font-size: 0.74rem; }
    .diary-timeline-gap-text,
    .diary-timeline-end-text { margin-left: 9px; font-size: 0.74rem; }
}