@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --y: #fede00;
    --y2: #ffe31f;
    --k: #ffffff;
    --k2: #fff;
    --k3: #eeeeee;
    --k4: #e4e4e4;
    --k5: #d8d8d8;
    --border: #bbb;
    --border2: #cccccc;
    --text: #1e1e1e;
    --muted: #555555;
    --muted2: #888888;
    --panel-w: 280px;
    --bar-h: 52px;
    --sb-w: 80px;
    --radius: 6px;
}
#zoom-level{ min-width:50px}
/* Custom Reusable Line Tabs */
.custom-line-tabs .nav-link {
    border-bottom: 2px solid transparent !important;
    color: #777 !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}

.custom-line-tabs .nav-link.active {
    border-bottom: 2px solid #000 !important;
    color: #000 !important;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.btn-check:focus+.btn,
.btn:focus {
    box-shadow: none;
}

body {
   font-family: "Inter", sans-serif;
    background: var(--k);
    color: var(--text);

    font-size: 14px;
}

/* ─── TOPBAR ─── */
#topbar {
    height: var(--bar-h);
    background: var(--text);
/*    border-bottom: 1px solid var(--border);*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    flex-shrink: 0;
    gap: 8px;
    position: sticky;
    top: 0;
    left: 0;
    /* High z-index so the topbar's account dropdown ALWAYS sits above the
       canvas's `.legend-topright` footing chip (z-index 10) and any other
       canvas overlays. The duplicate z-index that used to be here was
       defeating the higher value below it. */
    z-index: 1000;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
#topbar .logo svg{
    filter:invert(1) !important; height:auto; width:150px;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-click {
   font-family: "Inter", sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--text);
}

.logo-deck {
    font-family: "Inter", sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--y);
}

.logo-sub {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 9.5px;
    letter-spacing: 3px;
    color: var(--muted);
    text-transform: uppercase;
    margin-top: -1px;
}

.logo-badge {
    width: 28px;
    height: 28px;
    background: var(--y);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    flex-shrink: 0;
}

.logo-badge svg {
    width: 18px;
    height: 18px;
}

/* Topbar center — step track */
.step-track {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    margin: 0 auto;
    /* border-left / border-right removed — the 1px dividers between the
       step track and the adjacent buttons (Proceed to Quote on the right,
       logo group on the left) rendered as faint hairlines that read as
       stray marks next to the yellow button. */
    min-height: 100%;
    overflow: auto;
    padding: 0 10px;

    scrollbar-color: #444 transparent;
}


    .step-track::-webkit-scrollbar-track {
        background: transparent;
    }

    .step-track::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    .st-step {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding: 4px 10px;
    border-radius: 60px;
    white-space: nowrap;
}
    /* Free navigation — every step on the top track is clickable at any
       time. (.done / .active still drive the visual state, just not the
       pointer-events gate.) */
    .st-num:after {
        content: "."
    }
.st-step:hover{ background:rgba(255, 255, 255, 0.1)}

.st-step.choosedecking { border:solid 1px #444; color:var(--y); font-weight:600
}
    .st-step.choosedecking small{ color:#888}
    /*.st-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--k4);
    border: 1.5px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
    flex-shrink: 0;
    transition: all .2s;
    position: relative;
    z-index: 1;
}*/
    .st-line {
        width: 18px; min-width:18px;
        text-align: center;
        background: transparent !important;
    }
    .st-line svg{ fill:#555}
    /*.st-step.active .st-num {
    background: var(--y);
    border-color: var(--y);
    color: var(--k);
    box-shadow: 0 0 10px rgba(224, 177, 0, .3);
}*/
    .st-step.active {
        color: var(--text);
        background: var(--y);
        font-weight: 700;
    }
.st-step.done{ color:#bbb;}
    .st-step.done:before {
        content: "";
        margin-right: 3px;
        display: inline-block;
        background: url(../images/check.svg) center no-repeat;
        width: 16px;
        height: 16px;
        background-size: 100%;
    }
    /*.st-step.done .st-label {
    color: var(--muted);
}*/
    /*.st-step.done+.st-line {
    color: #bbb;
}*/
    /*
.st-step:hover:not(.active) .st-label {
    color: var(--text);
}*/
    /* Topbar right */
    .top-right {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
/*        min-width: 82px;*/
    }
.desktoploginbox{ border-left:solid 1px rgba(255, 255, 255, 0.15); padding-left:10px;}

@media screen and (max-width:1600px)
{
    .step-track{ justify-content:start;}
}

/* Info chips */
.info-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.info-chip .ic-label {
    color: #9ca3af;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
}

    .info-chip .ic-val,
    .ic-sub-top{
        font-weight: 800;
        font-size: 28px;
        color: var(--y) !important;
        line-height: 1.1;
        letter-spacing: -0.3px;
        white-space: nowrap;
    }

/* ─── MAIN ─── */
#main {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

/* ─── SIDEBAR ─── */
#sidebar {
    width: var(--sb-w);
    background: var(--y);
    border-right: 1px solid var(--border);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    gap: 8px;
    flex-shrink: 0;
    z-index: 100;
    transition: width .25s cubic-bezier(.4, 0, .2, 1);
    overflow: auto;
    scrollbar-width: thin;
}
* {
    scrollbar-width: thin;
}
#sidebar.collapsed {
    width: 0;
    overflow: hidden;
}

.sb-item {
    width: calc(100% - 16px);
    margin: 0 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 2px;
    gap: 4px;
    position: relative;
    border-radius: 10px;
    transition: all .2s;
    flex-shrink: 0;   
    font-weight:600;
    color:var(--text); font-size:9px; min-height:58px; justify-content:center;
}
    /* Free navigation — every sidebar tile is clickable at any time. */

    .sb-item.optional_item {
        border: dashed 1px rgba(0, 0, 0, 0.2);
        margin-top: 10px;
    }
        .sb-item.optional_item:before {
            content: "";
            left: 8px;
            right:8px;
            height: 1px;
            background: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 0;
            margin-top: -10px;
        }



        .sb-item:hover:not(.active) {
            background-color: rgba(0, 0, 0, 0.1);
        }

.sb-item.active {
    background: var(--text); color:var(--y)
}

.sb-item.active svg {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(99%) contrast(101%) !important;
}

.sb-n {
    background:rgba(0, 0, 0, 0.2);
    font-size: 9px;
   border-radius:60px;
    text-transform: uppercase; 
    line-height: 1; width:26px; height:26px;
    display:inline-flex; align-items:center; justify-content:center;
}

.sb-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    /* background: var(--k4);
      border: 1px solid var(--border); */
    color: var(--text);
    font-size: 14px;
    transition: all .2s;
}

.sb-icon svg {
    width: 100%;
    height: 100%;
}

.sb-item.active .sb-icon {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}

.sb-item:hover:not(.active) .sb-icon {
    color: var(--y);
    border-color: var(--y);
}

.sb-item.active .sb-n {
    color: var(--text); background:var(--y)
}

