/* SourceHub - "la palestra" tutorial panel (GUI/APP/components/trainingpanel.js) and its
   launcher button. Loaded only while config.isTraining() (GUI/STAFF/shell.jspf). Non-blocking
   by design (C12, design spec 2026-10-19-sourcehub-training-design.md section 5.4): the panel
   stands BESIDE the real screen, never on top of it like the tour's full-screen layer - no
   backdrop, no dimming, the real page stays fully clickable while the panel is open. */

.sh-training-launcher
{
    position: fixed; right: 1.125rem; bottom: 1.125rem; z-index: 1085;
    width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--sh-accent); color: #fff; font-size: 1.25rem;
    box-shadow: var(--sh-shadow), 0 10px 24px rgba(14, 26, 38, .25);
    display: flex; align-items: center; justify-content: center;
}
.sh-training-launcher:hover { background: var(--sh-accent-d); }
.sh-training-launcher .sh-tr-badge
{
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 10px;
    background: #fff; color: var(--sh-accent-d); font-size: .6875rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; padding: 0 .3rem; border: 2px solid var(--sh-accent);
}

.sh-training-panel
{
    position: fixed; right: 1.125rem; bottom: 1.125rem; z-index: 1086;
    width: 380px; max-width: calc(100vw - 24px); max-height: calc(100vh - 2.25rem);
    background: var(--sh-card); color: var(--sh-ink); border-radius: var(--sh-radius);
    box-shadow: var(--sh-shadow), 0 10px 30px rgba(14, 26, 38, .2);
    display: flex; flex-direction: column; overflow: hidden;
    animation: sh-tr-pop .16s ease-out;
}
@keyframes sh-tr-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.sh-tr-head
{
    display: flex; align-items: center; gap: .5rem; padding: .75rem .9rem;
    background: var(--sh-canvas); border-bottom: 1px solid var(--sh-line);
}
.sh-tr-head i.sh-tr-icon { color: var(--sh-accent); font-size: 1.05rem; }
.sh-tr-head h3 { margin: 0; font-size: .9375rem; font-weight: 700; flex: 1; min-width: 0; }
.sh-tr-head .sh-tr-sub { font-size: .75rem; color: var(--sh-ink-3); font-weight: 400; display: block; }
.sh-tr-head button
{
    border: 0; background: none; color: var(--sh-ink-3); cursor: pointer; width: 32px; height: 32px;
    border-radius: var(--sh-radius-sm); display: flex; align-items: center; justify-content: center;
}
.sh-tr-head button:hover { background: var(--sh-line-2); color: var(--sh-ink); }

.sh-tr-body { padding: .9rem; overflow-y: auto; flex: 1; }
.sh-tr-foot { padding: .625rem .9rem; border-top: 1px solid var(--sh-line); display: flex; gap: .5rem; flex-wrap: wrap; }
.sh-tr-foot .btn { cursor: pointer; }

/* --- exercise chooser --- */
.sh-tr-cards { display: flex; flex-direction: column; gap: .625rem; }
.sh-tr-card
{
    display: flex; gap: .625rem; align-items: flex-start; text-align: left; width: 100%;
    border: 1px solid var(--sh-line); border-radius: var(--sh-radius-sm); background: var(--sh-card);
    padding: .625rem .75rem; cursor: pointer;
}
.sh-tr-card:hover { border-color: var(--sh-accent); background: var(--sh-accent-l); }
.sh-tr-card i.sh-tr-card-icon
{
    width: 2rem; height: 2rem; border-radius: 50%; background: var(--sh-accent-l); color: var(--sh-accent-d);
    display: flex; align-items: center; justify-content: center; flex: none;
}
.sh-tr-card b { display: block; font-size: .84375rem; }
.sh-tr-card .sh-tr-duration { font-size: .71875rem; color: var(--sh-ink-3); font-weight: 600; }
.sh-tr-card p { margin: .2rem 0 0; font-size: .78125rem; color: var(--sh-ink-2); line-height: 1.4; }

/* --- active exercise: progress and step card --- */
.sh-tr-progress { font-size: .71875rem; font-weight: 700; color: var(--sh-accent-d); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem; }
.sh-tr-progress-bar { height: 4px; border-radius: 2px; background: var(--sh-line-2); overflow: hidden; margin-bottom: .75rem; }
.sh-tr-progress-bar > i { display: block; height: 100%; background: var(--sh-accent); transition: width .25s ease; }

.sh-tr-step h4 { margin: 0 0 .375rem; font-size: 1rem; font-weight: 700; }
.sh-tr-step p { margin: 0 0 .75rem; color: var(--sh-ink-2); line-height: 1.5; font-size: .875rem; }

.sh-tr-waiting
{
    display: flex; gap: .5rem; align-items: center; background: var(--sh-canvas); border-radius: var(--sh-radius-sm);
    padding: .5rem .625rem; font-size: .8125rem; color: var(--sh-ink-2); margin-bottom: .75rem;
}
.sh-tr-waiting i { color: var(--sh-accent); }

.sh-tr-steplist { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.sh-tr-steplist li { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--sh-ink-3); }
.sh-tr-steplist li.sh-tr-done { color: var(--sh-ink-2); }
.sh-tr-steplist li.sh-tr-current { color: var(--sh-ink); font-weight: 700; }
.sh-tr-steplist li i { width: 1.1em; text-align: center; }
.sh-tr-steplist li.sh-tr-done i { color: #1d7a3f; }
.sh-tr-steplist li.sh-tr-current i { color: var(--sh-accent); }

.sh-tr-manual-btn, .sh-tr-goto { width: 100%; }

/* --- finished --- */
.sh-tr-finished { text-align: center; padding: .5rem 0; }
.sh-tr-finished i { font-size: 2rem; color: #1d7a3f; margin-bottom: .5rem; }
.sh-tr-finished p { color: var(--sh-ink-2); font-size: .875rem; }

/* --- the highlight ring (spotlight.js#mountSpotlight) --- */
.sh-tr-ring { border: 2px solid var(--sh-accent); border-radius: var(--sh-radius-sm); box-shadow: 0 0 0 4px rgba(var(--sh-accent-rgb), .22); }

/* Phones and tablets (C12): the panel becomes a full-width bottom sheet, the launcher stays a
   round button, every touch target is at least 44px, the sheet never needs horizontal scroll. */
@media (pointer: coarse)
{
    .sh-tr-head button, .sh-tr-foot .btn, .sh-tr-card { min-height: 44px; }
}
@media (max-width: 820px)
{
    .sh-training-panel
    {
        left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%;
        border-radius: var(--sh-radius) var(--sh-radius) 0 0; max-height: 72vh;
    }
    .sh-training-launcher { right: .75rem; bottom: .75rem; }
}
@media (max-width: 575.98px)
{
    .sh-tr-foot { flex-direction: column; }
    .sh-tr-foot .btn { width: 100%; }
}