/* Insights tab (js/insightsView.js). Mobile first; colours come from the time-of-day tokens in
   app.css (html[data-time-theme]), so morning / evening / night follow the rest of DHUT: the top
   block uses the hero tokens (navy at night), everything else sits on light surfaces. */
#tab-insights { --ins-radius: 20px; --ins-amber: #E3A21A; --ins-amber-soft: #FFF4DC; --ins-amber-ink: #7A5200; }
#tab-insights .ins-muted { color: var(--text-secondary); }
#tab-insights .ins-small { font-size: 12.5px; line-height: 1.45; }
#tab-insights h3 { font-family: var(--font-display); font-size: 17px; margin: 0 0 8px; color: var(--text-primary); }
.ins-h4 { font-size: 13.5px; margin: 14px 0 6px; color: var(--text-primary); }
.ins-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- top: title (+ the mascot's slot), period, range, takeaway, care line ---------- */
.ins-top { border-radius: var(--ins-radius); padding: 12px 14px 14px; margin-bottom: 10px; color: var(--hero-text, var(--text-primary));
  background: linear-gradient(150deg, var(--hero-top, var(--accent-light)) 0%, var(--hero-bottom, var(--surface-soft)) 100%); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
/* Title and period on the left; the right end keeps a 52 px square for the one mascot
   ([data-mascot-anchor="insights"], moved there by js/companion.js) — nothing sits under it. */
.ins-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-height: 52px; }
.ins-title { grid-column: 1; grid-row: 1; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.2; margin: 0; color: inherit; }
.ins-period { grid-column: 1; grid-row: 2; font-size: 12.5px; color: var(--hero-text-muted, var(--text-secondary)); line-height: 1.4; }
.ins-head > .mascot-slot { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center; min-width: 52px; min-height: 52px; }
.ins-range { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 10px 0; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-glass, rgba(255,255,255,.8)); box-shadow: inset 0 0 0 1px var(--line); }
.ins-range button { margin: 0; min-height: 40px; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); font-weight: 700; font-size: 14px; box-shadow: none; }
.ins-range button:hover { background: color-mix(in srgb, var(--accent-light) 70%, transparent); color: var(--text-primary); }
.ins-range button.active { background: var(--accent); color: var(--text-on-accent); box-shadow: 0 1px 2px rgba(35, 95, 70, 0.2); }
.ins-range button:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.ins-takeaway { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -0.005em; color: inherit; text-wrap: pretty; }
.ins-care { margin: 10px 0 0; padding: 8px 10px 8px 12px; border-radius: var(--radius-md); background: var(--lavender-light); color: var(--text-primary); font-size: 13.5px; line-height: 1.45; box-shadow: inset 3px 0 0 var(--lavender); }
.ins-care .link-btn { color: var(--accent-strong); padding: 0 2px; }
.ins-history-note { margin: 10px 0 0 !important; }

/* ---------- trend rows ---------- */
.ins-trends-wrap { background: var(--surface); border-radius: var(--ins-radius); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); padding: 4px 6px 8px; margin-bottom: 10px; }
.ins-trends { list-style: none; margin: 0; padding: 0; }
.ins-trends li { border: 0; padding: 0; margin: 0; background: none; display: block; }
.ins-trends li + li { border-top: 1px solid var(--line); }
.ins-trend { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 12px; align-items: center; gap: 10px; width: 100%; margin: 0; min-height: 54px; padding: 6px 8px;
  border-radius: var(--radius-md); background: transparent; color: var(--text-primary); box-shadow: none; text-align: left; font-weight: 400; font-size: 14px; }
.ins-trend:hover { background: var(--surface-soft); color: var(--text-primary); transform: none; }
.ins-trend:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: -1px; }
.ins-trend-icon, .ins-acc-icon, .ins-step-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 10px; background: var(--surface-soft); color: var(--text-secondary); font-size: 16px; }
.ins-trend-icon { width: 32px; height: 32px; }
.ins-trend-icon svg, .ins-acc-icon svg, .ins-step-icon svg { width: 17px; height: 17px; display: block; }
/* Each area: its pastel tint and its ink (the same family as the Diary and Profile). */
.ins-ic-nutrition { background: var(--coral-light); color: var(--coral-ink); }
.ins-ic-movement { background: var(--yellow-light); color: var(--yellow-ink); }
.ins-ic-sleep { background: var(--lavender-light); color: var(--lavender-ink); }
.ins-ic-hydration { background: var(--sky-light); color: var(--sky-ink); }
.ins-ic-weight { background: var(--accent-light); color: var(--accent-strong); }
.ins-trend-main, .ins-trend-val { display: flex; flex-direction: column; min-width: 0; }
.ins-trend-val { align-items: flex-end; text-align: right; }
.ins-trend-label { font-weight: 800; font-size: 14.5px; line-height: 1.3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ins-trend-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.35; }
.ins-trend-num { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ins-trend-empty .ins-trend-num { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--text-secondary); }
/* A drawn chevron (2 px strokes, like the icons) */
.ins-trend-go { width: 7px; height: 7px; margin-left: 1px; border-top: 2px solid var(--text-secondary); border-right: 2px solid var(--text-secondary); border-radius: 1px; transform: rotate(45deg); font-size: 0; color: transparent; }
.ins-delta { font-size: 11.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.ins-delta.ins-muted { font-weight: 500; }
.ins-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--ins-amber-soft); color: var(--ins-amber-ink); font-size: 11px; font-weight: 800; line-height: 1.5; white-space: nowrap; }
.ins-source { margin: 4px 8px 0; font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); }
.ins-defs-link { display: inline-flex; align-items: center; margin: 2px 0 0; padding: 0 2px; font-size: 13px; font-weight: 700; }