.sb-lbl {
    text-align: center;
    line-height: 1.1;
}

.sb-item.done {
    background-color: rgba(0, 0, 0, 0.1);
    color: #555;
}

    .sb-item.done .sb-n {
        background:var(--text); font-size:0 !important;
    }
        .sb-item.done .sb-n:before {
            content: "";
         
            display: inline-block;
            background: url(../images/check-yellow.svg) center no-repeat;
            width: 14px;
            height: 14px;
            background-size: 100%;
        }
        /*.sb-item.active .sb-lbl {
    color: #fff;
}*/
        .cutout-remove-btn {
            border: 0;
            background: transparent;
        }
        /* Step 3 breakerboard cards — a deliberate two-line layout for the
           narrow panel (no accidental wrapping):
             [1] Breakerboard 1               (trash)
                 2500 mm from left
             [ Position        |        Center ]
           Trash confirms via the shared showConfirmToast before deleting. */
        .s3-bb-card {
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            padding: 10px;
            margin-top: 8px;
            background: #fff;
            box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .s3-bb-card:hover { border-color: #f5c518; box-shadow: 0 2px 8px rgba(245, 197, 24, 0.15); }
        .s3-bb-card-top { display: flex; align-items: center; gap: 8px; }
        .s3-bb-card-num {
            flex: 0 0 auto;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #f5c518;
            color: #1f2937;
            font-size: 11px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .s3-bb-card-info { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
        .s3-bb-card-name { font-size: 12.5px; font-weight: 700; color: #1f2937; }
        .s3-bb-card-off { font-size: 11px; color: #6b7280; }
        /* Quiet icon button — no ring until hover, so it doesn't compete. */
        .s3-bb-del {
            flex: 0 0 auto;
            width: 28px;
            height: 28px;
            padding: 0;
            border: 1px solid transparent;
            border-radius: 8px;
            background: transparent;
            color: #9ca3af;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
        }
        .s3-bb-del:hover { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
        .s3-bb-card-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
            margin-top: 8px;
        }
        .s3-bb-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            background: #fff;
            color: #1f2937;
            font-size: 11.5px;
            font-weight: 600;
            padding: 5px 8px;
            line-height: 1.3;
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease;
        }
        .s3-bb-btn .bi { font-size: 12px; color: #6b7280; }
        .s3-bb-btn:hover { border-color: #f5c518; background: #fffbe6; }

        /* Cut-out (Step 1) + drain point (Frame) delete: round trash button. */
        .cutout-remove-btn.cutout-trash-btn {
            flex: 0 0 auto;
            width: 30px;
            height: 30px;
            padding: 0;
            border: 1px solid #d1d5db;
            border-radius: 50%;
            background: #fff;
            color: #374151;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            line-height: 1;
            cursor: pointer;
            transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
        }
        .cutout-remove-btn.cutout-trash-btn:hover {
            color: #dc2626;
            border-color: #fca5a5;
            background: #fef2f2;
        }

.cutout-box-header {
    display: flex;
 
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
   
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);

}
    .cutout-box-header .cutout-box-title {
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.06em;
    }
        .cutout-box-header .cutout-box-title small{ text-transform:none; letter-spacing:none;}

        .cutout-shape-btn {
            flex-grow: 1;
            padding: 6px;
            border-radius: 4px;
            border: 1px solid var(--text);
            justify-content: center;
            text-align: center;
            /*    margin-top: 10px;*/
            cursor: pointer;
        }

.cutout-shape-btn:hover {
    background-color: var(--k4);
}

.cutout-shape-btn.active {
    background-color: #fffbe6;
    border-color: #f5c518;
    color: #1f2937;
    cursor: default;
}

@media screen and (min-width:992px) {
    #panel-wrap {
        position: absolute;
        left: var(--sb-w);
        top: 0;
        bottom: 0;
        z-index: 11;
    }
}

/* ─── PANEL ─── */
#panel-wrap {
    width: 0;
    overflow: hidden;
    background: var(--k2);
    border-right: 1px solid #ddd;
    box-shadow:5px 0 5px rgba(0, 0, 0, 0.1);
    transition: width .25s cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
}

#panel-wrap.open {
    width: var(--panel-w);
}

.panel-inner {
    width: var(--panel-w);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-head {
    padding: 16px 20px 14px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-shrink: 0;
    background: #fff;
}

.panel-head-left {
    display: flex;
    align-items: start; justify-content:start;
   flex-direction:column;
}

.panel-step-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--y);
    padding: 3px 10px 3px 6px;
    border-radius: 20px;
    margin-bottom: 8px; 
}
.panel-step-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--y);
    padding: 3px 10px 3px 6px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.panel-step-tag .num {
    width: 18px;
    height: 18px;
    background: var(--text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: var(--y);
}
.panel-step-tag .label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.panel-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 3px;
}

.panel-close {
    width: 24px;
    height: 24px;
    background: transparent;
    border: 0;
    border-radius: 60px;
    color: var(--k4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 30px;
    line-height: 24px;
    transition: all .15s;
    margin-top: -2px;
}

.panel-close:hover {
    background: transparent;
    color: var(--text);

}
.panel-subtitle {
    font-size: 11px;
    color: #777;
    font-weight: 400;
    line-height: 1.4;
}

.panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    padding: 16px 20px;
}

.panel-body::-webkit-scrollbar {
    width: 3px;
}

.panel-body::-webkit-scrollbar-thumb {
    background: var(--k5);
    border-radius: 2px;
}

.panel-body::-webkit-scrollbar-track {
    background: transparent;
}

/* Panel sections */
.ps-title, .cutout-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--charcoal);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.ps-title:first-child {
    margin-top: 0;
}

/* 
    .ps-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    } */

