/* ---- V1.63 PI Quick Wins (qw-): the grid of the express tutorials (Client\Apps\Training\QuickWinsPage.razor) and the step
   player (QuickWinPlayerPage.razor, QuickWinText.razor). Design system tokens only (--os-*), full page width; a new app file:
   every design guard at zero (DesignGuardTests.ZeroTolerance). ---- */

/* The grid: as many cards as the width holds, each at least 260 px */
.qw-kpis { margin-bottom: var(--os-space-4); }
.qw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--os-space-4); margin-top: var(--os-space-4); }
.qw-card { position: relative; display: flex; flex-direction: column; gap: var(--os-space-2); padding: var(--os-space-4);
    border: var(--os-border-w) solid var(--os-border); border-radius: var(--os-radius-lg); background: var(--os-surface);
    box-shadow: var(--os-shadow-1); color: var(--os-text); text-decoration: none;
    transition: transform var(--os-dur-2) var(--os-ease-out), box-shadow var(--os-dur-2) var(--os-ease-out), border-color var(--os-dur-2); }
.qw-card:hover, .qw-card:focus-visible { transform: translateY(-2px); box-shadow: var(--os-shadow-2); border-color: var(--os-border-strong); }
.qw-card:focus-visible { outline: 2px solid var(--os-focus); outline-offset: 2px; }
.qw-card--done { background: var(--os-surface-raised); }
.qw-card__top { display: flex; align-items: center; gap: var(--os-space-2); }
.qw-card__icon { color: var(--os-accent-text); background: var(--os-accent-soft); }
.qw-card__title { margin: 0; font: var(--os-type-h3); color: var(--os-text); }
.qw-card__outcome { margin: 0; flex: 1; font: var(--os-type-small); color: var(--os-text-2); }
.qw-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2) var(--os-space-3); font: var(--os-type-caption); color: var(--os-text-3); }
.qw-card__meta > span { display: inline-flex; align-items: center; gap: var(--os-space-1); }
.qw-card__id { margin-left: auto; }
.qw-tick { display: inline-flex; color: var(--os-good); }
.qw-teaser { margin-top: var(--os-space-5); }
.qw-teaser__in { display: flex; align-items: flex-start; gap: var(--os-space-3); color: var(--os-text-2); }
.qw-teaser__in h3 { margin: 0 0 var(--os-space-1); }
.qw-teaser__in p { margin: 0; }

/* The player: the stage and the side column; one column on a phone */
.qw-player:focus { outline: none; }
.qw-progressline { display: flex; align-items: center; gap: var(--os-space-3); margin: var(--os-space-2) 0 var(--os-space-4); }
.qw-progressline .os-progress { flex: 1; height: 6px; border-radius: var(--os-radius-pill); }
.qw-progressline .os-progress > span { border-radius: var(--os-radius-pill); }
.qw-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--os-space-5); align-items: start; }
.qw-stage { display: flex; flex-direction: column; gap: var(--os-space-3); min-width: 0; }
.qw-side { display: flex; flex-direction: column; gap: var(--os-space-3); }
.qw-step__head { display: flex; align-items: flex-start; gap: var(--os-space-3); }
.qw-step__n { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--os-radius-pill);
    background: var(--os-accent); color: var(--os-on-accent); font: var(--os-type-h4); }
.qw-step__text { margin: 0; font: var(--os-type-reading); color: var(--os-text); }
.qw-ui { font-weight: 600; }
.qw-display { color: var(--os-text-2); }
.qw-copy { display: inline-flex; align-items: center; gap: var(--os-space-0h); padding: 0 var(--os-space-0h) 0 var(--os-space-1h);
    border: var(--os-border-w) solid var(--os-border-subtle); border-radius: var(--os-radius-sm); background: var(--os-surface-sunken);
    vertical-align: baseline; }
.qw-copy code { font: var(--os-type-mono); color: var(--os-text); overflow-wrap: anywhere; }
.qw-copy__b { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--os-radius-xs);
    background: none; color: var(--os-text-3); cursor: pointer; }
.qw-copy__b:hover, .qw-copy__b:focus-visible { background: var(--os-surface-hover); color: var(--os-accent-text); }

/* The screenshot: the whole width of the stage; a click zooms it */
.qw-shot { position: relative; display: block; width: 100%; margin: var(--os-space-4) 0 0; padding: 0; overflow: hidden;
    border: var(--os-border-w) solid var(--os-border); border-radius: var(--os-radius-md); background: var(--os-surface-sunken); cursor: zoom-in; }
