#tutorial-selection-dialog { width:min(540px,calc(100vw - 24px));height:min(1060px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);padding:0;overflow:hidden;color:var(--kit-ink,#292724);color-scheme:light; }
#tutorial-selection-dialog[open] { display:grid;grid-template-rows:64px minmax(0,1fr) auto; }
.tutorial-selection-header { position:relative;height:64px;display:grid;place-items:center;border-bottom:1px solid var(--kit-rule);padding:0 60px; }
.tutorial-selection-header .sheet-title { margin:0;padding:0;text-align:center;font-size:22px; }
.tutorial-selection-scroll { min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:0 20px;scrollbar-width:thin; }
/* Header and action rows have independent tracks, so long lesson names and two
   rewards cannot steal the launch button's space on a narrow phone. */
#tutorial-selection-dialog .tutorial-selection-row { display:grid;grid-template-columns:30px minmax(0,1fr) minmax(116px,1.3fr);column-gap:12px;row-gap:8px;align-items:center;min-height:122px;padding:14px 0;border-bottom:1px solid var(--kit-rule); }
.tutorial-selection-number { grid-column:1;grid-row:1;font:650 20px/1.2 var(--font-ui);color:var(--kit-quiet-ink,#706b63);text-align:center; }
.tutorial-selection-name { grid-column:2/-1;grid-row:1;min-width:0;font:650 18px/1.3 var(--font-ui);color:var(--kit-ink,#292724);word-break:keep-all; }
#tutorial-selection-dialog .tutorial-selection-launch { --control-kind:deck-action-ivory;grid-column:3;grid-row:2;justify-self:end;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:218px;height:74px;min-height:74px;min-width:0;margin:0;padding:9px 16px;border:0;border-image:none;border-radius:0;background:none;box-shadow:none;color:#342c20;font:650 clamp(14px,4vw,17px)/1.2 var(--font-ui);touch-action:pan-y; }
.tutorial-selection-play-icon { display:grid;place-items:center;flex:none;width:18px;height:20px; }
.tutorial-selection-play-icon>.button-icon { display:block;width:100%;height:100%; }
.tutorial-selection-play-label { min-width:0;white-space:nowrap;text-align:center; }
.tutorial-selection-launch:disabled { opacity:.35;filter:saturate(.25);cursor:default; }
.tutorial-selection-row[data-locked="true"]>.tutorial-selection-number,.tutorial-selection-row[data-locked="true"]>.tutorial-selection-name { opacity:.48; }
.tutorial-selection-rewards { grid-column:1/3;grid-row:2;display:flex;align-items:end;justify-content:flex-end;gap:8px;min-width:0; }
#tutorial-selection-dialog .tutorial-selection-rewards .reward-entry { width:52px;min-width:0;flex:none;gap:2px; }
#tutorial-selection-dialog .tutorial-selection-rewards .reward-icon { width:52px;height:52px;padding:2px; }
#tutorial-selection-dialog .tutorial-selection-rewards .reward-amount { margin:0;font-size:16px;line-height:20px; }
.tutorial-selection-footer { padding:12px 20px 20px; }
.tutorial-selection-footer button { width:100%;min-height:52px;font-size:15px; }
@media(max-width:350px) { .tutorial-selection-scroll{padding-inline:12px}#tutorial-selection-dialog .tutorial-selection-row{column-gap:8px;grid-template-columns:26px minmax(0,1fr) minmax(116px,1.3fr)}.tutorial-selection-name{font-size:16px}.tutorial-selection-rewards{gap:4px} }

/* Unavailable tutorial actions explain why when tapped; the detail setting is
   absent because lessons always show the revealed card in detail. */
#auto[aria-disabled="true"]:not(:disabled){opacity:.42;filter:saturate(.35);cursor:default}
#explain-toggle[hidden]{display:none}

#tutorial-selection-dialog{color:var(--kit-ink,#292724);color-scheme:light}

#tutorial-selection-dialog{inset:calc(var(--safe-top,0px) + 16px) calc(var(--safe-right,0px) + 12px) calc(var(--safe-bottom,0px) + 16px) calc(var(--safe-left,0px) + 12px);width:min(540px,calc(100vw - var(--safe-left,0px) - var(--safe-right,0px) - 24px));height:min(1060px,calc(100dvh - var(--safe-top,0px) - var(--safe-bottom,0px) - 32px));max-height:calc(100dvh - var(--safe-top,0px) - var(--safe-bottom,0px) - 32px);margin:auto}