/* Compact input row */
.inp-row {
    display: flex; flex-wrap:wrap;
   width:100%;
    margin-bottom: 6px;
/*    background: var(--k);*/
   
    transition: border-color .15s;
}



    .inp-row label,
    .inputwith-clicks label{
        font-size: 11px;
        font-weight: 600;
        color: #888;
        width: 100%;
        margin-bottom: 2px;
    }

        .inp-row input[type=number],
        .inp-row input[type=text] {
            flex: 1;
            background-color: #fff;
          
            outline: none;
            color: #000;
            font-family: "Inter", sans-serif;
            font-weight: 500;
            text-align: left;
            min-width: calc(100% - 40px);
            border: solid 1px #ddd;
            border-radius: 6px;
            font-size: 13px;
            padding: 6px 7px;
        }
        .inp-row input[type=number]:focus,
        .inp-row input[type=text]:focus{border-color:#000;}
.inp-row .unit,
.inputwith-clicks .unit{
    font-size: 11px;
    font-weight: 600;
    color: #999;
    min-width: 25px;
    text-align: right;
    padding-top: 8px;
}
.inputwith-clicks{ display:flex; flex-wrap:wrap;}

    .inputwith-clicks label{ width:100%;}

    .inputwith-clicks .inp-row {
        flex: 1;
        display: flex;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 8px;
        min-width: calc(100% - 40px);
        width: auto; margin:0; overflow:hidden;
    }
    .inputwith-clicks .inp-row input{ min-width:50px; border:0; text-align:center; }
        .inputwith-clicks .inp-row .btn {
            width: 32px;
            height: 32px;
            background: #ebebeb;
            border: none;
            font-size: 16px;
            
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.1s;
            font-weight: 700; color:#000 !important; padding:0 0 2px 0 !important; line-height:normal; text-decoration:none !important; border-radius:0;
        }
            .inputwith-clicks .inp-row .btn:hover{ background-color:#ccc;}
            /* Surf type cards */
            .card-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 6px;
                margin-bottom: 6px;
            }

.s-card {
    border: 1px solid #ebebeb;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, transform .1s;
    position: relative;
    color:#666; line-height:normal;
    background: #fff;
}

.s-card:hover {
    border-color: var(--border2);
    transform: translateY(-1px);
}

    .s-card.sel {
        background: var(--text);
        border-color: var(--text);
        color:#fff;
    }

    /* Step 2 Material Type Cards - Show material color/texture when selected */
    .s2-surface-card.sel {
/*        background: transparent !important;*/
/*        border-color: var(--y) !important;*/
/*        border-width: 1px;
        color: #000 !important;*/
    }

    /* Image grayscale when not selected */
    .s2-surface-card:not(.sel) .si img {
/*        filter: grayscale(100%) brightness(0.95);
        opacity: 0.7;*/
    }

    /* Full color image when selected */
    .s2-surface-card.sel .si img {
        filter: none;
        opacity: 1;
    }

    .s2-surface-card.sel .sl {
        background: #000;
        color: #fff; 
    }

.s-card .si {
    height: 72px; min-height:72px;
    overflow: hidden;
}
    .s-card .si img{ width:100%; border-radius:4px; transition: filter 0.2s, opacity 0.2s; }

    .s-card .sl {
        padding: 5px 6px;
       
        font-weight: 600;
        font-size: 11px;
        text-align: center;
           
        transition: color .15s, background .15s;
    }


.s-card .ck {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: var(--y);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
}

.s-card.sel .ck {
    display: flex;
}

/* Colour swatches */
.swatch-row {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.sw {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .12s, border-color .12s;
    position: relative;
}

.sw:hover {
    transform: scale(1.15);
}

.sw.active {
    border-color: var(--y);
}

.sw.active::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1.5px solid var(--y);
    border-radius: 50%;
    opacity: .4;
}

.cutout-box {
    width: 100%;
    border: solid 1px #ebebeb;
    border-radius: 10px;
    padding: 15px; background:#f9f9f9;
    margin: 10px 0;
}

/* Toggle group */
.tog-row {
    display: flex;
    background: #eee;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}


.tog-btn {
    flex: 1;
    padding: 10px 4px;
    background: transparent;
    
    border-radius: var(--radius);
    color: var(--muted);
  
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0px;
    line-height: normal;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
}

.tog-btn.active {
    background: var(--text);
    color: var(--k);
    border-color: var(--text);
}

.tog-btn:hover:not(.active) {
    border-color: var(--border2);
    color: var(--text);
}

.tog-row.notabs{ gap:6px; background:transparent; padding:0;}
    .tog-row.notabs .tog-btn {
        border: solid 1px #dfdfdf;
    }
        .tog-row.notabs .tog-btn:hover,
        .tog-row.notabs .tog-btn.active {
            border-color: var(--text);
        }
        .tog-row.notabs .dtc-icon svg {
            width: 24px;
            height: 24px;
        }
    .tog-row.notabs .dtc-icon{ margin-bottom:4px;}
    .tog-row.notabs .tog-btn.active .dtc-icon svg {
        filter: invert(1);
    }
        /* Range */
        .range-wrap {
            position: relative;
            margin: 4px 0 6px;
        }

.range-wrap input[type=range] {
    width: 100%;
    accent-color: var(--y);
    background: transparent;
}

.range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--muted2);
    font-family: "Inter", sans-serif;
    margin-top: -2px;
}

.btn {
/*    letter-spacing: 1px;*/
    padding: 8px 16px;
    border: none;
    border-radius: 8px;

    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;

    transition: background .15s, transform .1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    outline: none;
    box-shadow: none;
}

.btn-primary {

    background: var(--y);
    color: #000;

}

.btn-primary:hover {
    background: var(--y2);
    color: #000;
}

.btn-secondary {
    border: solid 1px #ddd;
    background: transparent;
    color: #555;

}

    .btn-secondary:hover {
        border-color: #000;
        color: #000;
        background: transparent;
    }

.btn-secondary-white {
    border: solid 1px #fff;
    background: transparent;
    color: #fff;
}
    .btn-secondary-white:hover{ background:#fff; color:var(--text); }

    .btn.btn-sm {
        font-size: 12px;
        padding: 6px 12px;
    }

.btn-check:focus+.btn-primary,
.btn-primary:focus {
    background-color: var(--y);
    color: var(--text);
}

.btn.btn-filled {
    background-color: var(--text);
    color: var(--k); border-color:var(--text)
}

/* Supply cards */
.sup-card {
    background: var(--k);
    border: 1px solid #ebebeb;
    border-radius: 14px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 10px;
    cursor: pointer;
    margin-bottom:15px;
    transition: border-color .15s, background .15s; font-size:11px;
}

.sup-card:hover {
    border-color: #000;
}

.sup-card.sel {
    border-color: var(--y);
    background: var(--y);
    cursor: default;
}

.sup-card.sel .btn {
    background-color: var(--text);
    color: var(--k);
}

.sup-card .badge {
    border: solid 1px #444;
    line-height: normal;
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 6px;
}

.sup-icon {
    font-size: 18px;
    color: var(--muted);
    flex-shrink: 0;
    transition: color .15s;
}

.sup-card.sel .sup-icon {
    color: var(--y);
}

/* Step 6: "Selected" indicator — only shows on active card */
.sup-card .s6-selected-indicator {
    display: none;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--text, #000);
    color: var(--k, #fff);
    padding: 3px 8px;
    border-radius: 999px;
}

.sup-card.sel .s6-selected-indicator {
    display: inline-block;
}

/* Step 6: disabled card (e.g. Make a Kit when deck isn't rectangle) */
.sup-card.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #f5f5f5;
    border-color: #e0e0e0;
}

.sup-card.is-disabled:hover {
    border-color: #e0e0e0;
}

.sup-card.is-disabled .btn {
    pointer-events: none;
}

.sup-info h6 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    font-family: "Inter", sans-serif;
    letter-spacing: .3px;
}

.sup-info small {
    font-size: 10px;
    color: var(--muted2);
}

/* ─── CANVAS ─── */
#canvas-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--k);
}

/* Fine dot grid */
/* #canvas-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(0, 0, 0, .1) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
} */

/* Subtle crosshair grid */
/* #canvas-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 120px 120px;
    opacity: .15;
    pointer-events: none;
    z-index: 0;
} */