/* ---------- next step ---------- */
.ins-section, .ins-detail { border-radius: var(--ins-radius); }
#ins-next { padding: 12px 14px 8px; margin-bottom: 10px; }
#tab-insights #ins-next h3 { margin-bottom: 0; font-size: 15px; }
.ins-step { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ins-step:last-of-type { border-bottom: 0; }
.ins-step-icon { width: 36px; height: 36px; border-radius: 11px; }
.ins-step-icon svg { width: 18px; height: 18px; }
.ins-step b { font-size: 14.5px; }
.ins-step .ins-small { color: var(--text-secondary); }
/* A care step keeps its soft lavender backing (it is never folded away). */
.ins-step.ins-care { margin: 6px 0; padding: 10px 10px 10px 12px; border-bottom: 0; border-radius: var(--radius-md); background: var(--lavender-light); box-shadow: inset 3px 0 0 var(--lavender); font-size: inherit; }
.ins-step.ins-care .ins-step-icon { background: var(--surface); color: var(--lavender-ink); }
.ins-step-btn { margin: 8px 0 0; width: auto; }
.ins-disclaimer { margin: 0 0 6px; }
.ins-more-steps { margin-top: 4px; }
#ins-next-more .ins-step:first-child { padding-top: 6px; }

/* ---------- folded sections: one grouped list (What changed · the five areas · calendar ·
   summary · How DHUT counts), each row an icon chip, a title and a one-line hint ---------- */
#tab-insights .ins-group-label { margin: 14px 4px 6px; font-family: var(--font-body); font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--page-text-muted, var(--text-secondary)); } /* on the page background (navy at night) */
.ins-fold, .ins-detail { padding: 0; margin-bottom: 8px; scroll-margin-top: 12px; }
.ins-fold > summary, .ins-acc { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; margin: 0; padding: 6px 12px 6px 10px; border-radius: var(--ins-radius);
  cursor: pointer; list-style: none; background: transparent; color: var(--text-primary); box-shadow: none; text-align: left; font-weight: 400; font-size: 14px; }
.ins-fold > summary::-webkit-details-marker { display: none; }
.ins-fold > summary::after, .ins-acc::after { content: ""; margin: -3px 4px 0 auto; flex: 0 0 auto; width: 7px; height: 7px; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); border-radius: 1px; transform: rotate(45deg); transition: transform 150ms ease; }
.ins-fold[open] > summary::after, .ins-acc[aria-expanded="true"]::after { transform: translateY(3px) rotate(-135deg); }
.ins-fold > summary:hover, .ins-acc:hover { background: var(--surface-soft); color: var(--text-primary); transform: none; }
.ins-fold > summary:focus-visible, .ins-acc:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: -2px; }
.ins-fold-title, .ins-acc-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1.3; color: var(--text-primary); }
.ins-hint { display: block; font-size: 12.5px; color: var(--text-secondary); line-height: 1.35; font-weight: 500; font-family: var(--font-body); }
.ins-acc-icon { width: 30px; height: 30px; }
.ins-acc-icon svg { width: 16px; height: 16px; }
.ins-acc-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
#tab-insights .ins-detail > h3 { margin: 0; font-size: inherit; }
.ins-fold[open] > summary, .ins-detail.ins-open .ins-acc { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ins-fold > :not(summary), .ins-panel { padding: 0 14px 14px; }
.ins-panel > div:first-child > :first-child { margin-top: 2px; }
/* The nine rows sit in one card, hairlines between them (the first / last round the corners). */
.ins-more { margin: 0 0 10px; }
.ins-more-list { background: var(--surface); border-radius: var(--ins-radius); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.ins-more-list > .ins-fold, .ins-more-list > .ins-detail { margin: 0; border-radius: 0; background: transparent; box-shadow: none; }
.ins-more-list > * + * { border-top: 1px solid var(--line); }
.ins-more-list > .ins-fold > summary, .ins-more-list > .ins-detail .ins-acc { border-radius: 0; }
.ins-more-list > :first-child, .ins-more-list > :first-child > summary { border-top-left-radius: var(--ins-radius); border-top-right-radius: var(--ins-radius); }
.ins-more-list > :last-child, .ins-more-list > :last-child:not([open]) > summary { border-bottom-left-radius: var(--ins-radius); border-bottom-right-radius: var(--ins-radius); }
/* An open row: a soft band behind its header (the list stays one card). */
.ins-more-list > .ins-fold[open] > summary, .ins-more-list > .ins-detail.ins-open .ins-acc { background: var(--surface-soft); }
.ins-more-list > .ins-detail.ins-open { box-shadow: none; }

/* ---------- section bodies ---------- */
.ins-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ins-list li { font-size: 14px; line-height: 1.45; display: flex; gap: 8px; border: 0; padding: 0; }
.ins-arrow { font-size: 10px; padding-top: 4px; color: var(--text-secondary); }
.ins-maybe li::before { content: "–"; color: var(--text-secondary); }
.ins-maybe li { color: var(--text-secondary); }
.ins-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0 0 4px; }
.ins-stats > div { background: var(--surface-soft); border-radius: var(--radius-md); padding: 8px 10px; display: flex; flex-direction: column; }
.ins-stats b { font-size: 16px; font-weight: 800; }
.ins-stats span { font-size: 11.5px; color: var(--text-secondary); line-height: 1.3; }
.ins-note { font-size: 12.5px; line-height: 1.45; background: var(--sky-light); color: var(--text-primary); border-radius: 12px; padding: 8px 10px; margin: 8px 0; }
.ins-care-note { font-size: 13px; line-height: 1.45; background: var(--lavender-light); border-radius: 12px; padding: 8px 10px; margin: 8px 0; }
.ins-empty { font-size: 13.5px; color: var(--text-secondary); background: var(--surface-soft); border: 1.5px dashed var(--line-strong); border-radius: 16px; padding: 14px; text-align: center; line-height: 1.5; }
.ins-empty button { margin: 8px auto 0; display: block; width: auto; }
.ins-flags { background: var(--ins-amber-soft); border-radius: var(--radius-md); padding: 10px 12px; margin: 10px 0 4px; font-size: 13px; color: var(--text-primary); }
.ins-flags ul { margin: 6px 0 4px; padding-left: 18px; }
.ins-flags li { margin: 3px 0; line-height: 1.45; }
.ins-flags .link-btn { padding: 0; min-height: 0; font-weight: 700; }
.ins-streak-main { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.ins-mini { margin-top: 10px; }
.ins-mini > summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--accent-strong); min-height: 44px; display: flex; align-items: center; }
.ins-mini .note { margin: 2px 0 6px; }

