/* The MPSC Daily: styles for the installable-app layer (bookmarks, streak, progress, update toast).
   Uses only the page's own --x-* tokens so dark and light themes both follow. */

/* bookmark toggle: a 44px icon button that sits at the end of a story's kicker row
   without making the row taller (negative margins absorb the tap target) */
.x-kick .pwa-bm { margin: -14px -12px -14px auto; color: var(--x-ink); letter-spacing: 0; text-transform: none; }
.x-kick .pwa-bm .x-i { width: 20px; height: 20px; transition: fill 0.15s; }
.pwa-bm[aria-pressed="true"] .x-i { fill: currentColor; }
.pwa-bm:active .x-i { transform: scale(0.88); }
@media (prefers-reduced-motion: reduce) { .x-kick .pwa-bm .x-i { transition: none; } .pwa-bm:active .x-i { transform: none; } }

/* streak chip under the masthead dateline */
.pwa-streak { display: flex; justify-content: flex-end; padding: 10px 0 0; }
.pwa-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border: 1px solid var(--x-hi-line); border-radius: 999px; background: linear-gradient(var(--x-hi), var(--x-hi)); font: 600 12px/1.2 var(--x-in); letter-spacing: 0.12em; text-transform: uppercase; color: var(--x-ink); }
.pwa-chip .x-i { width: 15px; height: 15px; }
.pwa-chip.is-pending { color: var(--x-ink2); }

/* Quiz screen cards */
.pwa-card { gap: 16px; }
.pwa-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pwa-head .x-lbl { display: inline-flex; align-items: center; gap: 8px; }
.pwa-head .x-lbl .x-i { width: 18px; height: 18px; }
.pwa-head .x-count { padding: 0; }
.pwa-sub { color: var(--x-ink2); }
.pwa-scores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pwa-sc { display: grid; gap: 3px; justify-items: center; min-width: 0; padding: 12px 2px 10px; border: 1px solid var(--x-hi-line); border-radius: 18px; background: linear-gradient(var(--x-hi), var(--x-hi)); text-align: center; }
.pwa-sc b { max-width: 100%; font: 900 18px/1.05 var(--x-pf); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pwa-sc span { font: 500 12px/1.2 var(--x-in); color: var(--x-ink2); }
.pwa-sc small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10px/1.3 var(--x-in); letter-spacing: 0.04em; text-transform: uppercase; color: var(--x-ink2); }
.pwa-weak { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pwa-weak li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k p" "b b"; gap: 6px 10px; align-items: center; }
.pwa-weak .x-kick { grid-area: k; min-width: 0; flex-wrap: nowrap; }
.pwa-weak .x-kick > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwa-pct { grid-area: p; font: 600 13px var(--x-in); color: var(--x-ink2); font-variant-numeric: tabular-nums; }
.pwa-bar { grid-area: b; display: block; height: 8px; border-radius: 999px; background: var(--x-hi); box-shadow: inset 0 0 0 1px var(--x-hi-line); overflow: hidden; }
.pwa-bar i { display: block; height: 100%; min-width: 8px; border-radius: inherit; background: var(--x-ink); }

/* saved for revision */
.pwa-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pwa-sv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 14px 0; border-top: 1px solid var(--x-rule); }
.pwa-sv:first-child { border-top: 0; padding-top: 2px; }
.pwa-sv__txt { display: grid; gap: 8px; min-width: 0; }
.pwa-sv h3 { font: 700 19px/1.22 var(--x-pf); }
.pwa-sv__fact { font: 400 15px/1.5 var(--x-ss); color: var(--x-ink2); }
.pwa-sv .x-meta b { margin-right: 4px; }
.pwa-rm { margin: -8px -10px 0 0; color: var(--x-ink2); }
.pwa-rm .x-i { width: 18px; height: 18px; }

/* update toast: the page's glass pill, anchored above the tab bar */
.pwa-toast.x-glass { position: fixed; z-index: 85; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; color: var(--x-ink); font: 600 13px/1.2 var(--x-in); letter-spacing: 0.04em; white-space: nowrap; cursor: pointer; opacity: 0; transform: translate(-50%, 6px); transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pwa-toast.x-glass.is-on { opacity: 1; transform: translate(-50%, 0); }
.pwa-toast .x-i { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .pwa-toast.x-glass { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .pwa-toast.x-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--x-glass-solid); } }
@media print { .pwa-bm, .pwa-streak, .pwa-card, .pwa-toast { display: none !important; } }