/* SATVIEW app.css — layout adjustments on top of the Gridtop skin */

/* Gridtop-style scrollbars for menu + modal bodies */
.sv-menu::-webkit-scrollbar, .sv-modal-body::-webkit-scrollbar { width: 10px; }
.sv-menu::-webkit-scrollbar-track, .sv-modal-body::-webkit-scrollbar-track { background: #ECECEC; }
.sv-menu::-webkit-scrollbar-thumb, .sv-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #F4F4F4, #D9D9D9);
    border: 1px solid #C4C4C4;
    border-radius: 2px;
}

/* ---------- Frames (2026-10-09): how many frames the loop holds, and Apply ---------- */
.sv-frames-in {
    width: 46px; border: 0; border-right: 1px solid var(--sv-divider); padding: 0 4px;
    font: 600 13px/1 'Afacad', sans-serif; color: var(--gt-ink); text-align: center; background: #FFFFFF;
    font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.sv-frames-in::-webkit-outer-spin-button, .sv-frames-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sv-frames-in:focus { outline: none; background: var(--gt-pale); }
.sv-apply {
    border: 0; padding: 0 9px; font: 600 11px/1 'Afacad', sans-serif; letter-spacing: 0.4px; text-transform: uppercase; color: var(--gt-ink);
    background: linear-gradient(180deg, #FFFFFF, #F0F0F0 45%, #D5D5D5); cursor: pointer;
}
.sv-apply:hover { color: #2E3050; background: linear-gradient(180deg, #FFFFFF, #EDEDED 45%, #D0D0D0); }
.sv-apply:active { background: linear-gradient(180deg, var(--sv-active-top), var(--sv-active-bot)); }

/* ---------- The timeline (2026-10-09, Matt): one section per frame, purple once loaded, #FFEC64 while on screen ---------- */
/* the timeline has a row of its own across the foot of the top bar, at every width */
.sv-topbar { flex-wrap: wrap; row-gap: 6px; }
.sv-tb-flex { display: flex; align-items: center; min-width: 0; order: 9; flex: 1 1 100%; }
.sv-tb-flex + .sv-tb-group { margin-left: auto; }   /* Export, Settings, About stay at the right */
.sv-timeline {
    flex: 1 1 auto; min-width: 120px; height: 16px; display: grid; grid-template-columns: repeat(var(--n, 32), minmax(0, 1fr)); gap: 2px;
    padding: 2px; background: linear-gradient(180deg, #c2c6d0, #d9dce3); border: 1px solid #878b99;
    box-shadow: inset 0 1px 2px rgba(29, 7, 14, 0.2), 0 1px 0 rgba(255, 255, 255, 0.8);
}
.sv-tl-seg {
    position: relative; min-width: 0; height: 100%; padding: 0; border: 0; cursor: pointer; overflow: hidden;
    background: #CFCBE4;
    transition: background-color 0.2s ease;
}
.sv-tl-seg.is-loaded { background: linear-gradient(180deg, #A99FFC, #857EB6); }
.sv-tl-seg::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: linear-gradient(180deg, #FFF7C4, #FFEC64); box-shadow: inset 0 0 0 1px rgba(170, 163, 72, 0.55);
    transition: width 0.22s ease;
}
.sv-tl-seg.is-on::after { width: 100%; }
.sv-tl-seg:hover { filter: brightness(1.08); }
.sv-tl-seg:focus-visible { outline: 2px solid var(--gt-focus); outline-offset: 1px; }

/* ---------- Inset controls (2026-10-09) ---------- */
.sv-inset-tools {
    display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: #F4F3FA; border-bottom: 1px solid var(--sv-divider);
    font-size: 10.5px; color: var(--gt-ink-soft); flex-wrap: wrap;
}
.sv-inset-btn {
    height: 18px; min-width: 18px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    font: 600 10px/1 'Afacad', sans-serif; letter-spacing: 0.4px; color: var(--gt-ink);
    background: linear-gradient(180deg, #FFFFFF, #F0F0F0 45%, #D5D5D5); border: 1px solid var(--sv-btn-stroke); border-radius: 2px;
    box-shadow: inset 1px 1px 0 var(--sv-btn-hi), inset -1px -1px 0 var(--sv-btn-lo); cursor: pointer;
}
.sv-inset-btn:hover { border-color: var(--gt-purple); }
.sv-inset-btn.is-on { background: linear-gradient(180deg, var(--sv-active-top), var(--sv-active-bot)); border-color: var(--sv-active-stroke); }
.sv-inset-prod { margin-left: 4px; }
.sv-inset-zoomval { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.sv-inset-sep { width: 1px; height: 14px; margin: 0 3px; background: var(--sv-divider); }
.sv-inset-seg { display: inline-flex; }
.sv-inset-seg .sv-inset-btn { border-radius: 0; }
.sv-inset-seg .sv-inset-btn:first-child { border-radius: 2px 0 0 2px; }
.sv-inset-seg .sv-inset-btn:last-child { border-radius: 0 2px 2px 0; }
.sv-inset-seg .sv-inset-btn + .sv-inset-btn { border-left: 0; }

/* Narrow screens: the top bar wraps, and the timeline takes a row of its own at the foot of it */

@media (max-width: 760px) {
    .sv-topbar { gap: 5px; padding: 6px 8px; }
    .sv-tb-divider { display: none; }
    .sv-stepper-name { display: none; }
    .sv-status-right { display: none; }
    .sv-dd-label { display: none; }
    .sv-step-val { min-width: 58px; }
    #btn-rock, #btn-first, #btn-last { display: none; }
    .sv-hud { font-size: 10.5px; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}