/* Daily charts: the demo's price history and the Search Console chart on the Hintatutka case study. Loaded on those pages only; tokens.css and site.css come first. */
.island[data-island-state="loading"] { cursor: progress; }

/* History chart: one step line of the daily low. Euro labels sit in a left gutter, dates below. */
.pchart { margin: 0 0 var(--s-4); padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-surface); background: var(--c-surface); }
.pchart__plot { position: relative; aspect-ratio: 16 / 9; margin-left: 3.5rem; touch-action: pan-y; }
@media (min-width: 768px) { .pchart__plot { aspect-ratio: auto; height: 260px; } }
.pchart__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pchart__grid { stroke: var(--c-border); stroke-width: 1; stroke-dasharray: 2 4; }
.pchart__cross { stroke: var(--c-control); stroke-width: 1; }
.pchart__line { fill: none; stroke: var(--c-chart); stroke-width: 2; stroke-linejoin: round; }
.pchart__lone { stroke: var(--c-chart); stroke-width: 6; stroke-linecap: round; }
.pchart__y { position: absolute; left: -3.5rem; width: 3rem; transform: translateY(-50%); text-align: right; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pchart__dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--c-chart); box-shadow: 0 0 0 2px var(--c-surface); transform: translate(-50%, -50%); pointer-events: none; }
.pchart__val { position: absolute; transform: translate(calc(-100% - 12px), -50%); padding: 0 var(--s-1); background: var(--c-surface); color: var(--c-fg); font-weight: var(--fw-semibold); font-size: var(--t-sm); line-height: var(--lh-sm); white-space: nowrap; }
.pchart__tip { position: absolute; z-index: 1; display: grid; gap: 2px; min-width: 9rem; max-width: 14rem; padding: var(--s-2) var(--s-3); transform: translate(var(--tip-x), var(--tip-y)); --tip-x: 12px; --tip-y: -110%; border: 1px solid var(--c-border); border-radius: var(--r-control); background: var(--c-surface); box-shadow: var(--sh-floating); font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--c-fg-2); pointer-events: none; }
/* The tip sits on the far side of the point from the nearer edges, so it never covers the period choice. */
.pchart__tip--left { --tip-x: calc(-100% - 12px); }
.pchart__tip--below { --tip-y: 12px; }
.pchart__tip strong { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-fg); font-variant-numeric: tabular-nums; }
.pchart__tipdate { color: var(--c-muted); }
.pchart__readout { min-height: calc(2 * var(--t-sm) * var(--lh-sm)); margin-bottom: var(--s-2); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-fg-2); }
.pchart__readout strong { color: var(--c-fg); font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) { .pchart__tip { display: none; } }
@media (min-width: 768px) { .pchart__readout { display: none; } }
.pchart__x { position: relative; height: calc(var(--t-xs) * var(--lh-xs)); margin: var(--s-2) 0 0 3.5rem; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--c-muted); }
.pchart__x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.pchart__x span:first-child { transform: none; }
.pchart__x .pchart__end { transform: translateX(-100%); }
/* Weekly dates crowd a phone-width axis: keep every other one, counting back from the last day. */
@media (max-width: 479.98px) { .pchart[data-period="recent"] .pchart__x span:nth-last-child(even) { display: none; } }
.pchart__cap { margin-top: var(--s-3); max-width: var(--w-prose); color: var(--c-fg-2); font-size: var(--t-sm); line-height: var(--lh-sm); }
.pchart__period { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); margin: 0 0 var(--s-3); padding: 0; border: 0; font-size: var(--t-sm); }
.pchart__period legend { float: left; margin-right: var(--s-2); color: var(--c-fg-2); }
.pchart__period label { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--ctl-h-touch); }
.pchart__period input, .pchart__scrub input { accent-color: var(--c-action); }
.pchart__scrub { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); font-size: var(--t-sm); }
.pchart__scrub input { flex: 1; min-height: var(--ctl-h-touch); }

/* Search Console: the period's figures above the plot, the provisional days dashed (and named in the note and tooltip). */
.schart__figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); margin: 0 0 var(--s-4); }
@media (min-width: 768px) { .schart__figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.schart__figures dt { color: var(--c-muted); font-size: var(--t-xs); line-height: var(--lh-xs); }
.schart__figures dd { margin: 0; color: var(--c-fg); font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.schart__controls { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.schart__note { margin-bottom: var(--s-2); color: var(--c-muted); font-size: var(--t-xs); line-height: var(--lh-xs); }
.schart__line--provisional { stroke-dasharray: 6 5; }
.schart__dot--empty { background: var(--c-surface); box-shadow: inset 0 0 0 2px var(--c-chart); }
.schart__more { margin-top: var(--s-2); }
.schart__table td { min-width: 0; font-variant-numeric: tabular-nums; }
.schart__table th, .schart__table td { padding-inline: var(--s-3); }
.schart__table thead th { font-size: var(--t-sm); line-height: var(--lh-sm); }