#deck-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: default;
    z-index: 1;
}

#ctip {
    position: absolute;
    background: rgba(245, 196, 0, .9);
    color: var(--k);
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    pointer-events: none;
    display: none;
    z-index: 20;
    white-space: nowrap;
}

/* Canvas toolbar floating */
#canvas-toolbar {
    position: absolute;
    top: 15px;
    right: 50%;
    transform:translate(50% ,0);
    display: flex;
    z-index: 10;
    background: white;
    border: 1.5px solid #eee;
    border-radius: 28px;
    padding: 6px 14px;
    gap: 2px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.ct-group {
    display: flex; gap:2px;
}

.ct-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    border: none; border-radius:6px;
   line-height:1;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background .12s, color .12s;
}
.centerps{ padding-bottom:3px; font-size:14px;}

.ct-btn svg {
    width: 60%;
    height: 60%;
}

.ct-btn:last-child {
    border-bottom: none;
}

.ct-btn:hover {
    background: var(--k3);
    color: var(--text);
}

.ct-btn.active {
    background: var(--y);
    color: var(--text);
}

.ct-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: auto;
}

.ct-btn:disabled:hover {
    background: transparent;
    color: var(--text);
}

/* Zoom pill */
/*#zoom-pill {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: var(--k2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    gap: 7px;
    z-index: 10;
}*/
#zoom-pill {
    border-right: solid 1px #eee;
    border-left: solid 1px #eee;
    margin: 0 4px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center; gap:4px;
}

.zoom-icon {
    color: var(--text);
    font-size: 16px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border-radius: 6px;
}

    .zoom-icon:hover {
        background: var(--k3);
        color: var(--text);
    }

#zoom-pill input {
    width: 70px;
    accent-color: var(--y);
}

#zoomLabel {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: var(--muted);
    width: 32px;
    text-align: right;
}

.bottomleftbar {
    position: absolute;
    bottom: 10px;
    transition: all .15s;
    left: 0;
    margin-left: 10px;
    display: inline-flex;
    z-index: 10; gap:5px;
}
#panel-wrap.open + #canvas-wrap .bottomleftbar {
    left: var(--panel-w);
}
.btnswithicons{ display:inline-flex; gap:5px; align-items:center; cursor:pointer; padding:6px 6px; color:var(--muted); font-size:11px; font-weight:600; border-radius:10px; }
    .btnswithicons:hover{ color:var(--text); background:rgba(0, 0, 0, 0.1); }
    .btnswithicons svg{ width:14px; height:14px;}
    /* Layer pills */
    #layer-pills {
        position: relative;
        top: 10px;
        transition: all .15s;
        left: 0;
        margin-left: 10px;
        background: #fff;
        border-radius: 10px;
        border: 1px solid #eee;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        display: inline-flex;
        z-index: 10;
        flex-direction: column;
    }
    #layer-pills label {
        width: 100%;
        border-bottom: solid 1px #eee;
        padding: 2px 10px;
        color: #aaa;
        font-size: 9px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }
    #panel-wrap.open + #canvas-wrap #layer-pills {
        left: var(--panel-w);
    }

.lp {
    padding: 6px 10px;
    background:#fff;
    font-weight: 600;
    font-size: 11px;
    color:#999;
    cursor: pointer;
  
    transition: all .15s;
    border: 0;
}



.lp.active {
  
    color: var(--text);
}

.lp:hover:not(.active) {
    color: var(--text);
}

/* ─── BOTTOMBAR ─── */
#bottombar {
/*    height: var(--bar-h);
    background: var(--k2);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 6px;
    flex-shrink: 0;
    z-index: 200;*/
}

/* Quote save */
.q-box {
/*    background: #ccc;*/
border:solid 1px #999;
  
    border-radius: 8px;
    padding: 1px 1px 1px 10px;
    font-size: 10px;
    color: var(--k);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 600;
}

.q-box strong {
    color: var(--k);
}

.save-btn {
    background:var(--y);
    border: 0;
    border-radius: 6px;
    color: #000;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.save-btn:hover {
    color: var(--text);
    background-color: var(--y);
}

/* Step progress in bottombar */
.bot-track {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.bp {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 20px;
    cursor: pointer;
    transition: background .15s;
}

.bp:hover {
    background: var(--k3);
}

.bp.active {
    background: rgba(245, 196, 0, .1);
}

.bp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--k5);
    border: 1.5px solid var(--border2);
    flex-shrink: 0;
    transition: all .2s;
}

.bp.active .bp-dot {
    background: var(--y);
    border-color: var(--y);
    box-shadow: 0 0 6px rgba(224, 177, 0, .4);
}

.bp.done .bp-dot {
    background: var(--k5);
    border-color: var(--y);
}

.bp-label {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted2);
    transition: color .15s;
}

.bp.active .bp-label {
    color: var(--y);
}

.bp-sep {
    width: 14px;
    height: 1px;
    background: var(--border2);
    flex-shrink: 0;
}

.bp.done+.bp-sep {
    background: var(--y);
    opacity: .4;
}


/* Toggle opts */
#toggle-opts {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 6px;
    flex-wrap: wrap;

    flex-shrink: 0;
}

.topt {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--muted);
}

.topt input {
    accent-color: var(--y);
    width: 18px;
    height: 18px;
}

/* ─── DRAW TOOL CARDS (Step 1) ─── */
.draw-tool-card {
    border: 1.5px solid #ebebeb;
    border-radius: 8px;
    padding: 10px 6px 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: var(--k2);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.draw-tool-card:hover {
    border-color: var(--text);
   
}

/* Selected tile — brand yellow on dark text, same as the selected
   toggles/cards on the other steps (.panel-body .tog-btn.active). */
.draw-tool-card.active {
    background: #fffbe6;
    color: #1f2937;
    border-color: #f5c518;
    box-shadow: 0 2px 6px rgba(245,197,24,0.32);
}

.draw-tool-card.active .dtc-label {
    color: #1f2937;
}

.dtc-icon {
    display: flex;
    align-items: center;
    justify-content: center; min-width:24px; min-height:24px;
}

.dtc-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.dtc-adv {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--y);
    letter-spacing: .4px;
    margin-top: 2px;
}

/* ─── ADVANCED MODE SECTION (Step 1) ─── */
.adv-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* "Create Cutouts in Deck" (Step 1) - white card, thin + on the left,
   two-line left-aligned label (client mock). */
