/* ============================================================
   Tutorial — the lesson step card (js/tutorial.js) and the Tutorial
   page (js/tutorial-page.js), on the PatchWork Standard tokens
   (css/slate.css). Design: Tutorial.dc.html, adapted for
   interactive lessons.
   ============================================================ */

/* ---------- step card ---------- */
.tut-card {
    position: fixed;
    right: 24px;
    bottom: 80px;
    width: 360px;
    max-width: calc(100vw - 32px);
    z-index: 10020;
    display: flex;
    flex-direction: column;
    background: var(--sl-raised);
    border: 1px solid var(--sl-line-pop);
    border-radius: var(--sl-r-14);
    box-shadow: var(--sl-shadow-pop);
    color: var(--sl-text-1);
    font-family: var(--sl-font-ui);
    overflow: hidden;
    animation: tutCardIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tutCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tut-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 10px 10px 14px;
    border-bottom: 1px solid var(--sl-hairline);
    cursor: grab; user-select: none;
    color: var(--sl-link);
}
.tut-card-head:active { cursor: grabbing; }
.tut-card-headtext { flex: 1; min-width: 0; }
.tut-card-kicker {
    font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.1em;
    color: var(--sl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tut-card-title { font-size: 13px; font-weight: 700; color: var(--sl-text-1); margin-top: 2px; }
.tut-card-ctl { display: flex; gap: 2px; flex: none; }
.tut-card-practice {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 14px; font-size: 11px; color: var(--sl-text-2);
    background: var(--sl-amber-14);
    border-bottom: 1px solid var(--sl-hairline);
}
.tut-card-practice .tut-dot { background: var(--sl-warning); }
.tut-card-body { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.tut-card-step { font-size: 14px; font-weight: 650; line-height: 1.35; }
.tut-card-desc { font-size: 12.5px; line-height: 1.55; color: var(--sl-text-2); }
.tut-card-actions-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.tut-card-status {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: var(--sl-text-3);
}
.tut-card-status.is-done { color: var(--sl-success); }
.tut-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--sl-text-3); }
.tut-dot.is-wait { background: var(--sl-link); animation: tutPulse 1.2s ease-in-out infinite; }
.tut-dot.is-done { background: var(--sl-success); }
@keyframes tutPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.tut-card-foot {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px 12px; border-top: 1px solid var(--sl-hairline);
}
.tut-card-prog { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.tut-card-bar, .tut-steps { flex: 1; min-width: 0; display: flex; gap: 2px; }
.tut-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--sl-ring-track); }
.tut-seg.is-chapter { margin-left: 4px; }
.tut-seg.is-done { background: var(--sl-success); }
.tut-seg.is-active { background: var(--sl-accent); }
.tut-card-count { font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); white-space: nowrap; }
.tut-card-btns { display: flex; gap: 6px; flex: none; }
.tutorial-card-minimized .tut-card-practice,
.tutorial-card-minimized .tut-card-body,
.tutorial-card-minimized .tut-card-foot { display: none; }
.tutorial-card-minimized { width: 260px; }

/* element highlight */
.tut-highlight {
    outline: 2px solid var(--sl-accent) !important;
    outline-offset: 3px;
    border-radius: 6px;
    animation: tutOutline 1.5s ease-in-out infinite;
}
@keyframes tutOutline {
    0%, 100% { outline-color: var(--sl-accent-line); }
    50% { outline-color: var(--sl-accent); }
}

/* ---------- page ---------- */
.tut-page { font-family: var(--sl-font-ui); color: var(--sl-text-1); max-width: 1120px; }
.tut-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tut-search {
    display: flex; align-items: center; gap: 9px;
    height: 34px; padding: 0 12px; width: 280px; max-width: 100%; box-sizing: border-box;
    background: var(--sl-panel); border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-8);
    color: var(--sl-text-3);
}
.tut-search:focus-within { border-color: var(--sl-focus); }
.tut-search-input {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    font: inherit; font-size: 12.5px; color: var(--sl-text-1);
}
.tut-mono { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-2); white-space: nowrap; }
.tut-dim { color: var(--sl-text-3); font-size: 10.5px; }
.tut-bar { width: 180px; max-width: 30vw; height: 6px; border-radius: 3px; background: var(--sl-ring-track); overflow: hidden; flex: none; }
.tut-bar > div { height: 100%; }
.tut-bar-green > div { background: var(--sl-success); }
.tut-bar-accent > div { background: var(--sl-accent); }
.tut-link {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; font-size: 11.5px; font-weight: 600; color: var(--sl-link);
}
.tut-link:hover { color: var(--sl-link-hover); }