/* ---------- charts ---------- */
.ic-wrap { position: relative; }
.ic-chart { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.ic-axis { font-size: 9px; fill: var(--text-secondary); font-family: var(--font-body); }
.ic-unit { font-size: 8.5px; fill: var(--text-secondary); font-weight: 700; }
.ic-grid { stroke: color-mix(in srgb, var(--text-secondary) 16%, transparent); stroke-width: 1; }
.ic-goal { fill: none; stroke: var(--text-primary); stroke-opacity: .55; stroke-width: 1.4; stroke-dasharray: 4 3; }
.ic-goal-label { font-size: 9px; font-weight: 700; fill: var(--text-primary); fill-opacity: .75; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.ic-sofar { font-size: 8.5px; fill: var(--text-secondary); font-style: italic; }
.ic-none { fill: color-mix(in srgb, var(--text-secondary) 45%, transparent); }
.ic-zero { font-size: 8px; fill: var(--text-secondary); }
.ic-zero-ring { fill: var(--surface); stroke-width: 1.3; }
.ic-today { opacity: .5; }
.ic-flag { fill: var(--ins-amber); stroke: #fff; stroke-width: 1; }
.ic-hit { fill: transparent; cursor: pointer; }
.ic-hit.ic-on { fill: color-mix(in srgb, var(--text-primary) 7%, transparent); }
.ic-dot { stroke: #fff; stroke-width: 1.2; }
.ic-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 2px; font-size: 11.5px; color: var(--text-secondary); }
.ic-key span { display: inline-flex; align-items: center; gap: 5px; }
.ic-key i { display: inline-block; flex: 0 0 auto; }
.ic-key-none { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--text-secondary) 45%, transparent); }
.ic-key-zero { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--text-secondary); }
.ic-key-flag { width: 7px; height: 7px; border-radius: 50%; background: var(--ins-amber); }
.ic-key-goal { width: 14px; height: 0; border-top: 1.5px dashed var(--text-primary); opacity: .6; }
.ic-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); background: var(--text-primary); color: #fff; font-size: 12px; line-height: 1.35; padding: 6px 9px; border-radius: 10px;
  pointer-events: none; white-space: nowrap; max-width: 92vw; box-shadow: 0 6px 18px rgba(0,0,0,.18); z-index: 3; }
