/* Reference-derived tokens extend the existing warm/dark world. */
[data-streak-panel], .streak-reward {
  --reward-gold: #ffc435; --reward-teal: #60bcad; --reward-purple: #ac8be8;
  --reward-edge: rgba(213, 194, 156, .24); --reward-surface: #0b1115;
  color: #f5f2ea;
}
.streak-navigation { display:flex; gap:20px; margin:0 0 22px; border-bottom:1px solid #73634844; }
.streak-navigation button { background:none; border:0; border-bottom:2px solid transparent; border-radius:0; padding:12px 4px; color:inherit; min-height:44px; }
.streak-navigation button[aria-pressed="true"] { color:#ffc435; border-bottom-color:#ffc435; }
[data-streak-panel] { padding:22px; border:1px solid var(--reward-edge); border-radius:20px; background:radial-gradient(ellipse at 0 0,#18373130,transparent 55%),linear-gradient(145deg,#10111b,#030a0f 65%); box-shadow:inset 0 1px #ffffff08,0 14px 35px #0004; }
.streak-heading h2 { font-size:1.3rem; margin:0 0 8px; }
.streak-heading p,.streak-footnote { color:#c0bbb0; font-size:.85rem; line-height:1.6; }
.streak-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:16px; margin-top:22px; }
.streak-group { padding:14px 10px; background:linear-gradient(145deg,#17181788,#060c10dd); border:1px solid var(--reward-edge); border-radius:15px; min-width:0; }
.streak-group h3 { color:var(--reward-gold); font-size:.9rem; font-weight:600; margin:0 0 12px; }
.streak-row { display:flex; align-items:center; gap:9px; padding:7px 6px; border-bottom:1px solid #ffffff0a; background:linear-gradient(100deg,#ffffff04,transparent); }
.streak-week-details summary { cursor:pointer; min-height:44px; list-style:none; }
.streak-week-details summary::-webkit-details-marker { display:none; }
.streak-week-details summary::after { content:"⌄"; color:#b0a995; }
.streak-week-details[open] summary::after { content:"⌃"; }
.streak-icon { width:25px; height:29px; object-fit:contain; border-radius:7px; mix-blend-mode:screen; flex-shrink:0; }
.streak-name { flex:1; min-width:0; overflow-wrap:anywhere; font-size:.88rem; }
.streak-value { color:var(--reward-gold); font-size:.82rem; font-weight:500; text-align:right; max-width:100px; }
.streak-weeks { display:flex; gap:7px; padding:10px 4px 14px; flex-wrap:wrap; }
.streak-weeks span { display:flex; align-items:center; justify-content:center; min-width:32px; min-height:32px; padding:3px; border:1px solid #727879; border-radius:50%; font-size:.62rem; color:#bbb; }
.streak-weeks .qualified { background:linear-gradient(140deg,#469e91,#205c57); border-color:#8fcfc1; color:white; }
.streak-weeks:nth-of-type(4n) .qualified { background:linear-gradient(140deg,#7754b7,#463169); border-color:#ae8bdc; }
.streak-protection { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:16px; }
.streak-card { padding:20px; border:1px solid rgba(231,181,94,.34); border-radius:16px; text-align:center; background:radial-gradient(ellipse at top,rgba(218,161,65,.16),transparent 58%),#0d0c0a; }
.streak-card h3 { margin:8px 0; font-size:1rem; }
.streak-card p { font-size:.88rem; line-height:1.55; }
.streak-protection-icon { width:55px; height:55px; object-fit:contain; mix-blend-mode:screen; }
.streak-repair .streak-protection-icon { filter:sepia(1) saturate(2) hue-rotate(350deg) brightness(1.12); }
.streak-rest-badge { flex-shrink:0; padding:4px 7px; border:1px solid rgba(236,190,107,.28); border-radius:999px; color:#efc36f; background:rgba(193,132,39,.12); font-size:.7rem; font-weight:700; white-space:nowrap; }
.streak-repair-button { background:linear-gradient(180deg,#efc568,#b87928); border:1px solid #f4d28b; color:#21150d; min-height:44px; padding:10px 24px; border-radius:11px; width:100%; font-weight:750; }
.streak-repairs-left { color:#c2c2b5; }
.streak-repair-dialog { width:min(430px,calc(100vw - 32px)); max-height:min(620px,calc(100vh - 32px)); padding:20px; color:#f5f2ea; border:1px solid rgba(232,183,98,.4); border-radius:16px; background:radial-gradient(ellipse at top,rgba(218,161,65,.16),transparent 55%),#0d0c0a; box-shadow:0 22px 60px #000b; }
.streak-repair-dialog::backdrop { background:#020507b8; backdrop-filter:blur(3px); }
.streak-repair-dialog h3 { margin:0 0 8px; }
.streak-repair-intro,.streak-repair-selection { color:#c2c2b5; font-size:.86rem; }
.streak-repair-choices { border:0; padding:0; margin:16px 0; }
.streak-repair-choice { display:flex; align-items:center; gap:12px; min-height:48px; padding:8px 10px; border-bottom:1px solid #ffffff12; border-radius:9px; }
.streak-repair-choice:has(input:checked) { background:rgba(218,161,65,.13); }
.streak-repair-choice input { width:20px; height:20px; accent-color:#dba548; }
.streak-repair-choice input:disabled + span { opacity:.46; }
.streak-repair-submit,.streak-repair-cancel { width:100%; min-height:44px; border-radius:10px; }
.streak-repair-submit { background:linear-gradient(180deg,#efc568,#b87928); border:1px solid #f4d28b; color:#21150d; font-weight:750; }
.streak-repair-submit:disabled { opacity:.45; }
.streak-repair-cancel { margin-top:8px; border:1px solid #a8b7b544; background:#071116; color:#eee; }
.streak-repair-error { min-height:1.3em; color:#efc987; font-size:.82rem; }
.streak-not-now { display:block; width:100%; min-height:44px; margin-top:10px; border:1px solid #a8b7b544; border-radius:10px; background:#071116; color:#eee; }
.streak-routine-badge { flex-shrink:0; padding:4px 6px; border-radius:8px; font-size:.75rem; color:#ffd06b; background:#bf862817; }
[data-today-streak-protection] { --reward-edge:rgba(213,194,156,.24); color:#f5f2ea; }
.streak-reward { position:fixed; z-index:80; bottom:calc(88px + env(safe-area-inset-bottom)); right:24px; width:min(290px,calc(100vw - 40px)); padding:16px; text-align:center; border:1px solid #daab3b; border-radius:16px; background:radial-gradient(ellipse at center,#62431133,transparent 70%),#070c10; box-shadow:0 0 24px #d4922425,0 15px 45px #0009; animation:streak-arrive .3s ease-out; }
.streak-reward-art { display:block; width:100px; height:68px; object-fit:contain; margin:0 auto 6px; mix-blend-mode:screen; }
.streak-reward.is-milestone .streak-reward-art { width:165px; height:82px; }
.streak-reward:not(.is-milestone) { display:grid; grid-template-columns:44px 1fr 64px; align-items:center; gap:8px; width:min(340px,calc(100vw - 40px)); padding:10px; text-align:left; }
.streak-reward:not(.is-milestone) .streak-reward-art { width:44px; height:44px; margin:0; }
.streak-reward:not(.is-milestone) .streak-dismiss { margin:0; padding:6px; font-size:.7rem; background:transparent; color:#dfc58d; border-color:#a58c4b55; }
.streak-reward strong { display:block; font-size:1rem; }
.streak-reward p { font-size:.86rem; margin:8px 0; }
.streak-dismiss { margin-top:10px; min-height:44px; padding:9px 24px; border-radius:9px; background:linear-gradient(120deg,#dfa20d,#ffcc4e); border:1px solid #ffd16c; color:#171106; width:100%; }
.streak-empty { font-size:.85rem; color:#b9b5ad; }
.streak-notification-preference { display:flex; align-items:center; gap:12px; min-height:44px; margin-top:16px; font-size:.85rem; color:#c6c0b3; }
.streak-notification-preference input { width:20px; height:20px; accent-color:#eab43e; }
.streak-navigation button:focus-visible,.streak-repair-button:focus-visible,.streak-repair-submit:focus-visible,.streak-repair-cancel:focus-visible,.streak-repair-choice input:focus-visible,.streak-dismiss:focus-visible { outline:3px solid #ffe28e; outline-offset:3px; }
[data-streak-panel][hidden], [data-streak-reward][hidden], [data-streak-navigation][hidden], [data-today-streak-protection][hidden], .streak-card[hidden] { display:none !important; }
.insights-story-header[hidden], .insight-grid[hidden] { display:none !important; }
@keyframes streak-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:760px) { .streak-groups { grid-template-columns:1fr; gap:14px; } [data-streak-panel] { padding:16px; } .streak-value { max-width:140px; } .streak-reward { right:20px; } }
@media(prefers-reduced-motion:reduce) { .streak-reward { animation:none; } }

/* Insights → Streaks coherence reconstruction. */
.insights-streak-header {
  display: grid;
  min-height: 5.4rem;
  align-content: end;
  padding: 0 10rem 0.8rem 0;
}
.insights-streak-header[hidden] { display: none !important; }
.insights-streak-header .eyebrow { margin: 0 0 .35rem; color: #d7a657; }
.insights-streak-header h1 {
  max-width: 16rem;
  margin: 0;
  color: #f5efe5;
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(2rem, 7vw, 3.1rem);
  font-weight: 500;
  line-height: .96;
}
.streak-navigation {
  display: grid;
  width: min(100%, 42rem);
  grid-template-columns: minmax(0, 1.45fr) minmax(4.7rem, .72fr) minmax(5.5rem, .83fr);
  gap: 0;
  margin: 0 0 1.2rem;
  border: 1px solid rgba(219, 177, 107, .22);
  border-radius: 999px;
  padding: .22rem;
  background: rgba(5, 11, 15, .7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.streak-navigation button {
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: .55rem .5rem;
  color: #bdb4a8;
  font-size: clamp(.72rem, 2.9vw, .88rem);
  font-weight: 650;
  line-height: 1.15;
  white-space: normal;
}
.streak-navigation button[aria-pressed="true"] {
  border: 1px solid rgba(239, 188, 92, .54);
  background: linear-gradient(145deg, rgba(116, 76, 35, .78), rgba(43, 29, 20, .9));
  color: #f3c875;
  box-shadow: inset 0 1px 0 rgba(255,235,192,.14), 0 0 16px rgba(222,158,58,.1);
}
[data-streak-panel] {
  width: min(100%, 70rem);
  border: 0;
  border-radius: 0;
  padding: 0 0 2rem;
  background: transparent;
  box-shadow: none;
}
.streak-heading { margin: .2rem 0 1.05rem; }
.streak-heading h2 {
  margin: 0;
  color: #f6efe5;
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 500;
}
.streak-heading p { max-width: 37rem; margin: .25rem 0 0; color: #b8aea2; line-height: 1.45; }
.streak-overview-section,
.streak-detail-screen {
  position: relative;
  overflow: hidden;
  margin: 0 0 1rem;
  border: 1px solid rgba(210, 164, 91, .2);
  border-radius: 1.18rem;
  padding: clamp(1rem, 3.5vw, 1.45rem);
  background:
    radial-gradient(circle at 102% -8%, rgba(52, 112, 140, .105), transparent 32%),
    radial-gradient(circle at 0 102%, rgba(216, 145, 45, .07), transparent 31%),
    linear-gradient(145deg, rgba(17, 22, 28, .97), rgba(4, 10, 14, .985));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 34px rgba(0,0,0,.25);
}
.streak-overview-section::before,
.streak-detail-screen::before {
  position: absolute;
  top: 0;
  left: 1rem;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, rgba(239,183,89,.65), transparent);
  content: "";
}
.streak-section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: 1.2rem;
}
.streak-section-heading h3,
.streak-detail-screen h2 {
  margin: 0;
  color: #f6f0e8;
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(1.45rem, 5.4vw, 2rem);
  font-weight: 500;
  line-height: 1.05;
}
.streak-section-heading p,
.streak-detail-subtitle { margin: .28rem 0 0; color: #aaa39b; font-size: .85rem; line-height: 1.4; }
.streak-see-all,
.streak-detail-back {
  flex: 0 0 auto;
  min-height: 44px;
  border: 1px solid rgba(224, 169, 75, .36);
  border-radius: 999px;
  padding: .55rem .85rem;
  background: rgba(25, 18, 14, .62);
  color: #efc36f;
  font-weight: 700;
}
.streak-detail-back { margin: 0 0 .75rem; border-color: transparent; padding-inline: 0; background: transparent; }
.streak-current-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.streak-current-tile {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 9.75rem;
  align-content: start;
  gap: .65rem;
  border: 1px solid color-mix(in srgb, var(--routine-color) 32%, transparent);
  border-radius: .95rem;
  padding: .9rem;
  background:
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--routine-color) 12%, transparent), transparent 48%),
    rgba(6, 10, 13, .72);
  color: #f2ece4;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.streak-current-tile.is-active {
  background:
    radial-gradient(circle at 70% 60%, rgba(238, 126, 37, .17), transparent 35%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--routine-color) 16%, transparent), transparent 50%),
    rgba(12, 11, 10, .85);
  box-shadow: inset 0 1px 0 rgba(255,242,217,.055), 0 0 18px color-mix(in srgb, var(--routine-color) 10%, transparent);
}
.streak-current-identity { display: grid; grid-template-columns: 2.15rem minmax(0,1fr); gap: .55rem; align-items: center; }
.streak-routine-mark {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--routine-color) 58%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--routine-color) 11%, #080c10);
  color: var(--routine-color);
  font-family: Newsreader, Georgia, serif;
  font-size: 1.08rem;
  font-weight: 600;
  box-shadow: 0 0 13px color-mix(in srgb, var(--routine-color) 12%, transparent);
}
.streak-current-name { display: -webkit-box; overflow: hidden; min-width: 0; font-size: .88rem; font-weight: 700; line-height: 1.12; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.streak-current-status { display: flex; align-items: center; justify-content: center; gap: .25rem; min-height: 3rem; margin-top: .1rem; }
.streak-current-flame { width: 2.55rem; height: 2.9rem; object-fit: contain; mix-blend-mode: screen; filter: saturate(1.18) drop-shadow(0 0 9px rgba(255,148,51,.48)); }
.streak-current-flame.is-unlit { opacity: .3; filter: grayscale(1) brightness(1.8); }
.streak-current-value { color: #ffd06d; font-family: Newsreader, Georgia, serif; font-size: 1.3rem; font-weight: 600; }
.streak-current-empty { color: #b4ada5; font-size: .79rem; text-align: center; }
.streak-current-support { margin-top: .05rem; color: #dcb66d; font-size: .77rem; font-weight: 650; line-height: 1.25; text-align: center; }
.streak-rhythm-chart {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(184, 170, 151, .15);
  border-radius: .9rem;
  padding: .45rem .2rem .15rem;
  background: linear-gradient(145deg, rgba(8,15,20,.9), rgba(5,10,14,.96));
}
.streak-rhythm-chart svg { display: block; width: 100%; height: auto; min-height: 11rem; }
.streak-rhythm-chart .sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.streak-chart-gridline { stroke: rgba(190, 195, 196, .16); stroke-width: 1; stroke-dasharray: 5 6; }
.streak-chart-weekline { stroke: rgba(190, 195, 196, .09); stroke-width: 1; stroke-dasharray: 4 7; }
.streak-chart-y-label,
.streak-chart-week-label,
.streak-chart-date-label { fill: #aaaeb0; font-family: Inter, sans-serif; font-size: 16px; }
.streak-chart-week-label { fill: #d8d9d7; font-weight: 700; }
.streak-chart-date-label { font-size: 13px; }
.streak-chart-series { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px currentColor); }
.streak-chart-point { stroke: rgba(255,255,255,.28); stroke-width: 1.5; filter: drop-shadow(0 0 5px currentColor); }
.streak-rhythm-legend { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-top: .75rem; }
.streak-rhythm-legend span { display: inline-flex; align-items: center; gap: .4rem; color: #d5d0c9; font-size: .76rem; }
.streak-rhythm-legend span::before { width: .65rem; height: .65rem; flex: 0 0 auto; border-radius: 50%; background: var(--routine-color); box-shadow: 0 0 8px color-mix(in srgb, var(--routine-color) 42%, transparent); content: ""; }
.streak-best-summary,
.streak-record-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; }
.streak-record-card {
  display: grid;
  min-width: 0;
  min-height: 7.8rem;
  align-content: center;
  gap: .22rem;
  border: 1px solid rgba(221, 168, 78, .28);
  border-radius: .95rem;
  padding: .8rem;
  background: radial-gradient(circle at 22% 18%, rgba(240,174,69,.16), transparent 38%), rgba(18,14,12,.65);
}
.streak-record-rhythm { border-color: rgba(169,107,255,.3); background: radial-gradient(circle at 24% 18%, rgba(169,107,255,.15), transparent 40%), rgba(10,10,18,.72); }
.streak-record-icon { width: 2.1rem; height: 2.1rem; object-fit: contain; mix-blend-mode: screen; }
.streak-record-value { color: #f7eee3; font-family: Newsreader, Georgia, serif; font-size: 1.35rem; }
.streak-record-card > span { color: #bcb4aa; font-size: .78rem; }
.streak-record-card small { margin-top: .25rem; color: #8f8982; font-size: .67rem; }
.streak-detail-screen { min-height: 26rem; }
.streak-detail-screen > h2 { font-size: clamp(2rem, 8vw, 3rem); }
.streak-range-control,
.streak-best-filters {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0,1fr);
  margin: 1rem 0;
  border: 1px solid rgba(190,171,139,.2);
  border-radius: 999px;
  padding: .2rem;
  background: rgba(3,9,13,.62);
}
.streak-range-control button,
.streak-best-filters button { min-height: 42px; border: 0; border-radius: 999px; padding: .45rem; background: transparent; color: #aaa49d; font-size: .78rem; }
.streak-range-control button[aria-pressed="true"],
.streak-best-filters button[aria-pressed="true"] { border: 1px solid rgba(238,183,90,.55); background: linear-gradient(145deg,#6d4927,#332217); color: #f4ce80; box-shadow: 0 0 15px rgba(224,155,56,.12); }
.streak-rhythm-detail .streak-section-heading { margin: 1.25rem 0 .65rem; }
.streak-routine-detail-list { display: grid; gap: .55rem; }
.streak-routine-detail-row {
  display: grid;
  min-height: 3.6rem;
  grid-template-columns: auto .7rem minmax(0,1fr) auto;
  gap: .65rem;
  align-items: center;
  border: 1px solid rgba(190,176,153,.16);
  border-radius: .85rem;
  padding: .55rem .75rem;
  background: rgba(6,12,16,.72);
  color: #eee9e2;
  text-align: left;
}
.streak-routine-detail-row[aria-pressed="true"] { border-color: color-mix(in srgb, var(--routine-color) 60%, transparent); background: color-mix(in srgb, var(--routine-color) 9%, #071015); }
.streak-routine-color { width: .7rem; height: .7rem; border-radius: 50%; background: var(--routine-color); box-shadow: 0 0 8px color-mix(in srgb, var(--routine-color) 45%, transparent); }
.streak-record-book { display: grid; gap: 1rem; margin-top: 1rem; }
.streak-record-routine > header { display: flex; align-items: center; gap: .65rem; margin-bottom: .55rem; }
.streak-record-routine h3 { margin: 0; color: #eee8df; font-size: 1rem; }
.streak-protection { margin-top: 1rem; }
.streak-empty { grid-column: 1 / -1; margin: .5rem 0; }
.streak-see-all:focus-visible,
.streak-detail-back:focus-visible,
.streak-current-tile:focus-visible,
.streak-range-control button:focus-visible,
.streak-best-filters button:focus-visible,
.streak-routine-detail-row:focus-visible { outline: 3px solid #ffe28e; outline-offset: 3px; }

@media (min-width: 760px) {
  .streak-current-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .streak-current-tile { min-height: 10rem; }
}
@media (max-width: 420px) {
  .streak-navigation { width: 100%; }
  .streak-navigation button { padding-inline: .3rem; }
  .streak-current-grid { gap: .7rem; }
  .streak-current-tile { min-height: 9.35rem; gap: .55rem; padding: .75rem; }
  .streak-current-identity { grid-template-columns: 1.9rem minmax(0,1fr); gap: .42rem; }
  .streak-routine-mark { width: 1.9rem; height: 1.9rem; }
  .streak-chart-y-label { font-size: 14px; }
  .streak-best-filters button { font-size: .68rem; }
}
@media (max-width: 340px) {
  .streak-navigation { grid-template-columns: minmax(0,1.35fr) minmax(4rem,.7fr) minmax(4.8rem,.8fr); }
  .streak-navigation button { font-size: .67rem; }
  .streak-current-identity { grid-template-columns: 1.65rem minmax(0,1fr); gap: .3rem; }
  .streak-routine-mark { width: 1.65rem; height: 1.65rem; font-size: .9rem; }
  .streak-current-name { font-size: .74rem; }
  .streak-current-value { font-size: 1.15rem; }
  .streak-current-grid { gap: .55rem; }
  .streak-current-tile { min-height: 9.1rem; padding: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .streak-chart-series,
  .streak-chart-point { transition: none; animation: none; }
}

/* Mobile Insights: align the tabs with the content and let streak tiles stand alone. */
@media (max-width: 620px) {
  /* One screen-content grid in both tab states; no inherited tab-only inset. */
  .insights-screen .streak-navigation,
  .insights-screen [data-streak-panel] {
    width: 100%;
    min-width: 0;
    margin-inline: 0;
  }
  .insights-screen .streak-navigation {
    /* Match Today’s mobile .dashboard-home section rhythm. */
    margin-bottom: 1.35rem;
  }
  .insights-screen .insight-grid { padding-inline: 0; }
  .insights-screen .streak-current-section {
    margin-bottom: 1.35rem;
    overflow: visible;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .insights-screen .streak-current-section::before { display: none; }
}