.qw-shot img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; }
.qw-shot__zoom { position: absolute; right: var(--os-space-2); bottom: var(--os-space-2); display: inline-grid; place-items: center;
    width: 32px; height: 32px; border-radius: var(--os-radius-pill); background: var(--os-surface); color: var(--os-text-2); box-shadow: var(--os-shadow-2); }
.qw-shot--todo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--os-space-1);
    min-height: 180px; border-style: dashed; color: var(--os-text-3); cursor: default; font: var(--os-type-small); }
.qw-see { display: flex; align-items: flex-start; gap: var(--os-space-2); margin-top: var(--os-space-4); padding: var(--os-space-3);
    border-radius: var(--os-radius-md); background: var(--os-info-soft); color: var(--os-info-text); font: var(--os-type-body); }
.qw-see b { font-weight: 600; }

/* The check */
.qw-choices { display: grid; gap: var(--os-space-2); margin: var(--os-space-3) 0; }
.qw-choice { display: flex; align-items: center; gap: var(--os-space-2); width: 100%; padding: var(--os-space-3); text-align: left;
    border: var(--os-border-w) solid var(--os-border); border-radius: var(--os-radius-md); background: var(--os-surface);
    color: var(--os-text); font: var(--os-type-body); cursor: pointer; }
.qw-choice:hover:not(:disabled) { border-color: var(--os-accent); background: var(--os-surface-hover); }
.qw-choice:disabled { cursor: default; }
.qw-choice--right { border-color: var(--os-good-border); background: var(--os-good-soft); color: var(--os-good-text); }
.qw-choice--wrong { border-color: var(--os-bad-border); background: var(--os-bad-soft); color: var(--os-bad-text); }
.qw-finish { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); margin-top: var(--os-space-4); }
.qw-finish__done { display: flex; align-items: center; gap: var(--os-space-2); width: 100%; margin: 0; color: var(--os-good-text); font: var(--os-type-h4); }

.qw-nav { display: flex; align-items: center; gap: var(--os-space-3); }
.qw-nav .os-btn--primary { margin-left: auto; }
.qw-nav__keys { display: inline-flex; gap: var(--os-space-1); margin: 0 auto; }

/* The side column */
.qw-list { margin: 0; padding-left: var(--os-space-5); color: var(--os-text-2); font: var(--os-type-small); }
.qw-why { margin: 0; color: var(--os-text-2); font: var(--os-type-small); }
.qw-steps { margin: 0; padding: var(--os-space-1) 0; list-style: none; }
.qw-steps__b { display: flex; align-items: flex-start; gap: var(--os-space-2); width: 100%; padding: var(--os-space-2) var(--os-space-4);
    border: 0; background: none; color: var(--os-text-2); text-align: left; font: var(--os-type-small); cursor: pointer; }
.qw-steps__b:hover { background: var(--os-surface-hover); }
.qw-steps__b.is-on { background: var(--os-surface-selected); color: var(--os-text); }
.qw-steps__dot { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--os-radius-pill);
    border: var(--os-border-w) solid var(--os-border-strong); font: var(--os-type-caption); color: var(--os-text-3); }
.qw-steps__dot.is-done { border-color: var(--os-good); background: var(--os-good); color: var(--os-on-good); }
.qw-steps__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* The zoom: the screenshot over the page; a click or Esc closes it */
.qw-zoom { position: fixed; inset: 0; z-index: var(--os-z-dialog); display: grid; place-items: center; padding: var(--os-space-6);
    background: var(--os-scrim); cursor: zoom-out; }
.qw-zoom img { max-width: 100%; max-height: 100%; border-radius: var(--os-radius-md); box-shadow: var(--os-shadow-4); background: var(--os-surface); }
.qw-zoom__close { position: absolute; top: var(--os-space-4); right: var(--os-space-4); }

@media (max-width: 900px) {
    .qw-layout { grid-template-columns: minmax(0, 1fr); }
    .qw-side { order: 2; }
}
@media (max-width: 600px) {
    .qw-grid { grid-template-columns: minmax(0, 1fr); }
    .qw-nav__keys { display: none; }
    .qw-zoom { padding: var(--os-space-2); }
}
.qw-saveerror { margin-bottom: var(--os-space-3); }