.cutout-add-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    text-align: left;
    line-height: 1.25;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.cutout-add-btn:hover { border-color: #f5c518; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.cutout-add-btn:focus-visible { outline: 2px solid #f5c518; outline-offset: 2px; }
.cutout-add-btn .bi { font-size: 22px; line-height: 1; color: var(--text); flex: 0 0 auto; }
.cutout-add-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Same colour + weight as the other Step-1 buttons (.dtc-label). */
.cutout-add-title { font-size: 14px; font-weight: 600; color: var(--text); }
.cutout-add-sub { font-size: 12px; font-weight: 400; color: #64748b; }

.adv-label {
    font-size: 9px;
    font-weight: 600;
    color: #e040fb;

}

.adv-btn {
    width: 100%;
    background: var(--k2);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    font-family: inherit;
}

.adv-btn:hover {
    border-color: var(--border2);
    background: var(--k3);
}

/* ─── FOOTER ─── */
#footer {
    background: var(--k2);
    border-top: 1px solid var(--border);
    padding: 4px 10px;
    font-size: 10.5px;
    color: var(--muted2);
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
}

#footer a {
    color: var(--muted2);
    text-decoration: none;
    margin-right: 10px;
}

#footer a:hover {
    color: var(--text);
    text-decoration: underline;
}

/* Modal Content Styles (Adapted for Bootstrap) */
.mh-logo {
    padding-top: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.mh-logo svg {
    max-width: 200px;
    height: auto;
}

.m-toggles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
    margin-top: 10px;
}

.m-tog {
    padding: 8px 22px;
    border-radius: 60px;
    font-weight: 400;
    cursor: pointer;
    font-size: 14px;
    transition: all .2s;
    background: #fff;
    color: var(--muted);
    border: solid 1px var(--border);
}

.m-tog.active {
    background: #fff;
    color: var(--text);
    border: solid 2px var(--y);
    font-weight: 600;
}

/* Removed custom login/register form classes, now using Bootstrap form-controls directly */

.m-state {
    display: none;
}

.m-state.active {
    display: block;
}

/* Override Bootstrap modal styles for precise match */
.modal-content {
    border: none;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}

.mcx {

    background: none;
    border: none;
    color: var(--muted2);
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
}

/* ─── SNACKBAR ─── */
#snackbar {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(40px);
    background: var(--y);
    color: var(--text);
    padding: 7px 18px;
    border-radius: 4px;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    z-index: 600;
    opacity: 0;
    transition: transform .25s, opacity .25s;
    pointer-events: none;
    white-space: nowrap;
}

#snackbar.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Animations */
@keyframes panelIn {
    from {
        opacity: 0;
        transform: translateX(-8px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.panel-inner {
    animation: none;
}

#panel-wrap.open .panel-inner {
    animation: panelIn .22s cubic-bezier(.4, 0, .2, 1);
}



/* Upload Step */
.upload-area {
    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 20px 24px;
    text-align: center;

    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-area:hover {
    border-color: var(--y);
    background: rgba(255, 206, 20, 0.04);
}

.upload-area.dragover {
    border-color: var(--y);
    background: rgba(255, 206, 20, 0.08);
    box-shadow: 0 0 20px rgba(255, 206, 20, 0.15);
}

.upload-icon {
    font-size: 30px;
    margin: 0 auto 0;
    color: var(--muted2);
    display: inline-block;
}

.upload-text {
    font-size: 15px;
    color: var(--text);
    font-weight: 600;

}

.upload-sub {
    font-size: 13px;
    color: var(--muted2);
    margin-bottom: 20px;
}

.btn-select-file {
    background: var(--text);
    color: var(--k);
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.28s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-select-file:hover {
    background: rgba(0, 0, 0, 0.85);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.terms-text {
    line-height: normal;
}

.fp-tabs {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
}

.fp-tabs .fp-tab {
    border: solid 1px var(--muted2);
    color: var(--muted2);
    padding: 5px 10px;
    border-radius: 60px;
    line-height: normal;
    background: #fff;
    font-size: 10px;
    cursor: default;
    position: relative;
    margin-right: 10px;
}

.fp-tabs .fp-tab:after {
    content: "";
    position: absolute;
    height: 1px;
    background-color: var(--muted2);
    right: -11px;
    top: 11px;
    width: 10px;
}

.fp-tabs .fp-tab:last-child:after {
    display: none;
}


.fp-tabs .fp-tab.active {
    background-color: var(--text);
    color: var(--k);
    border-color: var(--text)
}

/* Uploaded file card */
.uploaded-file-card {
    background: var(--k);
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

.file-icon {
    width: 40px;
    height: 40px;
    background: var(--k3);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 20px;
}

.file-info {
    flex: 1;
}

.file-name {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.file-size {
    font-size: 12px;
    color: var(--muted2);
}

/* Area selection */
.area-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 16px 0;
}

.area-item {
    background: var(--k);
    border: 2px solid var(--border2);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.28s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--text);
}

.area-item:hover {
    border-color: var(--y);
    background: rgba(255, 206, 20, 0.03);
}

.area-item.selected {
    background: var(--y);
    border-color: var(--y);
    color: var(--text);
    font-weight: 600;
}

.area-label {
    width: 28px;
    height: 28px;
    background: var(--text);
    color: var(--k);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
}

.area-item.selected .area-label {
    background: var(--text);
    color: var(--y);
}

.toggle-container {
    display: flex;
    gap: 0;
    margin-bottom: 30px;
}

.toggle-option {
    flex: 1;
    position: relative;
}

.toggle-option input[type="radio"] {
    display: none;
}

.toggle-option label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 1px solid var(--text);
    border-radius: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    background-color: #fff;
    color: var(--text);
    transition: all 0.3s ease;
    margin-bottom: 0;
}

.toggle-option:first-child label {
    border-radius: 8px 0 0 8px;
    border-right: 1px solid var(--text);
}

.toggle-option:last-child label {
    border-radius: 0 8px 8px 0;
    border-left: none;
}

.toggle-option input[type="radio"]:checked+label {
    background-color: var(--text);
    color: white;
    border-color: var(--text);

}

.toggle-option:first-child input[type="radio"]:checked+label {
    border-right: 1px solid var(--text);
}

.toggle-option:last-child input[type="radio"]:checked+label {
    border-left: 1px solid var(--text);
}



/*checkbox*/
.checkbox {
    display: inline-block;
    position: relative;
}

.checkbox input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    visibility: hidden;
    border: 0;
    margin: 0;
    padding: 0;
}

.checkbox label {
    display: inline-block;
    position: relative;
    padding-left: 22px;
    margin-bottom: 5px;
    padding-top: 1px;
    font-weight: 400;
    line-height: 1.2;
    font-size: 14px;
    min-height: 22px;
}

.checkbox label:before {
    content: "";
    background: #fff;
    width: 18px;
    height: 18px;
    position: absolute;
    border: solid 1px var(--text);
    border-radius: 4px;
    left: 0;
    top: -2px;
}

.checkbox label:hover:before {
    background: #fff;
    border-color: var(--text);
}

.checkbox input[type="checkbox"]:checked+label:before {
    background: var(--text) url(../images/check-icon.svg) center no-repeat;
    background-size: 12px;
    border-color: var(--blue);
}


/*radio*/
.radio {
    display: inline-block;
    position: relative;
}

.radio input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    visibility: hidden;
    border: 0;
    margin: 0;
    padding: 0;
}

.radio label {
    display: inline-block;
    position: relative;
    padding-left: 22px;
    margin-bottom: 5px;
    padding-top: 2px;
    font-weight: 400;
    line-height: 1.2;
    font-size: 14px;
    min-height: 22px;
}

.radio label:before {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    border: solid 1px var(--text);
    border-radius: 24px;
    left: 0;
    top: -1px;
}

.radio label:hover:before {
    background: #fff;
    border-color: var(--text);
}

.radio input[type="radio"]:checked+label:before {
    background: #fff;
    border-width: 6px;
    border-color: var(--text);
}

.radio+.radio,
.checkbox+.checkbox {
    margin-left: 20px;
}

.deckthumbimg img {
    width: 60px;
    border: solid 1px #bbb;
    border-radius: 6px;
    object-fit: contain;
    display: block;
}

.form-control:focus {
    box-shadow: 0 0 0 1px var(--text);
    border-color: var(--text);
}

.help-icon-disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
    fill: #9ca3af;
    color: #9ca3af;
}

.legend-topright {
    position: absolute;
    top: 10px;
    right: 80px;
    z-index: 10;
}

.legend-topright .btn {
    border-color: var(--border);
    background-color: var(--k);
    color: var(--text) !important;
}

.legend-topright .dropdown-item {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
}

.footing-legend-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: #fff !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.footing-legend-btn:hover,
.footing-legend-btn:focus {
    background: #f9fafb !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

.footing-legend-btn::after {
    margin-left: 4px;
    border-top-color: #6b7280;
}

.footing-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.footing-legend-iconwrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.footing-legend-icon {
    display: block;
}

.footing-legend-label {
    white-space: nowrap;
}

#footingLegendMenu {
    min-width: 280px;
    padding: 4px 0;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.10);
    border-radius: 10px;
}

