/* Progress screen: the tension chart at the top (js/chart.js, js/screens/progress.js). Loaded after app.css.
   Deep green hero card like the welcome screen: amber = before a roll, mint = after. Draw-in only on the first view (.animate). */

.chart-hero {
  position: relative; overflow: hidden; isolation: isolate; color: #fff; border: 0; gap: 12px; padding: 18px 20px 16px;
  background: radial-gradient(120% 70% at 100% 0%, rgba(143, 224, 182, .18), transparent 60%), radial-gradient(90% 60% at 0% 100%, rgba(244, 176, 106, .12), transparent 65%), var(--grad-deep);
  box-shadow: var(--shadow-lg);
}
.chart-hero .ch-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.chart-hero .eyebrow { color: var(--mint); }
.chart-hero .ch-headline { display: flex; flex-direction: column; gap: 6px; }
.chart-hero .ch-big { color: #fff; font-family: var(--serif); font-size: 34px; line-height: 1.08; font-weight: 560; letter-spacing: -0.015em; }
.chart-hero .ch-big em { font-style: normal; color: #8fe0b6; font-variant-numeric: tabular-nums; }
.chart-hero .ch-big em:first-child:not(:only-child):not(.a) { color: #f4b06a; }
.chart-hero .ch-big em.a { color: #8fe0b6; }
.chart-hero .ch-headline p { color: rgba(255, 255, 255, .8); font-size: 14.5px; line-height: 1.45; }
.chart-hero.preview .ch-big em { color: var(--gold-2); }

/* range switch on the dark card */
.seg.glass { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); flex: 0 0 auto; }
.seg.glass button { color: rgba(255, 255, 255, .72); }
.seg.glass button[aria-selected=true] { background: rgba(255, 255, 255, .94); color: var(--green-deep); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }

.ch-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-legend span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .82); }
.ch-legend i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.ch-legend b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }

/* the chart bleeds to the card edges so the fills run edge to edge */
.ch-chart { position: relative; margin: 2px -20px 0; }
.ch-chart .c-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.c-grid { stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.c-grid.base { stroke: rgba(255, 255, 255, .22); }
.c-tick { stroke: rgba(255, 255, 255, .22); }
.c-ylab { font: 600 10.5px var(--sans); fill: rgba(255, 255, 255, .42); }
.c-xlab { font: 700 11.5px var(--sans); fill: rgba(255, 255, 255, .7); }
.c-xlab.today { fill: #fff; }
.c-dot { opacity: .5; }
.c-none { font: 600 13px var(--sans); fill: rgba(255, 255, 255, .6); }
.c-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.c-line.after { stroke-width: 3.5; filter: drop-shadow(0 3px 8px rgba(143, 224, 182, .35)); }
.c-chip rect { fill: rgba(9, 34, 26, .82); stroke: rgba(255, 255, 255, .16); }
.c-chip text { font: 800 11.5px var(--sans); fill: #fff; }
.c-crossline { stroke: rgba(255, 255, 255, .5); stroke-dasharray: 3 4; }
.c-hit { cursor: crosshair; }
.ch-chart .c-tip { position: absolute; top: 0; transform: translateY(-100%); background: var(--paper); color: var(--ink); border-radius: 12px; padding: 8px 10px; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; white-space: nowrap; z-index: 3; box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.ch-chart .c-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.ch-chart .c-tip small { color: var(--ink-3); }

/* preview: an example curve, dotted and faded, with an Example tag; their real points solid on top */
.c-example { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 7; }
.c-tag rect { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .35); stroke-dasharray: 3 3; }
.c-tag text { font: 800 11px var(--sans); fill: rgba(255, 255, 255, .85); letter-spacing: .04em; text-transform: uppercase; }
.c-drop { stroke: rgba(255, 255, 255, .55); stroke-width: 2; stroke-dasharray: 2 3; }
.c-chip.you rect { fill: rgba(255, 255, 255, .94); stroke: none; }
.c-chip.you text { fill: var(--green-deep); }
.ch-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.ch-note .ic { flex: 0 0 auto; margin-top: 1px; color: var(--mint); }
.chart-hero .btn-light { min-height: 50px; }

/* table view on the dark card */
.chart-hero .table-view summary { color: var(--mint); min-height: 40px; }
.chart-hero .table-view table { color: rgba(255, 255, 255, .88); }
.chart-hero .table-view th, .chart-hero .table-view td { border-bottom-color: rgba(255, 255, 255, .12); }

/* the draw-in: lines trace left to right, fills and markers follow. Only with .animate (first view of this chart). */
.c-svg.animate .c-line { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: chDraw 1.5s .35s cubic-bezier(.45, .05, .2, 1) forwards; }
.c-svg.animate .c-line.after { animation-delay: .5s; }
.c-svg.animate .c-area { opacity: 0; animation: chFade 1s 1s ease forwards; }
.c-svg.animate .c-end, .c-svg.animate .c-dot { opacity: 0; animation: chFade .45s 1.75s ease forwards; }
.c-svg.animate .c-dot { animation-name: chDot; }
@keyframes chDot { to { opacity: .5; } }
.c-svg.animate .c-example { opacity: 0; animation: chFade 1.1s .35s ease forwards; }
.c-svg.animate .c-area.ex { animation-delay: .6s; }
.c-svg.animate .c-tag { opacity: 0; animation: chFade .5s 1.1s ease forwards; }
.c-svg.animate .c-real { opacity: 0; animation: chFade .45s 1.3s ease forwards; }
@keyframes chDraw { to { stroke-dashoffset: 0; } }
@keyframes chFade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .c-svg.animate * { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; } }

@media (max-width: 370px) {
  .chart-hero { padding: 16px 16px 14px; }
  .ch-chart { margin: 2px -16px 0; }
  .chart-hero .ch-big { font-size: 30px; }
}