/* general
 * Layout: 3 left selector panels (Mounts / Creatures / Outfits) + one viewer column
 * spanning all three rows. Backgrounds rely on height:100% and flex so the dark
 * panel texture fills the full viewer height.
 * Screen sizes: see "WIDE SCREENS" (1181px and wider) and "NARROW SCREENS" below.
 */
.outfiter {
    color: #c0c0c0;
    font: 700 11px Verdana, Arial;
    line-height: 13px;
    text-align: left;
    display: grid;
    /* column / row sizes: see "WIDE SCREENS" below */
    grid-template-areas:
        "mount viewer"
        "creature viewer"
        "outfit viewer"
        "anistep anistep"
    ;
    gap: 5px;
    align-items: stretch;
}

.outfiter .mselector {
    grid-area: mount;
    height: 100%;
}

.outfiter .cselector {
    grid-area: creature;
    height: 100%;
}

.outfiter .oselector {
    grid-area: outfit;
    height: 100%;
}

.outfiter .viewer {
    grid-area: viewer;
    grid-row: 1 / 4;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Ensure the dark background fills the full height of the main viewer box */
.outfiter .viewer>.div2 {
    height: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.outfiter .viewer .omain_wrap {
    flex: 1 1 auto;
}

.outfiter .hide {
    height: 0;
    overflow: hidden;
}

.outfiter .clear {
    clear: both;
}

.outfiter label {
    cursor: pointer;
    display: block;
}

.outfiter label.sep {
    margin-top: 13px;
}

.outfiter input[type="text"],
.outfiter textarea,
.outfiter button,
.outfiter input[type="button"] {
    border-radius: 0;
    box-shadow: none;
    color: #c0c0c0;
    font-family: Verdana, Arial;
    font-weight: 700;
    outline: 0;
    text-align: center;
    vertical-align: bottom;
}

.outfiter input[type="text"][disabled],
.outfiter textarea[disabled],
.outfiter button[disabled],
.outfiter input[type="button"][disabled] {
    opacity: 0.6;
}

.outfiter input[type="text"],
.outfiter textarea {
    font-size: 9px;
    line-height: 12px;
    padding: 3px 0;
}

.outfiter button,
.outfiter input[type="button"],
.outfiter .button {
    cursor: pointer;
    display: inline-block;
    height: auto;
    line-height: 1;
}

.outfiter .no_pointer {
    cursor: auto;
}

.outfiter .nbutton {
    border: 1px solid;
    box-sizing: border-box;
    font-size: 8px;
    height: auto;
    line-height: 1;
    padding: 5px 8px 5px 8px;
}

.outfiter .download_image {
    display: block;
    margin: 8px auto 4px auto;
    width: auto;
    min-width: 120px;
    max-width: 160px;
    text-align: center;
}

/* Advanced save options (APNG / GIF / 4x Rotate / All Addons) — hidden until toggled */
.outfiter .save_advanced_opts {
    display: none;
}

.outfiter .save_advanced_opts.is-visible {
    display: block;
}

/* 4x Rotate checkbox — sits with Save-as / Download controls */
.outfiter .rotate4x_wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 4px auto 2px auto;
    text-align: left;
    max-width: 160px;
    box-sizing: border-box;
}

.outfiter .rotate4x_wrap .help_label {
    flex: 0 1 auto;
    margin-right: 4px;
}

.outfiter .rotate4x_wrap .help_q {
    margin-left: auto;
    /* pin 12x12 Help_Icon to the far right of the box */
}

.outfiter .rotate4x_wrap.disabled {
    color: #707070;
}

.outfiter .all_addons_wrap {
    margin-top: 2px;
}

/* Center the Save-as block (radios + download) under its title */
.outfiter .ot-card .divtitle {
    text-align: center;
}

.outfiter .save_format_wrap {
    text-align: center;
    margin-top: 4px;
}

.outfiter .save_format_wrap .divcheck {
    display: inline-block;
    margin: 2px 8px;
    text-align: left;
}

.outfiter .sep_line {
    border-bottom: 1px solid #757575;
    border-top: 1px solid #2a2a2a;
    margin: 0 0 5px 0;
}

.outfiter .nbutton,
.outfiter .outer_border,
.outfiter .outer_border_no_bottom,
.outfiter .dcolor_table * {
    border-color: #757575 #2a2a2a #2a2a2a #757575;
}

.outfiter .radio_list_out,
.outfiter .omain_wrap,
.outfiter .divcheck,
.outfiter .body_main_div,
.outfiter .oitem_select_name,
.outfiter input[type="text"],
.outfiter textarea,
.outfiter .nbutton:active,
.outfiter .color_table_d_sel,
.outfiter .anistep_step {
    border: 1px solid;
    border-color: #2a2a2a #757575 #757575 #2a2a2a;
}

.outfiter input[type="text"] {
    border: 1px solid !important;
    border-color: #2a2a2a #757575 #757575 #2a2a2a !important;
}

.outfiter.outfiter_loading label,
.outfiter.outfiter_loading button,
.outfiter.outfiter_loading input[type="button"],
.outfiter.outfiter_loading .button {
    cursor: default;
}

/* radio_list_wrap */
.outfiter .radio_list_wrap {
    width: 246px;
    height: 100%;
    box-sizing: border-box;
}

.outfiter .radio_list_wrap .sep_line {
    margin-top: 5px;
}

.outfiter .radio_list_wrap .sep_line+.list_el {
    margin-top: 0;
}

.outfiter .radio_list_cont {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.outfiter .radio_list_out {
    font-size: 10px;
    line-height: 10px;
    height: 219px;
    flex: 1 1 auto;
    min-height: 219px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 0 3px 0;
}

.outfiter .list_el {
    padding: 5px 3px 1px 3px;
    position: relative;
}

.list_el:hover {
    background-color: rgba(255, 255, 255, 0.20);
}

.outfiter .list_el:first-child {
    margin-top: 0;
}

.outfiter .list_el .t {
    display: inline-block;
    max-width: calc(100% - 24px);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outfiter input[type="text"].omsearch {
    text-align: left;
    padding-left: 0.5em;
    top: 0;
    position: sticky;
    z-index: 100;
    width: 100%;
}

/* containers */
.outfiter td {
    vertical-align: top;
}

.outfiter .outer_border,
.outfiter .outer_border_no_bottom {
    border-style: solid;
    border-width: 2px;
    box-sizing: border-box;
    height: 100%;
}

.outfiter .outer_border {
    /* full raised frame on all four sides (matches main outfitter box) */
    border-width: 2px;
    border-style: solid;
    border-color: #757575 #2a2a2a #2a2a2a #757575;
}

.outfiter .outer_border_no_bottom {
    border-bottom: 0;
}

/* Left selector panels (Mounts / Creatures / Outfits) — same finished box as viewer */
.outfiter .mselector.outer_border,
.outfiter .cselector.outer_border,
.outfiter .oselector.outer_border,
.outfiter .viewer.outer_border {
    border-style: solid;
    border-width: 2px;
    border-color: #757575 #2a2a2a #2a2a2a #757575;
    overflow: hidden;
}

.outfiter .div2,
.outfiter .div2_no_padding {
    padding: 0 1px 1px 1px;
    box-sizing: border-box;
}

.outfiter .div2_no_padding {
    padding: 0 1px 1px 1px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.outfiter .div2_title {
    color: #909090;
    line-height: 14px;
    text-align: center;
    flex: 0 0 auto;
}

.outfiter .omain_wrap {
    border-style: solid;
    border-width: 1px;
    box-sizing: content-box;
    padding: 12px 9px 1px 10px;
    width: 860px;
}

.outfiter .omain_wrap_left,
.outfiter .omain_wrap_right {
    box-sizing: border-box;
    float: left;
    padding: 0 3px 0 2px;
    width: 197px;
}

.outfiter .omain_wrap_right {
    width: 660px;
}

.outfiter .omain_cont_left {
    box-sizing: border-box;
}

.outfiter .omain_cont_left+.omain_cont_left {
    padding: 6px 0 0 0;
}

/* inner */
.outfiter .divtitle {
    margin: 0 0 5px 0;
    text-align: center;
}

.outfiter .divcheck {
    color: inherit;
    line-height: 12px;
    margin: 0 0 5px 0;
    padding: 4px 3px 4px 3px;
    position: relative;
    vertical-align: baseline;
}

.outfiter .divcheck.disabled {
    color: #707070;
}

.outfiter .darkchk,
.outfiter .darkrad {
    cursor: pointer;
    height: 1px;
    margin: 0;
    opacity: 0.01;
    position: absolute;
    vertical-align: bottom;
    width: 1px;
}

.outfiter .darkchk+.darkchk_in,
.outfiter .darkrad+.darkrad_in {
    background-color: transparent;
    background-position: left top;
    display: inline-block;
    height: 12px;
    margin: 0 4px 0 0;
    vertical-align: bottom;
    width: 12px;
}

.outfiter .darkchk:checked+.darkchk_in {
    background-position: left -12px;
}

.outfiter .darkchk:checked:disabled+.darkchk_in {
    background-position: left -24px;
}

.outfiter .darkrad+.darkrad_in {
    background-position: right top;
    vertical-align: middle;
}

.outfiter .darkrad:checked+.darkrad_in {
    background-position: right -12px;
}

.outfiter .darkrad:checked:disabled+.darkrad_in {
    background-position: right -24px;
}

/* Expanded outfit preview (2x original ~320x192 → 640x384; min matches floor ~318x188) */
.outfiter .body_main_div {
    box-sizing: border-box;
    width: 656px;
    max-width: 100%;
    min-width: 318px;
    height: 400px;
    min-height: 188px;
    margin: 0 0 5px 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: center;
}

.outfiter .body_main {
    left: 50%;
    position: absolute;
    top: 125px;
    transform: translate(-50%, 0);
    vertical-align: bottom;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    touch-action: none;
}

.outfiter .body_main.body_main_with_floor {
    top: 0;
}

.outfiter .body_main.is-zoomed {
    cursor: grab;
}

.outfiter .body_main.is-dragging {
    cursor: grabbing;
}

.outfiter .leftb,
.outfiter .rightb {
    background-color: #757575;
    border: 0;
    height: 20px;
    width: 20px;
}

.outfiter .leftb[disabled],
.outfiter .rightb[disabled] {
    opacity: 0.6;
}

.outfiter .leftb {
    background-position: left top;
}

.outfiter .leftb:active {
    background-position: right top;
}

.outfiter .rightb {
    background-position: left -20px;
}

.outfiter .rightb:active {
    background-position: right -20px;
}

.outfiter .tleftb {
    background-position: left -40px;
    bottom: 1px;
    left: 1px;
    position: absolute;
}

.outfiter .tleftb:active {
    background-position: right -40px;
}

.outfiter .trightb {
    background-position: left -60px;
    bottom: 1px;
    position: absolute;
    right: 1px;
}

.outfiter .trightb:active {
    background-position: right -60px;
}

/* Zoom controls at the top of the outfit preview (20x20 base64 icons) */
.outfiter .body_main_div .zoom_btn {
    position: absolute;
    top: 1px;
    z-index: 3;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border: 1px solid;
    border-color: #757575 #2a2a2a #2a2a2a #757575;
    background-color: #464747;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    cursor: pointer;
    font-size: 11px;
    line-height: 20px;
    color: #c0c0c0;
    text-align: center;
}

.outfiter .body_main_div .zoom_btn:active {
    border-color: #2a2a2a #757575 #757575 #2a2a2a;
}

.outfiter .body_main_div .zoom_btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

.outfiter .body_main_div .zoomout {
    left: 1px;
}

.outfiter .body_main_div .zoomreset {
    left: 50%;
    transform: translateX(-50%);
}

.outfiter .body_main_div .zoomin {
    right: 1px;
}

.outfiter .body_main {
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

.outfiter .oitem_select_cont {
    display: block;
    margin: 0 0 5px 0;
}

.outfiter .oitem_select_cont .leftb {
    float: left;
    margin: 1px 0;
}

.outfiter .oitem_select_cont .rightb {
    float: right;
    margin: 1px 0;
}

.outfiter .oitem_select_name {
    display: block;
    line-height: 12px;
    margin: 0 25px;
    padding: 4px 0;
    text-align: center;
}

.outfiter .colourise_cont {
    margin: 0 0 5px 0;
    text-align: center;
}

.outfiter .colourise_title {
    float: left;
    padding: 4px 0 3px 0;
    vertical-align: middle;
}

/* Stacked action buttons: Copy → Random Colours → Random Outfit */
.outfiter .colourise_btns {
    float: right;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    margin: 0 0 4px 0;
}

.outfiter .colourise_btns .nbutton {
    min-width: 110px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.outfiter .colourise_copy {
    /* kept for any legacy float rules; layout now via .colourise_btns */
    min-width: 89px;
}

.outfiter .colourise_item {
    display: inline-block;
    padding: 2px 2px 2px 3px;
    position: relative;
    white-space: nowrap;
}

.outfiter .colourise_item.disabled {
    color: #707070;
}

.outfiter .colourise_item .t {
    display: inline-block;
    vertical-align: middle;
}

.outfiter .colors_cont {
    margin: 0 auto 5px auto;
    width: 254px;
    position: relative;
}

.outfiter .color_tab {
    background: none;
    border: 0;
    box-sizing: border-box;
    float: left;
    font-size: 8px;
    line-height: 10px;
    margin: 0 0 0 -1px;
    padding: 0;
    position: relative;
    width: 64px;
    z-index: 0;
}

.outfiter .color_tab:first-child {
    margin-left: 0;
}

.outfiter .color_tab:nth-child(2) {
    z-index: 3;
}

.outfiter .color_tab:nth-child(3) {
    z-index: 2;
}

.outfiter .color_tab:nth-child(4) {
    z-index: 1;
}

.outfiter .color_tab.sel {
    z-index: 10;
}

.outfiter .color_tab:disabled {
    opacity: 1;
}

.outfiter .color_tab_in {
    box-sizing: border-box;
    display: block;
    padding: 2px 0 4px 0;
    width: 100%;
}

.outfiter .dcolor_table_out {
    box-sizing: content-box;
    margin: -2px 0 0 0;
    padding: 2px 1px 1px 1px;
    position: relative;
    width: 248px;
    z-index: 5;
}

.outfiter .dcolor_table {
    line-height: 8px;
    position: relative;
    width: 247px;
    z-index: 5;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    grid-gap: 0px;
}

.outfiter .dcolor_table * {
    border-style: solid;
    border-width: 2px;
    display: inline-block;
    height: 8px;
    width: 8px;
    padding: 0px 0px 1px 1px;
}

.outfiter .color_table_d_sel {
    position: relative;
}

.outfiter .color_table_d_sel::after {
    border: 1px solid #fff;
    content: ' ';
    height: 12px;
    left: -3px;
    position: absolute;
    top: -3px;
    width: 12px;
}

.outfiter .charn_cont {
    margin: 0 auto 5px auto;
    width: auto;
    max-width: 100%;
    text-align: center;
    /* centered under the color selector column */
}

.outfiter .charn_cont .charn_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.outfiter .charn_title {
    float: none;
    display: inline-block;
    padding: 0;
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
    top: -3px;
}

.outfiter .charn {
    float: none;
    box-sizing: border-box;
    width: 184px;
    max-width: 100%;
    margin: 0;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.outfiter .use_name,
.outfiter .clear_name {
    float: none;
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

.outfiter .url_input_cont,
.outfiter .template_code_code_cont {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: 0 0 5px 0;
    width: 100%;
    box-sizing: border-box;
}

.outfiter .template_code_code_cont:empty {
    display: none;
    margin: 0;
}

.outfiter .url_input_text {
    float: none;
    flex: 0 0 auto;
    line-height: 18px;
    padding: 3px 0;
    white-space: nowrap;
}

.outfiter .url_input_out,
.outfiter .template_code_out {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    margin: 0 4px 0 0;
}

.outfiter .url_input,
.outfiter .template_code_code {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: 0 0 2px 0;
    width: 100%;
    box-sizing: border-box;
}

.outfiter .template_code_code {
    display: block;
    margin: 0;
    max-width: none;
    min-height: 28px;
    padding: 3px;
    font-size: 9px;
    line-height: 12px;
}

.outfiter .copy_btn {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0 0;
    padding: 0;
    border: 1px solid;
    border-color: #757575 #2a2a2a #2a2a2a #757575;
    background-color: #464747;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 12px 12px;
    cursor: pointer;
    vertical-align: top;
}

.outfiter .copy_btn:active {
    border-color: #2a2a2a #757575 #757575 #2a2a2a;
}

.outfiter .anistep_panel {
    grid-area: anistep;
    display: none;
    width: 100%;
    box-sizing: border-box;
}

.outfiter .anistep_panel.is-visible {
    display: block;
}

.outfiter .anistep_panel>.div2 {
    padding: 0 1px 6px 1px;
    box-sizing: border-box;
}

.outfiter .anistep_step_cont {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: auto;
    gap: 6px;
    justify-items: center;
    align-items: center;
    margin: 4px 8px 4px 8px;
    max-width: 100%;
    box-sizing: border-box;
}

.outfiter .anistep_step {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 128px;
    min-height: 64px;
    padding: 4px;
    border: 1px solid;
    border-color: #2a2a2a #757575 #757575 #2a2a2a;
    background: #464747;
}

.outfiter .anistep_step img {
    display: block;
    max-width: 100%;
    height: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

/* let the main viewer grow when template / steps are shown */
.outfiter .viewer.outer_border {
    overflow: visible;
}

.outfiter .viewer {
    height: auto;
    min-height: 100%;
    align-self: start;
}

.outfiter .viewer>.div2 {
    height: auto;
    min-height: 100%;
}

.outfiter_template {
    background: none !important;
}

.outfiter {
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* Help icon (12x12 Help_Icon) next to Save as / 4x Rotate / All Addons.
 * Tooltips are rendered in a floating .outfiter_help_tip element (JS) so they are
 * not clipped by parent overflow:hidden on .outer_border / .help_q.
 */
.outfiter .help_q {
    display: inline-block;
    position: relative;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    /* background-image set via injected Help_Icon in JS */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 12px 12px;
    font-size: 0;
    line-height: 0;
    color: transparent;
    /* Do NOT set overflow:hidden here — it would clip any pseudo-element tips */
    overflow: visible;
    vertical-align: middle;
    cursor: help;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}

.outfiter .help_q:hover,
.outfiter .help_q:focus,
.outfiter .help_q.is-open {
    outline: 1px solid #c0c0c0;
    outline-offset: 1px;
    filter: brightness(1.25);
}

.outfiter .divtitle .help_q {
    margin-left: 6px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Floating tooltip (appended to body by JS; survives parent overflow clipping) */
.outfiter_help_tip {
    position: fixed;
    z-index: 100000;
    max-width: min(240px, 70vw);
    width: max-content;
    padding: 8px 10px;
    border-radius: 4px;
    background: #1e1e1e;
    border: 1px solid #6a6a6a;
    color: #f0f0f0;
    font: normal 11px/1.35 Verdana, Arial, sans-serif;
    text-align: left;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}

.outfiter_help_tip.is-visible {
    opacity: 1;
    visibility: visible;
}
/* Status line under the preview (load errors, "Link copied", ...). Empty = hidden. */
.outfiter .outfiter_status {
    margin: 0 0 5px 0;
    padding: 4px 6px;
    text-align: center;
    color: #d8d8d8;
    font-weight: 700;
}

.outfiter .outfiter_status:empty {
    display: none;
}

.outfiter .outfiter_status.is-error {
    color: #ffb4a8;
}

/* "No matches" message shown inside a list when the search finds nothing */
.outfiter .omsearch_empty {
    padding: 8px 6px;
    color: #a0a0a0;
    text-align: center;
}

/* ---------------------------------------------------------------------------
 * Interface images (images/ui/). These rules used to be injected by
 * outfitter.js after this stylesheet, so they stay at the end of the file to
 * keep the same priority over the rules above.
 * ------------------------------------------------------------------------- */
.outfiter .leftb,
.outfiter .rightb {
    background-image: url('../images/ui/arrow-buttons.png');
}

.outfiter .darkchk_in,
.outfiter .darkrad_in {
    background-image: url('../images/ui/checkbox-radio.png');
}

.outfiter .dark_input,
.outfiter .div2,
.outfiter .div2_no_padding {
    background: #383839 url('../images/ui/panel-dark.png') repeat;
}

.outfiter .template_code_code,
.outfiter .template_code_code[disabled]:active,
.outfiter .anistep_step,
.outfiter .color_tab,
.outfiter .color_tab[disabled]:active,
.outfiter .nbutton,
.outfiter .radio_list_out,
.outfiter .omain_wrap {
    background: #464747 url('../images/ui/panel-light.png') repeat;
}

.outfiter .body_main_div .zoomin,
.outfiter .body_main_div .zoomout,
.outfiter .body_main_div .zoomreset {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
}

.outfiter .body_main_div .zoomin {
    background-image: url('../images/ui/zoom-in.png');
}

.outfiter .body_main_div .zoomout {
    background-image: url('../images/ui/zoom-out.png');
}

.outfiter .body_main_div .zoomreset {
    background-image: url('../images/ui/zoom-reset.png');
}

.outfiter .help_q,
.outfiter .copy_btn {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 12px 12px;
}

.outfiter .help_q {
    background-image: url('../images/ui/help.png');
}

.outfiter .copy_btn {
    background-image: url('../images/ui/copy.png');
}

/* ---------------------------------------------------------------------------
 * Accessibility (all screen sizes)
 * ------------------------------------------------------------------------- */

/* List rows alternate between two greys. Both pass WCAG AA contrast (4.5:1)
 * on the panel texture; the old darker grey (#8F8F8F) only reached 2.9:1. */
.outfiter .list_el {
    color: #dedede;
}

.outfiter .list_el.list_el_alt {
    color: #bababa;
}

.outfiter .div2_title {
    color: #b4b4b4;
}

/* Placeholder text ("Search", "Name"): the browser default grey reached only
 * 2.5:1 on the dark fields; this one 4.8:1. */
.outfiter input::placeholder {
    color: #a6a6a6;
    opacity: 1;
}

/* Hover highlight only for devices that can hover (no "stuck" highlight after a tap). */
.list_el:hover {
    background-color: transparent;
}

@media (hover: hover) {
    .list_el:hover {
        background-color: rgba(255, 255, 255, 0.20);
    }
}

/* Visible keyboard focus. :focus-visible only shows for keyboard use, so mouse
 * users see the same interface as before. The real checkboxes/radios are hidden,
 * so their label shows the focus ring instead. */
.outfiter button:focus-visible,
.outfiter input[type="text"]:focus-visible,
.outfiter textarea:focus-visible,
.outfiter .help_q:focus-visible,
.outfiter .dcolor_table div:focus-visible,
.outfiter .divcheck:has(input:focus-visible),
.outfiter .colourise_item:has(input:focus-visible),
.outfiter .list_el:has(input:focus-visible) {
    outline: 2px solid #f0c040;
    outline-offset: 1px;
}

.outfiter .dcolor_table div:focus-visible {
    position: relative;
    z-index: 6;
}

/* Only block page scrolling on the preview while the sprite can actually be
 * dragged (it is bigger than the preview box). */
.outfiter .body_main {
    touch-action: auto;
}

.outfiter .body_main.is-pannable {
    touch-action: none;
}

/* Buttons react immediately on touch screens (no double-tap-to-zoom delay). */
.outfiter button,
.outfiter label {
    touch-action: manipulation;
}

/* The list switcher is only used in the narrow layout below. */
.outfiter .list_tabs {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .outfiter *,
    .outfiter_help_tip {
        transition: none !important;
    }
}

/* ===========================================================================
 * WIDE SCREENS (1181px and wider)
 * ---------------------------------------------------------------------------
 * The Outfitter grows with the window up to a maximum size (width: see
 * #outfiter_container in css/page.css; height: --outfiter-max-h below):
 *
 *   lists      | side column        | main column (centred, at most
 *   (stacked,  | options            |   --outfiter-preview-max-w wide)
 *   sharing    | colours            | preview (at most --outfiter-preview-max-h)
 *   the height)|                    | outfit / mount / creature, name
 *              | link and template code across the bottom
 *
 * Several rules above still carry the sizes of the original fixed 1135px
 * layout (e.g. the 656 x 400 preview); the ones here replace them on wide
 * screens. Nothing here applies to narrow screens.
 * ========================================================================= */
@media (min-width: 1181px) {
    .outfiter {
        /* Largest preview box. Every sprite is a 64 x 64px frame (the floor scene
           159 x 95px), drawn at whole-number zoom steps (outfitter.js; zoom 1 = 2x,
           zoom 2 = 4x, zoom 3 = 6x the original pixels):
           - 720px wide: the floor scene at zoom 2 (636 x 380px) plus room for the
             corner buttons;
           - 540px high: a sprite at zoom 3 (384px) plus the button rows above
             and below it (2 x 36px), with some air.
           The box shrinks with the window; below about 456 x 400px the sprite
           is shown at zoom 2 (256px), and narrow screens use their own sizes. */
        --outfiter-preview-max-w: 720px;
        --outfiter-preview-max-h: 540px;
        /* the Outfitter stops growing taller than this (the lists would only get
           longer, and the preview has stopped growing well before) */
        --outfiter-max-h: 820px;
        grid-template-columns: clamp(250px, 17vw, 320px) minmax(0, 1fr);
        grid-template-rows: repeat(3, minmax(200px, 1fr)) auto;
        /* fill the window up to --outfiter-max-h: its height minus header, footer,
           the page padding (2 x --page-pad-y) and the container's padding and
           border (2 x 8px). A min-height, not a stretching flex box: that made the
           browser lay out all list rows twice per redraw. */
        min-height: min(var(--outfiter-max-h), calc(100vh - var(--page-header-h, 82px) - var(--page-footer-h, 68px) - 2 * var(--page-pad-y, 25px) - 16px));
    }

    /* --- lists: fill their share of the height -------------------------- */
    .outfiter .radio_list_wrap {
        width: 100%;
    }

    .outfiter .radio_list_out {
        height: 0;
        min-height: 0;
        flex: 1 1 0;
        font-size: 11px;
        line-height: 13px;
    }

    .outfiter .list_el {
        padding: 4px 4px 3px 4px;
    }

    .outfiter input[type="text"].omsearch {
        font-size: 11px;
        line-height: 14px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* --- viewer: side column + main column ------------------------------ */
    .outfiter .omain_wrap {
        width: auto;
        box-sizing: border-box;
        padding: 10px;
        display: grid;
        grid-template-columns: clamp(300px, 20vw, 360px) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto auto;
        gap: 8px 12px;
    }

    .outfiter .omain_wrap > .clear {
        display: none;
    }

    .outfiter .omain_wrap_left,
    .outfiter .omain_wrap_right,
    .outfiter .omain_cont_right {
        float: none;
        width: auto;
        min-width: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .outfiter .omain_wrap_left {
        grid-area: 1 / 1;
        gap: 10px;
    }

    .outfiter .omain_wrap_right {
        grid-area: 1 / 2;
    }

    /* preview, outfit / mount / creature and name: one block of at most the
       preview's width, centred in the main column; its top lines up with the
       side column */
    .outfiter .omain_cont_right {
        flex: 1 1 auto;
        width: 100%;
        max-width: var(--outfiter-preview-max-w);
        margin: 0 auto;
    }

    .outfiter .url_input_cont,
    .outfiter .template_code_code_cont {
        grid-column: 1 / -1;
        margin: 0;
    }

    /* --- options: Configure next to Preview, Extra underneath ------------- */
    .outfiter .omain_opts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
        align-items: start;
    }

    .outfiter .omain_cont_left:nth-child(3) {
        order: -1;
    }

    .outfiter .omain_cont_left + .omain_cont_left {
        padding: 0;
    }

    .outfiter .omain_cont_left:nth-child(2) {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 8px;
    }

    .outfiter .omain_cont_left:nth-child(2) > .divtitle,
    .outfiter .omain_cont_left:nth-child(2) > label:has(.show_advanced),
    .outfiter .omain_cont_left:nth-child(2) > .save_advanced_opts,
    .outfiter .omain_cont_left:nth-child(2) > .download_image {
        grid-column: 1 / -1;
    }

    .outfiter .save_advanced_opts.is-visible {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 8px;
    }

    .outfiter .save_advanced_opts > .divtitle,
    .outfiter .save_advanced_opts > .rotate4x_wrap {
        grid-column: 1 / -1;
    }

    .outfiter .rotate4x_wrap {
        max-width: none;
        margin: 0 0 5px 0;
    }

    .outfiter .divcheck {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .outfiter .nbutton {
        font-size: 10px;
        padding: 6px 10px;
    }

    .outfiter .download_image {
        width: 100%;
        max-width: none;
        margin: 2px 0 0 0;
        padding: 8px 10px;
        font-size: 11px;
    }

    /* --- colours ---------------------------------------------------------- */
    .outfiter .colourise_cont {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        margin: 0;
        text-align: left;
    }

    .outfiter .colourise_cont > .clear {
        display: none;
    }

    .outfiter .colourise_title {
        float: none;
        padding: 0;
    }

    .outfiter .colourise_btns {
        float: none;
        order: 5;
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        margin: 0;
    }

    .outfiter .colourise_btns .nbutton {
        flex: 1 1 30%;
        width: auto;
        min-width: 0;
        padding: 6px 4px;
    }

    .outfiter .colors_cont {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 0;
    }

    .outfiter .color_tab {
        float: none;
        flex: 1 1 20%;
        width: auto;
        min-width: 0;
        font-size: 10px;
        line-height: 12px;
    }

    .outfiter .color_tab_in {
        padding: 4px 0 5px 0;
    }

    .outfiter .dcolor_table_out {
        flex: 1 1 100%;
        width: auto;
        height: auto;
        box-sizing: border-box;
    }

    .outfiter .dcolor_table {
        width: 100%;
        grid-template-columns: repeat(19, 1fr);
        line-height: 0;
    }

    .outfiter .dcolor_table * {
        width: auto;
        height: auto;
        aspect-ratio: 1;
        padding: 0;
        border-width: 1px;
    }

    .outfiter .color_table_d_sel::after {
        width: auto;
        height: auto;
        inset: -3px;
        border-width: 2px;
    }

    /* --- preview: grows with the room it gets, up to its maximum ----------- */
    .outfiter .body_main_div {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 320px;
        max-height: var(--outfiter-preview-max-h);
    }

    /* centre the sprite (its height is set by outfitter.js) */
    .outfiter .body_main,
    .outfiter .body_main.body_main_with_floor {
        top: max(0px, calc(50% - var(--outfiter-img-h, 128px) / 2));
    }

    .outfiter .body_main_div .zoom_btn {
        width: 30px;
        height: 30px;
        top: 4px;
    }

    .outfiter .body_main_div .zoomout {
        left: 4px;
    }

    .outfiter .body_main_div .zoomin {
        right: 4px;
    }

    .outfiter .tleftb {
        left: 4px;
        bottom: 4px;
    }

    .outfiter .trightb {
        right: 4px;
        bottom: 4px;
    }

    .outfiter .oitem_select_name {
        font-size: 12px;
        line-height: 14px;
    }

    /* --- name and link ------------------------------------------------------ */
    .outfiter .charn_cont {
        margin: 0;
    }

    .outfiter .charn {
        width: 240px;
    }

    .outfiter input[type="text"].charn,
    .outfiter input[type="text"].url_input {
        font-size: 11px;
        line-height: 14px;
    }
}

/* Wide and tall screens (e.g. 1920 x 1080): there is room to show the options in
 * one column, in their original order, so the side column is filled as well. */
@media (min-width: 1181px) and (min-height: 1000px) {
    .outfiter .omain_opts {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .outfiter .omain_cont_left:nth-child(3) {
        order: 0;
    }

    .outfiter .omain_cont_left:nth-child(2),
    .outfiter .save_advanced_opts.is-visible {
        grid-template-columns: 1fr;
    }

    .outfiter .divcheck {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* ===========================================================================
 * NARROW SCREENS (phones, tablets, small or zoomed-in windows)
 * ---------------------------------------------------------------------------
 * Below 1181px the desktop layout (lists, options and preview side by side)
 * no longer fits. The same elements are then shown in one column:
 *
 *     preview -> outfit/mount/creature arrows -> list (one at a time, with
 *     tabs) -> options -> colours -> name -> link -> animation steps
 *
 * "display: contents" removes the viewer's wrapper boxes so their children
 * can be reordered with "order". Nothing here applies to the desktop layout.
 * The breakpoint is repeated in js/outfitter.js (outfiter_compact_query).
 * ========================================================================= */
@media (max-width: 1180px) {
    .outfiter {
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-size: 12px;
        line-height: 16px;
    }

    /* unwrap the viewer so its parts can be ordered individually */
    .outfiter .viewer,
    .outfiter .viewer > .div2,
    .outfiter .omain_wrap,
    .outfiter .omain_wrap_left,
    .outfiter .omain_wrap_right,
    .outfiter .omain_cont_right {
        display: contents;
    }

    .outfiter .viewer > .div2 > .div2_title,
    .outfiter .clear {
        display: none;
    }

    .outfiter .body_main_div { order: 10; }
    .outfiter .outfiter_status { order: 11; }
    .outfiter .oitem_select_cont { order: 12; }
    .outfiter .list_tabs { order: 20; }
    .outfiter .radio_list_wrap { order: 21; }
    .outfiter .omain_opts { order: 30; }
    .outfiter .colourise_cont { order: 40; }
    .outfiter .colors_cont { order: 41; }
    .outfiter .charn_cont { order: 50; }
    .outfiter .url_input_cont { order: 60; }
    .outfiter .template_code_code_cont { order: 61; }
    .outfiter .anistep_panel { order: 70; }
    .outfiter .hide_canvas { order: 99; position: absolute; width: 0; overflow: hidden; }

    /* --- preview ------------------------------------------------------- */
    .outfiter .body_main_div {
        width: 100%;
        min-width: 0;
        /* at least 260px so the default 2x sprite (256px) is never cut off */
        height: clamp(260px, min(78vw, 62vh), 420px);
        min-height: 0;
        margin: 0;
        background: #464747 url('../images/ui/panel-light.png') repeat;
    }

    /* centre the sprite vertically (its height is set by outfitter.js) */
    .outfiter .body_main,
    .outfiter .body_main.body_main_with_floor {
        top: max(0px, calc(50% - var(--outfiter-img-h, 128px) / 2));
    }

    .outfiter .body_main_div .zoom_btn {
        width: 44px;
        height: 44px;
        top: 4px;
        background-size: 28px 28px;
    }

    .outfiter .body_main_div .zoomout { left: 4px; }
    .outfiter .body_main_div .zoomin { right: 4px; }

    /* arrow buttons: 44px touch area, the 20px pixel-art arrow drawn at 2x */
    .outfiter .leftb,
    .outfiter .rightb {
        position: relative;
        width: 44px;
        height: 44px;
        background: transparent none;
    }

    .outfiter .leftb::before,
    .outfiter .rightb::before {
        content: '';
        position: absolute;
        left: 2px;
        top: 2px;
        width: 20px;
        height: 20px;
        background: #757575 url('../images/ui/arrow-buttons.png') no-repeat;
        transform: scale(2);
        transform-origin: 0 0;
        image-rendering: pixelated;
    }

    .outfiter .leftb::before { background-position: left top; }
    .outfiter .leftb:active::before { background-position: right top; }
    .outfiter .rightb::before { background-position: left -20px; }
    .outfiter .rightb:active::before { background-position: right -20px; }
    .outfiter .tleftb::before { background-position: left -40px; }
    .outfiter .tleftb:active::before { background-position: right -40px; }
    .outfiter .trightb::before { background-position: left -60px; }
    .outfiter .trightb:active::before { background-position: right -60px; }

    /* the rotate buttons sit in the bottom corners of the preview */
    .outfiter .tleftb,
    .outfiter .trightb {
        position: absolute;
        bottom: 4px;
    }

    .outfiter .tleftb { left: 4px; }
    .outfiter .trightb { right: 4px; }

    .outfiter .leftb[disabled]::before,
    .outfiter .rightb[disabled]::before {
        opacity: 0.6;
    }

    .outfiter .outfiter_status {
        margin: 0;
    }

    /* --- selected outfit / mount / creature ----------------------------- */
    .outfiter .oitem_select_cont {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
    }

    .outfiter .oitem_select_cont .leftb,
    .outfiter .oitem_select_cont .rightb {
        float: none;
        flex: 0 0 auto;
        margin: 0;
    }

    .outfiter .oitem_select_cont .rightb {
        order: 2;
    }

    .outfiter .oitem_select_name {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 12px 6px;
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    /* --- lists: one at a time, chosen with the tabs ------------------- */
    .outfiter .list_tabs {
        display: flex;
        gap: 4px;
    }

    .outfiter .list_tab {
        flex: 1 1 0;
        min-height: 44px;
        padding: 0 4px;
        font-size: 13px;
        border: 2px solid;
        border-color: #757575 #2a2a2a #2a2a2a #757575;
        background: #464747 url('../images/ui/panel-light.png') repeat;
    }

    .outfiter .list_tab[aria-pressed="true"] {
        border-color: #2a2a2a #757575 #757575 #2a2a2a;
        background: #2f2f30;
        color: #ffffff;
    }

    .outfiter .radio_list_wrap {
        display: none;
        width: 100%;
        height: auto;
    }

    /* the tab above already names the list */
    .outfiter .radio_list_wrap .div2_title {
        display: none;
    }

    .outfiter.show-list-oselector .oselector,
    .outfiter.show-list-mselector .mselector,
    .outfiter.show-list-cselector .cselector {
        display: block;
    }

    .outfiter .radio_list_out {
        height: min(52vh, 420px);
        min-height: 220px;
        font-size: 13px;
        line-height: 16px;
        overscroll-behavior: contain;
    }

    .outfiter .list_el {
        display: flex;
        align-items: center;
        min-height: 40px;
        padding: 4px 8px;
        box-sizing: border-box;
    }

    .outfiter .list_el .t {
        flex: 1 1 auto;
        max-width: none;
    }

    .outfiter input[type="text"].omsearch {
        min-height: 44px;
        padding-left: 10px;
    }

    /* --- options (Preview / Extra / Configure) ------------------------ */
    .outfiter .omain_opts {
        padding: 8px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px 12px;
        align-items: start;
        border: 1px solid;
        border-color: #2a2a2a #757575 #757575 #2a2a2a;
        background: #464747 url('../images/ui/panel-light.png') repeat;
    }

    .outfiter .omain_cont_left + .omain_cont_left {
        padding: 0;
    }

    .outfiter .divcheck {
        display: flex;
        align-items: center;
        min-height: 40px;
        margin: 0 0 4px 0;
        padding: 4px 8px;
        line-height: 16px;
        box-sizing: border-box;
    }

    .outfiter .darkchk + .darkchk_in,
    .outfiter .darkrad + .darkrad_in {
        flex: 0 0 auto;
        margin-right: 10px;
        transform: scale(1.5);
        image-rendering: pixelated;
    }

    .outfiter .rotate4x_wrap {
        max-width: none;
    }

    .outfiter .help_q {
        width: 32px;
        height: 32px;
        background-size: 16px 16px;
    }

    .outfiter .nbutton {
        min-height: 44px;
        padding: 6px 12px;
        font-size: 12px;
    }

    .outfiter .download_image {
        width: 100%;
        max-width: none;
    }

    /* --- colours ---------------------------------------------------------- */
    .outfiter .colourise_cont {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        margin: 0;
    }

    .outfiter .colourise_title {
        float: none;
        padding: 0;
    }

    .outfiter .colourise_item {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 6px;
    }

    .outfiter .colourise_btns {
        float: none;
        order: 5;
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0;
    }

    .outfiter .colourise_btns .nbutton {
        flex: 1 1 140px;
        width: auto;
        min-width: 0;
    }

    .outfiter .colors_cont {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    .outfiter .color_tab {
        float: none;
        /* 20% basis: the four tabs share one row and the palette wraps below */
        flex: 1 1 20%;
        width: auto;
        min-width: 0;
        font-size: 12px;
        line-height: 16px;
    }

    .outfiter .color_tab_in {
        padding: 10px 0;
    }

    .outfiter .dcolor_table_out {
        flex: 1 1 100%;
        width: auto;
        box-sizing: border-box;
    }

    .outfiter .dcolor_table {
        width: 100%;
        grid-template-columns: repeat(19, 1fr);
        line-height: 0;
    }

    .outfiter .dcolor_table * {
        width: auto;
        height: auto;
        aspect-ratio: 1;
        padding: 0;
        border-width: 1px;
    }

    .outfiter .color_table_d_sel::after {
        width: auto;
        height: auto;
        inset: -3px;
        border-width: 2px;
    }

    /* --- name, link, template, animation steps --------------------------- */
    .outfiter .charn_cont {
        width: 100%;
        margin: 0;
    }

    .outfiter .charn_title {
        top: 0;
        flex: 1 1 100%;
        text-align: left;
    }

    .outfiter .charn {
        flex: 1 1 160px;
        width: auto;
    }

    .outfiter .charn_cont .clear_name,
    .outfiter .charn_cont .use_name {
        flex: 1 1 100px;
    }

    .outfiter .url_input_cont,
    .outfiter .template_code_code_cont {
        align-items: center;
        margin: 0;
    }

    .outfiter .copy_btn {
        width: 44px;
        height: 44px;
        margin: 0;
        background-size: 16px 16px;
    }

    /* 16px text stops phones from zooming in when a field is tapped */
    .outfiter input[type="text"],
    .outfiter textarea {
        font-size: 16px;
        line-height: 20px;
        min-height: 44px;
        box-sizing: border-box;
    }

    .outfiter .anistep_step_cont {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        margin: 4px;
    }
}

/* Phones: two option columns - Configure (most used) next to Preview, and the
 * Extra group (with Download) across the full width underneath. */
@media (max-width: 600px) {
    .outfiter .omain_opts {
        grid-template-columns: 1fr 1fr;
    }

    .outfiter .omain_cont_left:nth-child(3) {
        order: -1;
    }

    .outfiter .omain_cont_left:nth-child(2) {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 6px;
    }

    .outfiter .omain_cont_left:nth-child(2) > .divtitle,
    .outfiter .omain_cont_left:nth-child(2) > label:has(.show_advanced),
    .outfiter .omain_cont_left:nth-child(2) > .save_advanced_opts,
    .outfiter .omain_cont_left:nth-child(2) > .download_image {
        grid-column: 1 / -1;
    }

    .outfiter .save_advanced_opts.is-visible {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 6px;
    }

    .outfiter .save_advanced_opts > .divtitle,
    .outfiter .save_advanced_opts > .rotate4x_wrap {
        grid-column: 1 / -1;
    }
}

/* Phones: slightly tighter spacing */
@media (max-width: 480px) {
    .outfiter {
        gap: 6px;
    }

    .outfiter .omain_opts {
        gap: 4px 6px;
        padding: 6px;
    }

    .outfiter .divcheck {
        padding: 4px;
        font-size: 11px;
    }

    .outfiter .darkchk + .darkchk_in,
    .outfiter .darkrad + .darkrad_in {
        margin-right: 8px;
    }
}

/* Nothing on screen can be recoloured (e.g. a creature without colour masks). */
.outfiter .colors_cont.is-unavailable {
    opacity: 0.45;
}

.outfiter .colors_cont.is-unavailable .dcolor_table div {
    cursor: not-allowed;
}

/* Narrow but tall-enough screens: keep the preview pinned to the top while the
 * lists, options and colours scroll underneath, so every change stays visible.
 * Its height is capped at 40% of the screen, and keyboard focus scrolls to below
 * it (scroll-padding), so focused controls are never hidden behind it.
 * Short screens (e.g. phones in landscape) keep the normal scrolling preview. */
@media (max-width: 1180px) and (min-height: 600px) {
    html {
        scroll-padding-top: calc(clamp(260px, min(78vw, 40vh), 420px) + 12px);
    }

    .outfiter .body_main_div {
        position: sticky;
        top: 0;
        z-index: 150;
        height: clamp(260px, min(78vw, 40vh), 420px);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.45);
    }

    /* error / "copied" messages stay visible just below the pinned preview */
    .outfiter .outfiter_status {
        position: sticky;
        top: clamp(260px, min(78vw, 40vh), 420px);
        z-index: 150;
        background: #2f2f30;
    }
}