#footingLegendMenu .footing-legend-dot {
    width: 10px;
    height: 10px;
}

#footingLegendMenu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    font-size: 12px;
    color: #1f2937;
}

#footingLegendMenu .dropdown-item:hover,
#footingLegendMenu .dropdown-item:focus {
    background: #f3f4f6;
    color: #111827;
}

#footingLegendMenu .fl-name {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#footingLegendMenu .fl-count {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
}

#footingLegendMenu .footing-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px 6px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 4px;
}

#footingLegendMenu .fl-h-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
}

#footingLegendMenu .fl-h-total {
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    background: #eef2ff;
    padding: 2px 8px;
    border-radius: 999px;
}

.drawdeckimage {
    max-height: 300px;
    object-fit: contain;
}
.top-center{ position:relative; top:10px; left:0; transition:all .15s; margin-left:10px; margin-top:8px; background:var(--text); display:flex; width:fit-content; padding:6px 12px 8px; border-radius:10px; flex-direction:column; gap:4px; box-shadow:0 4px 12px rgba(0, 0, 0, 0.18); z-index:10; }
.top-center .info-chip { gap:2px; }
.top-center .info-chip .ic-label { font-size:9px; letter-spacing:0.4px; }
.top-center .info-chip .ic-val { font-size:18px; line-height:1.05; letter-spacing:-0.2px; }
.top-center .gstvalue.info-chip .ic-val { font-size:14px; }
/* Follow the open step panel like #layer-pills, so the price card is not hidden behind it. */
#panel-wrap.open + #canvas-wrap .top-center { left: var(--panel-w); }
.top-center.is-empty { display: none !important; }
.top-center .info-chip.is-empty { display: none; }
.top-center .info-chip:not(.is-empty) + .info-chip:not(.is-empty) {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 6px;
}
.gstvalue.info-chip .ic-val {
    font-size: 22px;
    color: #fff !important;
    font-weight: 700;
}

.mobileshowsteps {
    display: none;
}

@media screen and (max-width:1599px)
{
    #zoom-pill input{ display:none;}
}

