/* The saved-time embed (content/embeds/saved-time.html): where saved hours go, a navy card like the charts. */
.st { margin-block: 2em; padding: 24px; border-radius: 10px; background: #0F1B2D; color: #E9EDF2; border: 1px solid var(--rule, #D3D8DE); }
.st-kick { margin: 0; display: flex; align-items: center; gap: 10px; font: 500 .78rem/1.2 var(--mono, "IBM Plex Mono", monospace); letter-spacing: .12em; text-transform: uppercase; color: #8D97A3; }
.st-kick::before { content: ""; width: 8px; height: 8px; background: #E0452F; }
.st-controls { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: auto auto; gap: 6px 24px; }
.st-controls label { font-size: .9rem; color: #C3CBD5; display: flex; justify-content: space-between; gap: 8px; }
.st-controls output { font: 600 .9rem var(--mono, "IBM Plex Mono", monospace); color: #fff; white-space: nowrap; }
.st input[type="range"] { width: 100%; height: 32px; accent-color: #E0452F; cursor: pointer; }
.st input[type="range"]:focus-visible { outline: 2px solid #E9EDF2; outline-offset: 2px; }
.st-bar { margin-top: 16px; display: flex; height: 18px; border-radius: 4px; overflow: hidden; background: #18263B; }
.st-bar i { display: block; height: 100%; transition: width .2s; }
.st-bar-cap { background: #E0452F; }
.st-bar-lost { background: #3A4A64; }
.st-legend { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .86rem; color: #C3CBD5; }
.st-k { display: inline-flex; align-items: center; gap: 8px; }
.st-k::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: #3A4A64; }
.st-k--cap::before { background: #E0452F; }
.st-grid { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 4px; }
.st-grid i { width: 14px; height: 14px; border-radius: 3px; background: #3A4A64; }
.st-grid i.is-cap { background: #E0452F; }
.st-grid i.is-part { background: linear-gradient(90deg, #E0452F var(--p), #3A4A64 var(--p)); }
.st-grid span { font: 500 .8rem var(--mono, "IBM Plex Mono", monospace); color: #8D97A3; align-self: center; margin-left: 6px; }
.st-summary { margin: 14px 0 0; font-size: 1.02rem; line-height: 1.5; }
.st-summary b { color: #fff; }
.st-summary .st-red { color: #FF7A63; }
.st figcaption { margin-top: 12px; font-size: .84rem; line-height: 1.5; color: #8D97A3; }
@media (max-width: 640px) { .st { padding: 18px; } .st-controls { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; } }
@media (prefers-reduced-motion: reduce) { .st-bar i { transition: none; } }