/* ================================================================
   Insights, charts and the printable report.
   Colours only through the app's variables, so themes recolour charts.
   Data numerals: sans, lining, tabular. Serif: headings only.
   ================================================================ */

/* ---------- insights layout ---------- */
.in-ranges { margin-top: var(--sp-14); }
.in-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); }
@media (min-width: 560px) { .in-head { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.in-head > div { background: var(--keylime-wash); border-radius: var(--radius-card); padding: var(--sp-14); }
.in-head b {
  display: block; font-size: var(--text-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--forest-ink); opacity: .65; margin-bottom: 6px;
}
.in-head .n { font-weight: 300; font-size: 32px; line-height: 1; color: var(--forest-ink); }
.in-head .n small { font-size: 14px; opacity: .6; }
.in-head span { display: block; font-size: 12px; opacity: .7; margin-top: 6px; }
.in-report { margin: var(--sp-14) 0 var(--sp-7); }

.in-card { background: var(--keylime-wash); border-radius: var(--radius-card); padding: var(--card-pad); margin-bottom: var(--sp-9); }
.in-card h3 {
  font-family: var(--font-display); font-weight: 300; font-size: 21px; line-height: 1.25; color: var(--forest-ink);
  margin: 0 0 var(--sp-11); display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.in-card h3 .r {
  font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; opacity: .55; white-space: nowrap;
}
.in-card .hint { margin: var(--sp-9) 0 0; }
.in-sub {
  font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--forest-ink); opacity: .7; margin: var(--sp-14) 0 var(--sp-7);
}
.in-slots { margin-bottom: var(--sp-9); }
.in-slots .chip { min-height: 36px; background: var(--cream-paper); font-size: 13px; }
.in-slots .chip[aria-pressed="true"] { background: var(--forest-ink); color: var(--cream-paper); }
.in-avgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: var(--sp-9); }
.in-avgs div { background: var(--cream-paper); border-radius: 10px; padding: 8px; text-align: center; }
.in-avgs b { display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.in-avgs span { font-size: 20px; font-weight: 300; color: var(--forest-ink); }
.in-list { list-style: none; margin: 0; padding: 0; }
.in-list li { padding: 5px 0; font-size: 13.5px; line-height: 1.45; border-bottom: 1px solid rgba(15, 62, 23, .07); }
.in-list li:last-child { border-bottom: 0; }
.in-list b { color: var(--forest-ink); font-weight: 600; margin-right: 6px; }

/* ---------- charts ---------- */
.chartwrap { background: var(--cream-paper); border-radius: 10px; padding: 6px 4px 2px; }
svg.chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.ch-grid { stroke: var(--border-mist); stroke-width: 1; }
.ch-axis { fill: var(--charcoal); opacity: .6; font-size: 10px; font-variant-numeric: lining-nums tabular-nums; }
.ch-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-dot { stroke: var(--cream-paper); stroke-width: 1.2; }
.ch-marker { stroke: var(--charcoal); stroke-opacity: .35; stroke-dasharray: 3 3; }
.ch-marker-dot { fill: var(--forest-ink); }
.ch-marker-n { fill: var(--cream-paper); font-size: 9px; font-weight: 600; }
.ch-band { fill: var(--sage-mist); opacity: .45; }
.ch-bar { fill: var(--forest-ink); opacity: .75; }
.ch-miss { fill: #b3412f; font-size: 11px; font-weight: 600; }

/* series colours: ink, slate, sage-dark, amber - distinguishable in both themes */
.ch-line.s0, .ch-key.s0 { stroke: var(--forest-ink); background: var(--forest-ink); }
.ch-dot.s0 { fill: var(--forest-ink); }
.ch-line.s1, .ch-key.s1 { stroke: #4f7f8c; background: #4f7f8c; }
.ch-dot.s1 { fill: #4f7f8c; }
.ch-line.s2, .ch-key.s2 { stroke: #c0503f; background: #c0503f; }
.ch-dot.s2 { fill: #c0503f; }
.ch-line.s3, .ch-key.s3 { stroke: #c48a1f; background: #c48a1f; }
.ch-dot.s3 { fill: #c48a1f; }
.ch-line.s4, .ch-key.s4 { stroke: #7a5aa6; background: #7a5aa6; }
.ch-dot.s4 { fill: #7a5aa6; }
.ch-line.sleep { stroke: #4f7f8c; }
.ch-dot.sleep { fill: #4f7f8c; }
.ch-dot.ontime { fill: var(--forest-ink); }
.ch-dot.late { fill: #c48a1f; }

.ch-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; margin-top: 8px; }
.ch-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ch-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.ch-markers { margin: 8px 0 0; padding-left: 22px; font-size: 12px; line-height: 1.5; }
.ch-markers b { color: var(--forest-ink); margin-right: 4px; }

/* horizontal bars */
.hbars { display: grid; gap: 10px; }
.hb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.hb-l { font-size: 14px; color: var(--forest-ink); min-width: 0; }
.hb-l small { display: block; font-size: 11.5px; color: var(--charcoal); opacity: .65; }
.hb-t { font-size: 13px; font-weight: 600; color: var(--forest-ink); white-space: nowrap; }
.hb-track { height: 10px; border-radius: var(--radius-pill); background: var(--cream-paper); overflow: hidden; }
.hb-track i { display: block; height: 100%; border-radius: inherit; background: var(--forest-ink); }
.hb-track i.mid { background: #c48a1f; }
.hb-track i.low { background: #c0503f; }
.hb-track i.opt, .hb-track i.tag { background: #4f7f8c; }
.hb-track i.sym { background: var(--forest-ink); opacity: .7; }
.hb-track i.mention { background: var(--forest-ink); opacity: .85; }

/* heat grid */
.heat { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--cream-paper); border-radius: 10px; padding: 8px; --hg-label: 96px; }
.heat-in { display: grid; gap: 2px; align-items: center; min-width: min-content; }
.hg-h { font-size: 9.5px; text-align: center; color: var(--charcoal); opacity: .6; height: 14px; line-height: 14px; }
.hg-l {
  position: sticky; left: -8px; z-index: 1; background: var(--cream-paper);
  font-size: 11.5px; line-height: 1.2; padding: 2px 6px 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--forest-ink);
}
.hg-l small { display: block; font-size: 10px; opacity: .6; }
.hg-c { height: 22px; border-radius: 3px; background: var(--border-mist); cursor: pointer; }
.hg-c.taken { background: var(--forest-ink); }
.hg-c.late { background: #c48a1f; }
.hg-c.missed { background: #e0a497; }
.hg-c.skipped { background: repeating-linear-gradient(-45deg, var(--sage-mist), var(--sage-mist) 2px, transparent 2px, transparent 4px); }
.hg-c.optional { background: transparent; box-shadow: inset 0 0 0 1px var(--border-mist); }
.hg-c.off { background: transparent; cursor: default; }
.hg-c.future { background: transparent; cursor: default; }
.hg-legend i.hg-c { display: inline-block; width: 12px; height: 12px; cursor: default; }

/* ---------- report (screen) ---------- */
.rp-tools { display: flex; gap: 8px; margin: var(--sp-14) 0 var(--sp-9); }
.rp-tools .btn { flex: 1; }
.report {
  background: var(--cream-paper); border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--border-mist);
  padding: var(--card-pad); margin: var(--sp-14) 0; color: var(--charcoal);
}
.rp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 6px 16px;
           border-bottom: 2px solid var(--forest-ink); padding-bottom: 10px; margin-bottom: 6px; }
.rp-eyebrow { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--forest-ink); opacity: .7; }
.report h1 { font-family: var(--font-display); font-weight: 300; font-size: 26px; line-height: 1.15; color: var(--forest-ink); margin: 2px 0; font-variant-numeric: lining-nums; }
.rp-meta { font-size: 12px; opacity: .7; }
.rp-sec { padding: 12px 0 4px; break-inside: avoid-page; }
.rp-sec + .rp-sec { border-top: 1px solid var(--border-mist); }
.report h2 { font-family: var(--font-display); font-weight: 400; font-size: 19px; color: var(--forest-ink); margin: 0 0 8px; display: block; }
.report h3 { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--forest-ink); margin: 12px 0 6px; }
.rp-lead { margin: 0 0 8px; font-size: 14px; }
.rp-note { margin: 8px 0; font-size: 13px; line-height: 1.5; }
.rp-empty { margin: 4px 0; font-size: 13px; opacity: .6; }
.rp-dim { opacity: .55; font-size: .9em; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rp-table th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--forest-ink); padding: 4px 6px; border-bottom: 1px solid var(--forest-ink); }
.rp-table td { padding: 5px 6px; border-bottom: 1px solid var(--border-mist); vertical-align: top; }
.rp-compact td { white-space: nowrap; }
.rp-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.rp-list b { color: var(--forest-ink); font-weight: 600; margin-right: 4px; }
.rp-diary { list-style: none; margin: 0; padding: 0; }
.rp-diary li { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 5px 0; font-size: 12.5px; line-height: 1.5; border-bottom: 1px solid var(--border-mist); break-inside: avoid; }
.rp-diary b { color: var(--forest-ink); font-weight: 600; }
.rp-chart { margin: 10px 0 4px; max-width: 520px; }
.rp-chart .chartwrap { padding: 0; }
.rp-review p { margin: 4px 0; font-size: 13px; line-height: 1.5; }
.rp-review b { color: var(--forest-ink); font-weight: 600; margin-right: 4px; }
.rp-lines span { display: block; height: 28px; border-bottom: 1px solid var(--border-mist); }
@media (max-width: 480px) {
  .rp-table { font-size: 11.5px; }
  .rp-table th, .rp-table td { padding: 4px 3px; }
  .rp-diary li { grid-template-columns: 1fr; gap: 0; }
  .rp-compact td { white-space: normal; }
  .rp-tools .btn { padding: 0 8px; }
}

/* ---------- print ---------- */
/* `.print-preview` on <html> applies the same layout on screen, for checking. */
@media print {
  @page { size: A4; margin: 14mm 13mm; }
}
@media print {
  html, body { background: #fff !important; color: #111 !important; padding: 0 !important; }
  header.top, nav.tabs, .composer, .toast, .scrim, .sheet, .no-print, .rp-tools { display: none !important; }
  main.wrap { max-width: none; padding: 0; }
  .report { box-shadow: none; border-radius: 0; padding: 0; margin: 0; background: #fff; font-size: 11.5px; }
  .report, .report * { color: #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report h1, .report h2, .report h3, .rp-list b, .rp-diary b, .rp-review b, .rp-table th { color: #0f3e17; }
  .rp-head { border-bottom-color: #0f3e17; }
  .rp-table th { border-bottom-color: #0f3e17; }
  .rp-table td, .rp-diary li, .rp-sec + .rp-sec, .rp-lines span { border-color: #ddd; }
  .rp-chart { max-width: 115mm; }
  .rp-chart .chartwrap { background: #fff; }
  .rp-sec { break-inside: auto; }
  .rp-table tr, .rp-diary li, .rp-review { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}
html.print-preview body { background: #fff; padding: 0; }
html.print-preview header.top, html.print-preview nav.tabs, html.print-preview .no-print,
html.print-preview .rp-tools { display: none !important; }
html.print-preview .report { box-shadow: none; max-width: 180mm; margin: 0 auto; background: #fff; }

/* ---------- one-page report ---------- */
.rp-glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 4px; }
.rp-glance div { background: var(--keylime-wash); border-radius: 10px; padding: 10px; }
.rp-glance b { display: block; font-size: 20px; font-weight: 400; color: var(--forest-ink); line-height: 1.1; }
.rp-glance span { font-size: 10.5px; opacity: .7; line-height: 1.3; display: block; margin-top: 3px; }
.rp-summary .rp-sec { margin-top: 12px; }
.rp-summary .rp-sec h2 { margin-bottom: 4px; }
.in-rangesub { margin: 2px 0 12px; }
@media print {
  .rp-summary { font-size: 10.5px; }
  .rp-summary .rp-sec { margin-top: 8px; break-inside: avoid; }
  .rp-summary .rp-table td, .rp-summary .rp-table th { padding: 2px 6px; }
  .rp-glance div { background: none; border: 1px solid #dfe7df; padding: 6px 8px; }
  .rp-glance b { font-size: 16px; }
  .rp-summary .rp-diary li { margin: 2px 0; }
  .segment { display: none !important; }
}
@media screen and (max-width: 480px) { .rp-glance { grid-template-columns: 1fr 1fr; } .rp-glance b { font-size: 18px; } }