.ic-tip.ic-tip-left { transform: translate(-88%, -100%); }
.ic-tip.ic-tip-right { transform: translate(-12%, -100%); }
.ic-tip[hidden] { display: none; }
.ic-macro { display: grid; gap: 6px; }
.ic-macro-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-soft); }
.ic-macro-bar span { display: block; height: 100%; }
.ic-p { background: var(--coral); } .ic-c { background: var(--yellow); } .ic-f { background: var(--lavender); }
.ic-macro-row { display: grid; grid-template-columns: 12px 64px 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.ic-swatch { width: 12px; height: 12px; border-radius: 4px; }
.ic-muted { color: var(--text-secondary); font-weight: 500; }
.ic-small { font-size: 12px; }

/* ---------- calendar ---------- */
.ic-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 10px 0 6px; }
.ic-cal-title { font-weight: 800; font-size: 13px; margin-bottom: 4px; }
.ic-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ic-cal-h { font-size: 10.5px; text-align: center; color: var(--text-secondary); font-weight: 700; }
.ic-cal-day, .ic-cal-out, .ic-cal-pad { aspect-ratio: 1; min-height: 34px; }
.ic-cal-day { position: relative; margin: 0; padding: 0; width: 100%; border-radius: 10px; font-size: 13px; font-weight: 700; box-shadow: none; display: flex; align-items: center; justify-content: center; }
.ic-cal-out { display: flex; align-items: center; justify-content: center; font-size: 12px; color: color-mix(in srgb, var(--text-secondary) 45%, transparent); }
.ic-cal-food { background: color-mix(in srgb, var(--accent) 24%, white); color: var(--accent-strong); }
.ic-cal-other { background: var(--sky-light); color: var(--text-primary); }
.ic-cal-empty { background: transparent; color: var(--text-secondary); border: 1.5px dashed color-mix(in srgb, var(--text-secondary) 30%, transparent); }
.ic-cal-today { outline: 2px solid var(--accent); outline-offset: 1px; }
.ic-cal-flag { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--ins-amber); }
.ic-cal-day:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 1px; }
.ic-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--text-secondary); margin: 4px 0; }
.ic-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ic-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.ic-legend .ic-legend-flag { width: 7px; height: 7px; border-radius: 50%; background: var(--ins-amber); }

/* ---------- summary + definitions + day sheet ---------- */
.ins-summary-text { white-space: pre-wrap; font-family: var(--font-body); font-size: 13px; line-height: 1.5; background: var(--surface-soft); border-radius: 14px; padding: 10px 12px; margin: 10px 0 8px; max-height: 320px; overflow: auto; }
.ins-summary-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ins-summary-actions button { width: auto; margin: 0; }
.ins-defs { margin: 0; }
.ins-defs dt { font-weight: 800; font-size: 13.5px; margin-top: 8px; }
.ins-defs dd { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.ins-day-meals { margin: 8px 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.ins-day-meals li, .ins-flags li { display: list-item; border: 0; padding: 0; background: none; }
#ins-day-open { width: 100%; }

/* Touch: every control is a 44 px target (the inline day links in flag lists too). */
@media (pointer: coarse) {
  .ins-flags .link-btn, .ins-care .link-btn, .ins-defs-link { min-height: 44px; display: inline-flex; align-items: center; }
  .ins-range button { min-height: 44px; }
}
/* Narrow phones: the calendar borrows the card's side padding so each day stays a ~44 px target. */
@media (max-width: 400px) {
  .ic-cal { margin-left: -11px; margin-right: -11px; } .ic-cal-grid { gap: 2px; } .ic-cal-day { border-radius: 9px; }
  .ins-trend { gap: 8px; padding: 7px 6px; grid-template-columns: 32px minmax(0, 1fr) auto 10px; }
  .ins-trend-icon { width: 32px; height: 32px; }
}
/* Wide screens: trends beside the next step; the details list below, full width (open charts get room). */
@media (min-width: 1000px) {
  #tab-insights.active { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
  #tab-insights > * { grid-column: 1 / -1; }
  #tab-insights > .ins-trends-wrap { grid-column: 1; }
  #tab-insights > #ins-next { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .ins-fold > summary::after, .ins-acc::after, .ins-detail { transition: none; } }
html[data-motion="reduced"] .ins-fold > summary::after, html[data-motion="reduced"] .ins-acc::after,
html[data-motion="off"] .ins-fold > summary::after, html[data-motion="off"] .ins-acc::after { transition: none; }