/* ===================== DASHBOARD V7 — sidebar deltas =====================
   Loaded AFTER dashboard.css. Only the bits the v7 sidebar adds:
   the streak HERO card, the "Do next" tag/“more” affordances, and the
   collapsible <details> chips. Everything else reuses v6's widget styles. */

/* ---- Sidebar child spacing (chips aren't .card, so v6's `.card + .card`
        rule doesn't reach them) ---------------------------------------- */
.app .dash-aside > .dash-chip { margin-top: 12px; }
.app .dash-aside > .dash-chip + .dash-chip { margin-top: 8px; }

/* =================== 1. Login streak — hero card =================== */
/* Deliberately a fixed warm brand-brown (not the theme --accent token) so the
   cream text always pops in both light and dark themes — this card is the
   page's one "feel good" moment and should read identically either way. */
.app .widget.streak-hero {
    background: linear-gradient(135deg, #b8680d 0%, #8a4d0a 100%);
    border: none;
    color: #fbf3e4;
    padding: 14px 16px 15px;
    border-radius: 6px;
}
.app .widget.streak-hero.clickable:hover {
    background: linear-gradient(135deg, #c2710f 0%, #95540b 100%);
}
.app .widget.streak-hero:focus-visible {
    outline: 2px solid #fbf3e4; outline-offset: 2px;
}

.app .streak-hero-top {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 8px;
}
.app .streak-hero-label {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(251, 243, 228, 0.75);
}
.app .streak-hero-buff {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px;
    color: #fbf3e4; background: rgba(255, 255, 255, 0.16);
    padding: 2px 8px; border-radius: 99px; white-space: nowrap;
}

.app .streak-hero-day { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.app .streak-hero-num {
    font-family: var(--font-serif); font-weight: 600; font-size: 30px;
    letter-spacing: -0.02em; color: #fff; line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.app .streak-hero-saved { font-size: 12px; color: rgba(251, 243, 228, 0.85); }

.app .streak-hero-dots {
    display: flex; align-items: center; gap: 6px; margin: 10px 0 6px;
    flex-wrap: wrap;
}
/* Base dot = the "empty" (not-yet-earned) state. NOTE: explicit padding/flex/
   box-sizing here are load-bearing — the global `.app .empty` rule (v5.css)
   otherwise injects 48px padding and balloons a bare .dot into an oval. */
.app .streak-hero-dots .dot {
    width: 8px; height: 8px; min-width: 8px; padding: 0; flex: none;
    box-sizing: border-box; border-radius: 50%;
    background: rgba(251, 243, 228, 0.25);
}
.app .streak-hero-dots .dot.is-filled { background: #fbf3e4; }
.app .streak-hero-dots .dot.is-today  {
    background: #fff; box-shadow: 0 0 0 2px rgba(251, 243, 228, 0.45);
}
.app .streak-hero-dots-lbl {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px;
    color: rgba(251, 243, 228, 0.7); margin-left: 4px;
}

.app .streak-hero-next {
    font-size: 12px; line-height: 1.4; color: rgba(251, 243, 228, 0.85);
    margin-top: 2px;
}
.app .streak-hero-next strong { color: #fff; font-weight: 600; }

/* ---- Streak insurance: per-tier palette (Direction A) + coverage states ----
   Palette is driven by the SELECTED tier so a lapsed card still shows the tier
   you're restoring (desaturated), not Free. Free = teal, Bronze = copper,
   Silver = steel, Gold = the original warm amber. Cream text (#fbf3e4) keeps
   enough contrast on all four. */
.app .widget.streak-hero--free   { background: linear-gradient(135deg, #1c7d70 0%, #11534a 100%); }
.app .widget.streak-hero--bronze { background: linear-gradient(135deg, #a9591f 0%, #783c12 100%); }
.app .widget.streak-hero--silver { background: linear-gradient(135deg, #5a6b7a 0%, #3a4654 100%);
    box-shadow: 0 0 18px -8px rgba(205, 217, 230, 0.5); }
.app .widget.streak-hero--gold   { background: linear-gradient(135deg, #b8680d 0%, #8a4d0a 100%);
    box-shadow: 0 0 22px -7px rgba(255, 200, 90, 0.55); }
.app .widget.streak-hero--free.clickable:hover   { background: linear-gradient(135deg, #1f8a7c 0%, #135a50 100%); }
.app .widget.streak-hero--bronze.clickable:hover { background: linear-gradient(135deg, #b66322 0%, #834314 100%); }
.app .widget.streak-hero--silver.clickable:hover { background: linear-gradient(135deg, #647585 0%, #424f5e 100%); }
.app .widget.streak-hero--gold.clickable:hover   { background: linear-gradient(135deg, #c2710f 0%, #95540b 100%); }

/* Tier chip — metallic, by SELECTED tier, stays full-colour even when lapsed. */
.app .streak-hero-top-right { display: inline-flex; align-items: center; gap: 6px; }

/* Explicit "this opens something" hint — the card is a button but its
   cursor/hover alone were too subtle to read as one. */
.app .streak-hero-more {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px;
    text-transform: uppercase; white-space: nowrap;
    color: rgba(251, 243, 228, 0.6);
}
.app .widget.streak-hero.clickable:hover .streak-hero-more { color: #fff; }
.app .streak-hero-tier {
    font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; padding: 2px 7px; border-radius: 5px;
    color: #241a0c; white-space: nowrap;
}
.app .streak-hero-tier.t1 { background: linear-gradient(135deg, #eaa06a, #a85f30); }
.app .streak-hero-tier.t2 { background: linear-gradient(135deg, #eef3f8, #a9b8c8); color: #2a3038; }
.app .streak-hero-tier.t3 { background: linear-gradient(135deg, #ffe28e, #d4a03d); }

/* Coverage line. */
.app .streak-hero-cover { font-size: 12px; line-height: 1.4; margin-top: 6px; color: rgba(251, 243, 228, 0.85); }
.app .streak-hero-cover .cover-cta { font-weight: 600; color: #fff; }
.app .streak-hero-cover .cover-warn { color: #ffe1d6; }
.app .streak-hero-cover .cover-warn strong { color: #fff; }

/* Lapsing: still covered, premium overdue — pulse to prompt a settle. */
.app .widget.streak-hero.is-lapsing { animation: streakLapsePulse 2.2s ease-in-out infinite; }
@keyframes streakLapsePulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255, 200, 90, 0.5); }
    50%      { box-shadow: 0 0 18px -2px rgba(255, 200, 90, 0.6); }
}
/* Lapsed: coverage suspended — desaturate the tier's OWN palette in place
   (background only, so the tier chip stays full-colour) + a coral alert ring.
   Free never lapses, so it needs no desaturated variant. */
.app .widget.streak-hero.is-lapsed {
    box-shadow: inset 0 0 0 1px rgba(232, 120, 90, 0.65), 0 0 20px -9px rgba(232, 120, 90, 0.5);
}
.app .widget.streak-hero--bronze.is-lapsed { background: linear-gradient(135deg, #5a4636 0%, #3a2c20 100%); }
.app .widget.streak-hero--silver.is-lapsed { background: linear-gradient(135deg, #444c54 0%, #2c333a 100%); }
.app .widget.streak-hero--gold.is-lapsed   { background: linear-gradient(135deg, #6a5536 0%, #463922 100%); }

/* ---- Streak insurance dialog selector ---- */
.app .streak-ins-alert {
    font-size: 12px; line-height: 1.4; padding: 8px 10px; border-radius: 6px; margin: 4px 0 10px;
}
.app .streak-ins-alert.warn { background: rgba(255, 200, 90, 0.14); border: 1px solid rgba(255, 200, 90, 0.4); }
.app .streak-ins-alert.err  { background: rgba(232, 120, 90, 0.16); border: 1px solid rgba(232, 120, 90, 0.5); }
.app .streak-ins-tiers { display: flex; flex-direction: column; gap: 6px; }
.app .streak-ins-opt {
    display: flex; align-items: baseline; gap: 8px; cursor: pointer;
    padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.14);
}
.app .streak-ins-opt.selected { border-color: #d4a03d; background: rgba(212, 160, 61, 0.10); }
.app .streak-ins-opt input { margin: 0; }
.app .streak-ins-opt-name { font-weight: 600; min-width: 58px; }
.app .streak-ins-opt-meta { font-size: 12px; color: rgba(232, 230, 225, 0.6); }
.app .streak-ins-help {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; margin-left: 6px; border-radius: 50%;
    font-size: 10px; font-weight: 700; line-height: 1; cursor: help;
    background: rgba(255, 255, 255, 0.12); color: rgba(232, 230, 225, 0.85);
    vertical-align: middle; text-transform: none; letter-spacing: 0;
}
.app .streak-ins-help:hover, .app .streak-ins-help:focus { background: rgba(255, 255, 255, 0.2); outline: none; }
.app .streak-ins-basis { margin: 10px 0 2px; line-height: 1.45; }
.app .streak-ins-basis strong { color: #e8e6e1; font-weight: 600; }
.app .streak-ins-billing { margin-top: 10px; }
.app .streak-ins-select {
    width: 100%; padding: 7px 9px; margin: 4px 0; border-radius: 6px;
    background: #15181a; color: #e8e6e1; border: 1px solid rgba(255, 255, 255, 0.16);
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c7ccd1' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.app .streak-ins-select option { background: #15181a; color: #e8e6e1; }
.app .streak-ins-select:focus { outline: none; border-color: #d4a03d; }
.app .streak-ins-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.app .streak-ins-status { font-size: 12px; }
.app .streak-ins-status.ok  { color: #2e7d32; }
.app .streak-ins-status.err { color: #c0392b; }

/* =================== 3. Do next — tags + "more" =================== */
/* Right-aligned action label (FIX / REVIEW / PAY), tinted by row severity. */
.app #dashDoNextList .do-next-tag {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--muted);
    flex-shrink: 0; align-self: center; margin-left: 4px;
}
.app #dashDoNextList .w-item.sev-error   .do-next-tag { color: var(--neg); }
.app #dashDoNextList .w-item.sev-warning .do-next-tag { color: var(--accent); }

/* The trailing "+N more types" row is a plain button styled like a w-item. */
.app #dashDoNextList .do-next-more {
    width: 100%; background: none; border: none; border-top: 1px solid var(--rule);
    font: inherit; text-align: left; cursor: pointer; color: var(--muted);
}
.app #dashDoNextList .do-next-more:hover { background: var(--panel-2); }
.app #dashDoNextList .do-next-more .w-item-title { color: var(--muted); }

/* Make the Do-next title sit on a single line where possible (these are short
   imperatives, not 2-line notification bodies). */
.app #dashDoNextList .w-item-title { -webkit-line-clamp: 1; line-clamp: 1; }

/* =================== 4. Collapsible chips =================== */
.app .dash-chip {
    border: 1px solid var(--rule); border-radius: 6px;
    background: var(--panel); overflow: hidden;
}
.app .dash-chip > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px; font-size: 12.5px; color: var(--text-2);
    user-select: none;
}
.app .dash-chip > summary::-webkit-details-marker { display: none; }
.app .dash-chip > summary:hover { background: var(--panel-2); }
.app .dash-chip-title { font-weight: 500; color: var(--text); }
.app .dash-chip-count {
    display: inline-block; min-width: 16px; padding: 0 5px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    line-height: 16px; text-align: center;
    color: var(--bg); background: var(--muted); border-radius: 99px;
}
.app .dash-chip-chev {
    margin-left: auto; font-family: var(--font-mono); color: var(--muted);
    transition: transform 0.15s ease;
}
.app .dash-chip[open] > summary { border-bottom: 1px solid var(--rule); }
.app .dash-chip[open] > summary .dash-chip-chev { transform: rotate(90deg); }

/* The chip body reuses .w-list / .w-item from dashboard.css verbatim. */
.app .dash-chip-body .w-list .w-item:last-child { border-bottom: none; }

/* =================== 5. History dialog — stream pills + lifecycle ========= */
.app .dash-hist-pills {
    display: flex; gap: 6px; padding: 10px 16px 0;
}
.app .dash-hist-pill {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.5px;
    text-transform: uppercase; cursor: pointer;
    padding: 4px 10px; border-radius: 99px;
    color: var(--muted); background: transparent; border: 1px solid var(--rule);
}
.app .dash-hist-pill:hover { color: var(--text); border-color: var(--rule-strong); }
.app .dash-hist-pill.active {
    color: var(--accent); border-color: var(--accent); background: var(--accent-bg);
}
/* Condition lifecycle in history: open (still true) vs resolved (+ when). */
.app #dashNotifHistoryList .w-item-life {
    display: block; font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: 0.5px; text-transform: uppercase; margin-top: 2px;
    text-align: right;
}
.app #dashNotifHistoryList .w-item-life.open     { color: var(--accent); }
.app #dashNotifHistoryList .w-item-life.resolved { color: var(--pos); }

@media (max-width: 900px) {
    .app .widget.streak-hero { padding: 12px 14px 13px; }
    .app .streak-hero-num { font-size: 26px; }
}