@media screen and (max-width:991px) {
    .mobileshowsteps{display:block; width:100%;padding:10px 16px; background:#fff; border-bottom:solid 1px #eee; position:relative; z-index:2; }
    .mob-progress-track {
        height: 3px;
        background: #eee;
        border-radius: 2px;
        margin-bottom: 8px;
        overflow: hidden;
    }
    .mob-progress-fill {
        height: 100%;
        width: 33.3%;
        background: var(--y);
        border-radius: 2px;
        transition: width 0.3s;
    }
    .mob-step-label {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
        .mob-step-label .current {
            font-size: 12px;
            font-weight: 700;
            color: var(--text);
        }
        .mob-step-label .count {
            font-size: 11px;
            color: #999;
            font-weight: 500;
        }
    #bottombar, #footer, .top-center, #layer-pills, .bottomleftbar, .q-box, #canvas-toolbar, #zoom-pill, .legend-topright, .step-track, .mobileviewhidden {
        display: none !important;
    }
    .panel-step-tag{ display:none;}

    .logo svg {
        width: 140px;
        height: 36px;
    }

    .svgiconimage {
        width: 60px;
        height: 60px;
    }
    svg.svgiconimage.nnic {
        padding: 10px !important;
    }
}

@media screen and (max-width:575px) {
    .mainlogo {
        width: 140px;
    }
}

.main-content {
    display: block;
    width: 100%;
    min-height: calc(100vh - 80px);
}
.popupbtns .btn{ min-width: 60px;}
.indicatortext{ font-size:10px; font-style:italic; display:block; margin-top:5px; color:#777;}
.tipscontent {
    font-size: 10px;
    color: #92400e;
    background: #fffbe6;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 7px 10px;
    line-height: 1.5;
}

/* Step 4 — Advanced Framing checkbox toggle.
   Compact pill-shaped row matching the rest of the panel's typography
   (small uppercase Step-4 labels, brand-yellow accent). The body
   collapses smoothly when the checkbox is unticked. */
.s4-advanced-block {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8f9fa;
    overflow: hidden;
}
.s4-advanced-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.s4-advanced-toggle-row input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: #f5c518;
    cursor: pointer;
    flex-shrink: 0;
}
.s4-advanced-toggle-label {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.01em;
    line-height: 1.3;
}
.s4-advanced-toggle-sub {
    font-size: 11px;
    font-weight: 500;
    color: #777;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-left: 4px;
    border-left: 1px solid #d1d5db;
    margin-left: 2px;
    line-height: 1.3;
}
.s4-advanced-body {
    display: none;
    padding: 12px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}
.s4-advanced-body.show {
    display: block;
}
.s4-advanced-body .accordion-body {
    padding: 0;
}

/* Step 4 — "Joist / Bearer Selection" (client mock). Replaces the
   Advanced Framing checkbox row with two pills; display only, the pills
   call the same s4ToggleAdvancedMode(). Deliberately NOT .tog-row/.tog-btn
   (Step-4 toggles are saved by DOM position). */
.s4-fs-block {
    border: 0;
    background: transparent;
    overflow: visible;
}
/* Two equal cards matching the Weight Loading pair (.s4-load-card): same
   radius, border, height and yellow-selected / red-default rules. */
.s4-fs-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.s4-fs-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 52px;
    /* 20px right = clear lane for the 14px selected tick (4px inset, Index
       .s4-fs-btn.active::after), so "Select my own" never runs under it.
       Same on both cards so they keep identical size / alignment. */
    padding: 8px 22px 8px 4px;
    border: 1px solid #ebebeb;
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.s4-fs-btn:hover:not(.active) { border-color: var(--text); }
/* Selected = yellow, like the other steps' toggles. */
.s4-fs-btn.active {
    background: #f5c518;
    border-color: #111;
    box-shadow: none;
    color: #1f2937;
    font-weight: 700;
}
/* Selected wins over the default's red: yellow + BLACK border (client). */
.s4-fs-btn.active.default-pick {
    border-color: #111 !important;
    box-shadow: none !important;
}
/* No red on an UNSELECTED default: once "Select my own" is picked, "Auto"
   shows as a plain card (client: red is confusing after the default is
   changed). Same rule as Index.cshtml's shared .default-pick block. */
/* Card text: title (Weight Loading size) + small muted sub-line. */
.s4-fs-t { font-size: 12px; font-weight: 600; white-space: nowrap; }
.s4-fs-s { font-size: 10.5px; font-weight: 400; color: #6b7280; white-space: nowrap; }
.s4-fs-btn.active .s4-fs-t { font-weight: 700; }
.s4-fs-btn.active .s4-fs-s { color: #3f3f46; }
/* Long captions ("Joists: (55Profile) Bearer: (55Profile)") must fit the
   narrow panel on one line - smaller text + tighter padding / arrow gap. */
/* Themed select: white card, soft border + shadow, custom dark chevron,
   brand-yellow hover / focus ring (same as the Step inputs). */
.s4-fs-block #s4-frame-layout-dropdown {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 40px;
    font-size: 11.5px !important;   /* beats the inline style="font-size:13px" */
    font-weight: 600;
    color: var(--text);
    letter-spacing: .01em;
    padding: 9px 30px 9px 12px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231e1e1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.s4-fs-block #s4-frame-layout-dropdown:hover:not(:disabled) {
    border-color: #f5c518;
}
.s4-fs-block #s4-frame-layout-dropdown:focus {
    outline: none;
    border-color: #f5c518;
    box-shadow: 0 0 0 3px rgba(245,197,24,.25);
}
/* Auto: locked - grey surface, muted chevron, no pointer. */
.s4-fs-block #s4-frame-layout-dropdown:disabled {
    background-color: #f3f4f6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    border-color: #e5e7eb;
    color: #4b5563;
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}
.s4-fs-block .s4-advanced-body {
    display: block;           /* always shown (client), whatever .show says */
    margin-top: 10px;
    padding: 10px 12px;       /* tighter (client: "reduce blank space") */
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
/* Footings / Joist Spacing / tip are hidden, so the breakerboard-joists row
   is the only visible content: drop the inner grey layer + its top gap. */
.s4-fs-block .s4-advanced-body .accordion-body {
    padding: 0 !important;
    background: transparent !important;
}
.s4-fs-block #s4-third-joist-group { margin-top: 0 !important; }
.s4-fs-block #s4-third-joist-group .indicatortext { margin-top: 6px; margin-bottom: 0; }
/* Step 4 — "Joists for breakerboards" (client mock): plain grey label and
   two compact pills, selected = dark. Style only; the row is still the
   same .tog-row (positional restore) with the same data-third-joist values. */
.s4-tj-label {
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 8px;
}
.panel-body #s4-third-joist-row {
    background: transparent;
    box-shadow: none;
    padding: 0;
    gap: 8px;
    justify-content: flex-start;
}
.panel-body #s4-third-joist-row .tog-btn {
    flex: 0 0 auto;
    padding: 8px 20px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
}
.panel-body #s4-third-joist-row .tog-btn:hover:not(.active) { border-color: var(--text); }
/* Selected = brand yellow + black border, same as .s4-fs-btn.active (client). */
.panel-body #s4-third-joist-row .tog-btn.active {
    background: #f5c518;
    border-color: #111;
    color: #1f2937;
    box-shadow: none;
}
.panel-body #s4-third-joist-row .tog-btn.active.default-pick {
    border-color: #111 !important;
    box-shadow: none !important;
}