.tut-start {
    margin-top: 4px; padding: 18px 20px; border-radius: var(--sl-r-14);
    background: var(--sl-card); border: 1px solid var(--sl-hairline);
}
.tut-start-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tut-start-text { flex: 1; min-width: min(200px, 100%); }
.tut-start-title { font-size: 16px; font-weight: 700; }
.tut-start-line { font-size: 12px; color: var(--sl-text-2); margin-top: 3px; }
.tut-start-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 16px; }
.tut-start-step {
    display: flex; flex-direction: column; gap: 8px; padding: 12px;
    border-radius: var(--sl-r-12); background: var(--sl-card); border: 1px solid var(--sl-hairline);
}
.tut-start-step.is-done { background: var(--sl-green-14); border-color: var(--sl-green-45); }
.tut-start-steptop { display: flex; align-items: center; gap: 8px; }
.tut-start-dot {
    width: 20px; height: 20px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--sl-border-strong); color: var(--sl-text-2);
    font-family: var(--sl-font-mono); font-size: 9.5px; font-weight: 600;
}
.tut-start-step.is-done .tut-start-dot { background: var(--sl-success); border-color: var(--sl-success); color: var(--sl-on-accent); }
.tut-start-label { font-size: 12.5px; font-weight: 600; }
.tut-start-step.is-done .tut-start-label { color: var(--sl-text-2); }
.tut-start-hint { font-size: 11px; line-height: 1.45; color: var(--sl-text-2); flex: 1; }

.tut-resume {
    margin-top: 14px; display: flex; align-items: center; gap: 14px;
    padding: 10px 14px 10px 10px; border-radius: var(--sl-r-12); cursor: pointer;
    background: var(--sl-sky-10); border: 1px solid var(--sl-sky-35);
}
.tut-resume:hover { background: var(--sl-sky-14); }
.tut-resume-thumb {
    width: 74px; aspect-ratio: 16 / 10; border-radius: 6px; flex: none;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.tut-resume-mid { flex: 1; min-width: 0; }
.tut-resume-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--sl-accent-text); }
.tut-resume-title { font-size: 13px; font-weight: 600; margin-top: 3px; }
.tut-resume-bar { width: 120px; height: 4px; }

.tut-track { margin-top: 30px; }
.tut-track-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: var(--sl-link); flex-wrap: wrap; }
.tut-track-name { font-size: 15px; font-weight: 700; color: var(--sl-text-1); }
.tut-rec {
    font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
    background: var(--sl-accent-tint); color: var(--sl-accent-text);
}
.tut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tut-lesson {
    background: var(--sl-card); border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-12);
    overflow: hidden; cursor: pointer;
}
.tut-lesson:hover, .tut-lesson:focus-visible { border-color: var(--sl-sky-50); outline: none; }
.tut-thumb { position: relative; aspect-ratio: 16 / 9; }
.tut-thumb-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 34px; height: 34px; border-radius: 50%;
    background: oklch(0 0 0 / 0.45); border: 1px solid oklch(1 0 0 / 0.25);
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.tut-thumb-dur {
    position: absolute; bottom: 7px; right: 7px; font-family: var(--sl-font-mono); font-size: 9.5px;
    color: #fff; background: oklch(0 0 0 / 0.55); padding: 2px 6px; border-radius: 5px;
}
.tut-thumb-done {
    position: absolute; top: 7px; right: 7px; display: inline-flex; align-items: center; gap: 4px;
    height: 19px; padding: 0 7px; border-radius: 6px;
    background: var(--sl-success); color: var(--sl-on-accent); font-size: 11px; font-weight: 700;
}
.tut-thumb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: oklch(1 0 0 / 0.15); }
.tut-thumb-bar > div { height: 100%; background: var(--sl-accent); }
.tut-lesson-body { padding: 10px 12px 12px; }
.tut-lesson-title { font-size: 13px; font-weight: 600; line-height: 1.35; }
.tut-lesson-blurb { font-size: 11.5px; line-height: 1.45; color: var(--sl-text-2); margin-top: 4px; }
.tut-noresults { margin-top: 30px; font-size: 13px; color: var(--sl-text-3); }
.tut-foot { margin-top: 28px; display: flex; justify-content: flex-end; }

