/* ============================================================
   SKELETON RIG - styles for the Rig view only.

   The view reuses the frame editor's .editor-* layout classes on
   purpose: the rail/bar/canvas-area structure, and every phone and
   tablet rule already written for it, then apply unchanged. Only the
   handful of things that differ live here.
   ============================================================ */

#rigCanvas { display: block; image-rendering: pixelated; position: relative; z-index: 1; }

/* Unlike the frame editor, the rig's overlay IS the input surface -
   joints are drawn on it and dragged on it. */
#rigOverlay { position: absolute; inset: 0; z-index: 2; cursor: crosshair; }

#rigCanvas, #rigOverlay, #rigWrap {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.rig-sel {
    height: 28px;
    max-width: 168px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--text);
    font: 600 11.5px/1 inherit;
}

.rig-name {
    width: 96px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--text);
    font: 600 11.5px/1 inherit;
}

.rig-warn {
    border: none;
    gap: 6px;
    color: var(--warn, #b45309);
    font-size: 11px;
    font-weight: 600;
}
.rig-warn .ic { flex: none; }

@media (hover: none) {
    .rig-name { min-height: 40px; font-size: 16px; }
    .rig-sel { min-height: 40px; font-size: 16px; max-width: 60vw; }
}

/* ---------- tutorial coach card -----------------------------
   It lives inside the canvas area so it can never stray over another
   view, and sits bottom-right where the puppet's feet usually are
   rather than over its head, which is what you are posing. */
/* Anchored to the view, not to the canvas area: that area is free to
   grow wider than its own column when the sprite is big, so a card
   pinned to it hangs out over the Frames panel. */
#viewRig { position: relative; }

.rigtour {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    width: min(330px, calc(100% - 20px));
    padding: 10px 12px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
}

.rigtour-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.rigtour-head b { font-size: 12.5px; line-height: 1.25; }
.rigtour-step {
    flex: none;
    padding: 2px 6px;
    border-radius: 99px;
    background: var(--accent-weak);
    color: var(--accent);
    font: 700 10.5px/1 inherit;
}
.rigtour-x {
    flex: none;
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border: none;
    border-radius: var(--radius-xs, 5px);
    background: none;
    color: var(--text-dim, #6b7280);
    cursor: pointer;
}
.rigtour-x:hover { background: var(--surface-2); color: var(--text); }

.rigtour.mini p { display: none; }
.rigtour.mini #rigTourMin { transform: rotate(180deg); }
#rigTourMin { transition: transform .15s ease; }

.rigtour p { margin: 0 0 9px; font-size: 11.5px; line-height: 1.5; color: var(--text-dim, #6b7280); }
.rigtour-foot { display: flex; align-items: center; gap: 6px; }
.rigtour-gap { flex: 1; }
.rigtour-foot .btn[disabled] { opacity: .45; pointer-events: none; }

/* The highlight has to read on a 28px toolbar button and on a slider
   alike, so it is an outline plus a halo rather than a border, which
   would shift the layout of the bar it sits in. */
.rigtour-hl {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs, 5px);
    animation: rigtour-pulse 1.6s ease-in-out infinite;
}
@keyframes rigtour-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-weak); }
    50% { box-shadow: 0 0 0 5px var(--accent-weak); }
}
@media (prefers-reduced-motion: reduce) {
    .rigtour-hl { animation: none; }
}

/* On a phone the canvas area is barely taller than the card, so pin it
   across the bottom and let the puppet keep the room above it. */
@media (max-width: 880px) {
    /* Clear of the collapsed options sheet's handle, which owns the
       bottom 42px of the view on a phone. */
    .rigtour { left: 8px; right: 8px; bottom: 50px; width: auto; padding: 8px 10px 10px; }
    .rigtour p { margin-bottom: 7px; max-height: 32vh; overflow: auto; }
}

/* ---------- saved rigs list (modal) ---------------------------
   One row per saved skeleton: what it is on the left, what you can do
   with it on the right. The list scrolls rather than growing the modal
   past the screen, since a busy library is the point of having one. */
.riglib-list { max-height: 38vh; overflow: auto; margin: 0 0 4px; }
.riglib-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; margin-bottom: 6px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.riglib-meta { flex: 1; min-width: 0; }
.riglib-meta b { display: block; font-size: 13px; }
.riglib-meta span {
    display: block; font-size: 11px; color: var(--text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.riglib-act { display: flex; gap: 6px; flex-shrink: 0; }