#panel-wrap .panel-body hr{ background:none; border-color:transparent; margin:10px 0 !important;}
.s4-load-card {
    flex: 1;
    padding: 10px 4px;
    background: transparent;
    border-radius: var(--radius);
    color: var(--muted);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0px;
    line-height: normal;
    cursor: pointer;
    text-align: center;
    transition: all .15s; border:solid 1px #ebebeb;
}
    .s4-load-card:hover{border-color:var(--text);}
    /* Selected = yellow fill like the other steps' selected options (was
       black). s4SelectLoad() still sets the icon fill to white INLINE, so the
       !important below keeps the icon dark on yellow - no JS change. The red
       .default-pick border (Residential) is untouched. */
    .s4-load-card.s4-load-card-selected {
        background: #f5c518;
        border-color: #111;
        color: #1f2937;
        box-shadow: none;
    }
    /* Selected wins over Index's red .s4-load-card.default-pick (!important,
       lower specificity): yellow + BLACK border when Residential is picked. */
    .s4-load-card.s4-load-card-selected.default-pick {
        border-color: #111 !important;
        box-shadow: none !important;
    }
    .s4-load-card.s4-load-card-selected svg { fill: #1f2937 !important; }
.s4-load-card svg{ width:24px; height:24px; margin-bottom:6px; }
.inputwith-clicks{ width:100%;}
.card-sub{ font-size:10px; text-align:left; font-weight:400; line-height:normal; margin-top:6px;}



.footing-display {
    background: var(--text);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between; line-height:normal;
}
    .footing-display .fd-label {
        font-size: 11px;
        color: #eee;
        font-weight: 500;
    }
    .footing-display .fd-count {
        font-size: 22px;
        font-weight: 900;
        color: var(--y);
        letter-spacing: -0.03em;
    }
    .footing-display .fd-unit {
        font-size: 11px;
        color: #888;
        font-weight: 500;
    }
.profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.profile-chip {
    padding: 7px 4px;
    border: 1.5px solid #eee;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--k);
    color: var(--text);
}
    .profile-chip.active {
        border-color: var(--text);
        background: var(--text);
        color: white;
    }


.panel-body .accordion-body {
    padding: 15px;
    background: #f9f9f9;
    border-color: #ebebeb;
}
.panel-body .accordion-button {
    padding: 10px 15px;
    background: #f9f9f9;
    border-color: #ebebeb;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}
.panel-body .accordion-item {
    border-color: #ebebeb;
 }
.panel-body .accordion-button::after{ background-size:14px; background-position:center;}
.setmin2cols .tog-btn {
    min-width: 48%;
}
.modal-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}
.text-black{ color:#000 !important}
.text-light{ color:#999 !important}
.modal-footer{ background:#f4f4f4;}
.badge-footer {
    border-top: solid 1px #eee;
    padding: 16px 20px 14px;
}
.mobile-nav-buttons{ display:flex; gap:10px; align-items:center;}
.mobile-nav-buttons .btn{ flex-grow:1; padding-left:6px; padding-right:6px;}


@media screen and (max-width:1450px)
{
    #canvas-toolbar{ right:10px; transform:none;}
}

.card-body p.categorytxt {
    font-size: 11px;
    color: #999 !important;
}
.card{ border-radius:10px; }
.surface-card{ border:solid 1px #eee;}
    .surface-card.active, .surface-card:hover{
        border-color: var(--text);
    }
.card-headerimage{ height:130px;}
.card-headerimage img{ width:100%; height:100%; object-fit:cover; display:block; max-width:100%; border-radius:10px 10px 0 0; }
.selectdeckcolors .selcolor { position:relative;}
.selcolor input[type=radio]{ position:absolute; width:1px; height:1px; opacity:0; visibility:0;}
.selcolor label{ width:24px; height:24px; border-radius:60px; display:inlnie-block; box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.selcolor label:hover{ box-shadow:0 0 0 2px rgba(0, 0, 0, 0.3)}
.selcolor input[type=radio]:checked + label{
    box-shadow: 0 0 0 2px #000;
}

/* ── Responsive top menu (#topmenuModal) — unified DARK theme ──────────
   Makes every customer-end hamburger menu (Home + Drawing — both load
   this file) look like the customer-site navbar: the same dark navy
   gradient, white links and yellow accent. #topmenuModal is only ever
   opened by the d-lg-none hamburger, so it's effectively mobile-only and
   never alters the desktop layout. One block covers BOTH modal markups —
   the Home .list-group-item rows and the Drawing .btn-link rows. */
#topmenuModal .modal-content {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    color: #fff;
    border: 0;
}
/* Top padding — breathing room above the first menu item. */
#topmenuModal .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.10);
    padding-top: 20px;
}
#topmenuModal .modal-title { color: #fff; }
#topmenuModal .modal-body { padding-top: 10px; }

/* Close button + brand logo → white so they read on the dark background.
   (The logo SVG paints itself #232323 / carries a black filter; force
   both off so it shows white.) */
#topmenuModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.9;
}
#topmenuModal .modal-header svg { filter: none !important; }
#topmenuModal .modal-header svg .b { fill: #fff !important; }

/* Links — both the Home .list-group-item rows and the Drawing .btn-link
   rows. Transparent rows, faint white text, subtle hover (matches the
   customer-site nav-link treatment). */
#topmenuModal .list-group,
#topmenuModal .list-group-item {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
#topmenuModal .list-group-item,
#topmenuModal .btn-link {
    color: rgba(255, 255, 255, 0.82) !important;
    text-decoration: none !important;
}
#topmenuModal .list-group-item:hover,
#topmenuModal .btn-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}
/* Logout stays a readable red on the dark surface. */
#topmenuModal .list-group-item.text-danger,
#topmenuModal .text-danger { color: #ff6b6b !important; }

/* Dividers + muted footer text on dark. */
#topmenuModal .dropdown-divider,
#topmenuModal hr {
    border-top-color: rgba(255, 255, 255, 0.12) !important;
    opacity: 1;
}
#topmenuModal .text-muted { color: rgba(255, 255, 255, 0.5) !important; }

/* Match the customer-site menu (image reference) — no item icons. The
   Home menu rows carry Bootstrap icons; hide them so both menus read as
   plain text links like the customer-site navbar. */
#topmenuModal .list-group-item .bi { display: none; }
/* ── Customer-side inline mobile menu (Bootstrap collapse, NO backdrop) ──
   Shared by Home + Drawing. The hamburger toggles a collapse that drops
   below the header and pushes content down, matching the customer-site
   navbar (an inline dropdown, not a popup modal). */
.cd-menu-collapse {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
.cd-menu-nav { display: flex; flex-direction: column; padding: 6px 0 14px; }
.cd-menu-nav > a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cd-menu-nav > a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.cd-menu-account {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    margin: 10px 20px 6px; padding: 6px 12px 6px 6px;
    background: rgba(255, 255, 255, 0.06); border-radius: 999px;
}
.cd-menu-account img { border: 2px solid #f5c518; object-fit: cover; }
.cd-menu-account span { font-weight: 700; color: #fff; }
.cd-menu-logout-form { margin: 0; }
.cd-menu-logout {
    width: 100%; text-align: left; background: transparent; border: 0;
    color: #ff6b6b; font-weight: 600; font-size: 14px; padding: 12px 20px; cursor: pointer;
}
.cd-menu-logout:hover { background: rgba(255, 255, 255, 0.06); }

/* Bordered hamburger box — matches the customer-site navbar-toggler look.
   on-dark / on-light pick the border colour to suit the header behind it. */
.cd-hamburger { border-radius: 8px !important; padding: 6px 10px !important; }
.cd-hamburger.on-dark  { border: 1px solid rgba(255, 255, 255, 0.35) !important; color: #fff !important; }
.cd-hamburger.on-light { border: 1px solid rgba(0, 0, 0, 0.2) !important;  color: #1f2937 !important; }
/* The hamburger SVG paths have no fill attribute (default black, invisible
   on a dark header) — make them follow the button colour so the lines show. */
.cd-hamburger svg { display: block; }
.cd-hamburger svg path { fill: currentColor !important; }

/* Mobile-only topbar subtotal chip — grey label above the value, mirroring
   the desktop #chip-sub. (Replaces the old hard-coded "$22222" placeholder.) */
.ic-sub-top-mob { display: flex; flex-direction: column; align-items: center; line-height: 1.1; text-align: center; }
.ic-sub-top-mob.is-empty { display: none; }
.ic-sub-top-mob .ic-sub-top-label { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9ca3af; }
.ic-sub-top-mob .ic-sub-top-val { font-size: 18px; font-weight: 800; color: var(--y); font-variant-numeric: tabular-nums; }

/* Home desktop customer nav (shared _CustomerDesktopNav partial). The home
   header is light, so the links are dark text with a subtle hover wash. */
.home-topnav { list-style: none; padding: 0; margin: 0; gap: 2px; }
.home-topnav .nav-item { list-style: none; }
.home-topnav .nav-link { color: #1f2937; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
.home-topnav .nav-link:hover { background: rgba(0, 0, 0, 0.05); color: #000; }


.s2-picker-modal .modal-header{ align-items:start;}
/* Wizard steps hidden for now (Stairs 5 / Supply 6 - CD_STEP_ORDER in
   Drawing/Index). HIDE ONLY: remove the class from the markup to bring a step
   back. The #sidebar selector outranks the mobile rule
   `#sidebar .sb-item { display:inline-flex !important }`, so the step also
   stays hidden in the phone bottom step bar. */
.cd-step-hidden,
#sidebar .sb-item.cd-step-hidden,
.step-track .cd-step-hidden { display: none !important; }