/* lesson view */
.tut-back {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0;
    cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--sl-text-2);
}
.tut-back:hover { color: var(--sl-text-1); }
.tut-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; margin-top: 14px; align-items: start; }
.tut-main { min-width: 0; }
.tut-stage { border-radius: var(--sl-r-12); overflow: hidden; background: var(--sl-app); box-shadow: var(--sl-inset); }
.tut-stage-screen { position: relative; aspect-ratio: 16 / 9; max-height: 52vh; width: 100%; }
.tut-stage-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 62px; height: 62px; border-radius: 50%; cursor: pointer;
    background: oklch(0 0 0 / 0.5); border: 1px solid oklch(1 0 0 / 0.3); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.tut-stage-play:hover { background: oklch(0 0 0 / 0.62); }
.tut-stage-cap {
    position: absolute; left: 14px; bottom: 12px; font-size: 12px; font-weight: 600; color: #fff;
    background: oklch(0 0 0 / 0.5); padding: 4px 9px; border-radius: 6px;
}
.tut-stage-ctl { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.tut-info { display: flex; align-items: flex-start; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.tut-info-text { flex: 1; min-width: min(240px, 100%); }
.tut-meta { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--sl-text-2); }
.tut-h2 { font-size: 21px; font-weight: 700; margin: 6px 0 0; letter-spacing: -0.015em; }
.tut-blurb { font-size: 13px; line-height: 1.6; color: var(--sl-text-2); margin-top: 8px; max-width: 620px; }
.tut-info-btns { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.tut-done {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; cursor: pointer;
    border-radius: var(--sl-r-10); background: var(--sl-quiet); border: 1px solid var(--sl-border);
    color: var(--sl-text-1); font: inherit; font-size: 12.5px; font-weight: 600;
}
.tut-done:hover { background: var(--sl-quiet-hover); }
.tut-done.is-done { color: var(--sl-success); border-color: var(--sl-green-45); }
.tut-try { height: 36px; }
.tut-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tut-box { border-radius: var(--sl-r-12); background: var(--sl-card); border: 1px solid var(--sl-hairline); overflow: hidden; }
.tut-box-head {
    padding: 11px 13px; font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.12em;
    color: var(--sl-text-3); border-bottom: 1px solid var(--sl-hairline);
}
.tut-box-empty { padding: 11px 13px; font-size: 11.5px; color: var(--sl-text-2); }
.tut-ch { padding: 9px 13px; }
.tut-ch.is-current { background: var(--sl-sky-10); }
.tut-ch-top { display: flex; align-items: center; gap: 10px; }
.tut-ch-n { font-size: 10px; color: var(--sl-text-3); width: 20px; }
.tut-ch.is-current .tut-ch-n { color: var(--sl-link); }
.tut-ch-label { font-size: 12px; font-weight: 600; }
.tut-ch-steps { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 2px 30px; }
.tut-ch-step { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--sl-text-2); line-height: 1.35; }
.tut-ch-step.is-done { color: var(--sl-text-3); }
.tut-ch-step.is-done svg { color: var(--sl-success); flex: none; }
.tut-ch-bullet { width: 5px; height: 5px; border-radius: 50%; background: var(--sl-border-strong); flex: none; margin: 0 3px; }
.tut-next { display: flex; align-items: center; gap: 10px; padding: 9px 13px; cursor: pointer; }
.tut-next:hover { background: var(--sl-wash); }
.tut-next-thumb { width: 56px; aspect-ratio: 16 / 9; border-radius: 5px; flex: none; }
.tut-next-text { flex: 1; min-width: 0; }
.tut-next-title { font-size: 12px; font-weight: 600; line-height: 1.3; }

@media (max-width: 860px) {
    .tut-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .tut-search { width: 100%; }
    .tut-header-right { width: 100%; }
    .tut-start { padding: 14px; }
    .tut-bar { width: 100px; }
    .tut-resume { flex-wrap: wrap; }
    .tut-resume-bar { width: 80px; }
    .tut-card { right: 8px; left: 8px; width: auto; }
    .tut-stage-play { width: 44px; height: 44px; }
    .tut-stage-cap { left: 8px; bottom: 8px; font-size: 11px; max-width: calc(100% - 16px); }
    .tut-info-btns { width: 100%; }
    .tut-start-grid, .tut-grid { grid-template-columns: minmax(0, 1fr); }
}