.pattern-dna-modal{
    position:fixed;
    inset:0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:sans-serif
}

.pattern-dna-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.78)
}

.pattern-dna-content{
    position:relative;
    z-index:1;
    width:min(92%,620px);
    max-height:90vh;
    overflow-y:auto;
    box-sizing:border-box;
    padding:18px;
    border-radius:10px;
    background:#181818;
    color:#eee
}

.pattern-dna-close{
    position:absolute;
    top:7px;
    right:10px;
    border:0;
    background:none;
    color:#ccc;
    font-size:28px;
    line-height:1;
    cursor:pointer
}

.pattern-dna-title{
    padding-right:30px;
    margin-bottom:14px;
    font-size:20px;
    font-weight:700
}

.pattern-dna-patterns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px
}

.pattern-dna-pattern{
    min-width:0;
    text-align:center
}

.pattern-dna-pattern img{
    display:block;
    width:100%;
    aspect-ratio:2 / 1;
    object-fit:cover;
    border-radius:6px;
    background:#222
}

.pattern-dna-pattern-name{
    margin-top:5px;
    font-size:14px;
    font-weight:700
}

.pattern-dna-pattern-brand{
    margin-top:1px;
    font-size:11px;
    color:#aaa
}

.pattern-dna-overall{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin:4px 0 15px
}

.pattern-dna-overall strong{
    font-size:30px;
    line-height:1
}

.pattern-dna-overall span{
    font-size:13px;
    color:#aaa
}

.pattern-dna-row{
    margin:0 0 9px
}

.pattern-dna-row-head{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:3px;
    font-size:12px
}

.pattern-dna-track{
    height:7px;
    overflow:hidden;
    border-radius:99px;
    background:#333
}

.pattern-dna-fill{
    height:100%;
    border-radius:99px;
    background:#eee
}

.pattern-dna-notes{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:15px;
    font-size:12px
}

.pattern-dna-notes div{
    padding:9px;
    border-radius:6px;
    background:#242424
}

.pattern-dna-foot{
    margin-top:13px;
    font-size:10px;
    line-height:1.35;
    color:#888
}

.pattern-dna-modal-open{
    overflow:hidden
}

#pattern-dna-trigger-btn:disabled{
    opacity:.4;
    cursor:not-allowed
}

@media (max-width:480px){
    .pattern-dna-content{
        width:94%;
        max-height:88vh;
        padding:14px 12px
    }

    .pattern-dna-title{
        font-size:17px
    }

    .pattern-dna-overall strong{
        font-size:27px
    }

    .pattern-dna-notes{
        grid-template-columns:1fr
    }
}

/* Pattern DNA modal polish */

.pattern-dna-intro {
    margin:-8px 30px 12px 0;
    font-size:11px;
    line-height:1.3;
    color:#999;
}

.pattern-dna-camopedia-link {
    display:inline-block;
    margin-top:4px;
    font-size:10px;
    font-weight:700;
    color:#9ac7ff;
    text-decoration:none;
}

.pattern-dna-camopedia-link:hover {
    text-decoration:underline;
}

.pattern-dna-row-label {
    display:flex;
    align-items:center;
    gap:4px;
}

.pattern-dna-info {
    appearance:none;
    border:0;
    padding:0;
    background:transparent;
    color:#aaa;
    font-size:13px;
    line-height:1;
    cursor:pointer;
}

.pattern-dna-info:hover,
.pattern-dna-info[aria-expanded="true"] {
    color:#fff;
}

.pattern-dna-explanation {
    margin-top:5px;
    padding:6px 8px;
    border-radius:5px;
    background:#222;
    color:#aaa;
    font-size:10px;
    line-height:1.35;
}

@media (max-width:480px) {

    .pattern-dna-pattern-name {
        font-size:13px;
    }

    .pattern-dna-pattern-brand {
        font-size:10px;
    }

    .pattern-dna-camopedia-link {
        font-size:9px;
    }

    .pattern-dna-row {
        margin-bottom:8px;
    }

    .pattern-dna-row-head {
        font-size:11px;
    }

    .pattern-dna-track {
        height:6px;
    }

    .pattern-dna-explanation {
        font-size:10px;
    }
}

/* Compare toolbar DNA Match button */

#pattern-dna-trigger-btn {
    background:#25262a;
    color:#fff;
    border:1px solid #666a75;
    box-shadow:inset 3px 0 0 #7168d8;
    font-weight:700;
    cursor:pointer;
}

#pattern-dna-trigger-btn:hover {
    background:#303136;
    border-color:#858996;
}

#pattern-dna-trigger-btn:active {
    background:#1d1e21;
}

#pattern-dna-trigger-btn:disabled {
    background:#25262a;
    color:#888;
    border-color:#444;
    box-shadow:inset 3px 0 0 #4b4775;
    opacity:.55;
    cursor:not-allowed;
}

/* Pattern DNA public measured details */

.pattern-dna-measured {
    margin-top:14px;
    border-top:1px solid #333;
    border-bottom:1px solid #333;
}

.pattern-dna-measured > summary {
    position:relative;
    padding:12px 28px 12px 2px;
    color:#eee;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    list-style:none;
}

.pattern-dna-measured > summary::-webkit-details-marker {
    display:none;
}

.pattern-dna-measured > summary::after {
    content:"+";
    position:absolute;
    right:4px;
    top:8px;
    color:#aaa;
    font-size:20px;
    font-weight:400;
}

.pattern-dna-measured[open] > summary::after {
    content:"−";
}

.pattern-dna-measured-body {
    padding:0 2px 12px;
}

.pattern-dna-detail-intro {
    margin:0 0 10px;
    color:#888;
    font-size:10px;
    line-height:1.4;
}

.pattern-dna-detail-head,
.pattern-dna-detail-row {
    display:grid;
    grid-template-columns:78px minmax(0,1fr) minmax(0,1fr);
    gap:7px;
}

.pattern-dna-detail-head {
    padding:6px 0;
    border-bottom:1px solid #444;
    color:#ddd;
    font-size:10px;
    font-weight:700;
    text-align:center;
}

.pattern-dna-detail-section {
    margin-top:13px;
}

.pattern-dna-detail-section-title {
    margin-bottom:5px;
    color:#fff;
    font-size:12px;
    font-weight:700;
}

.pattern-dna-detail-row {
    align-items:start;
    padding:5px 0;
    border-bottom:1px solid #292929;
    font-size:10px;
    line-height:1.3;
}

.pattern-dna-detail-label {
    color:#999;
}

.pattern-dna-detail-value {
    min-width:0;
    color:#ddd;
    text-align:center;
    overflow-wrap:anywhere;
}

.pattern-dna-detail-summary {
    color:#bbb;
    font-size:9px;
    line-height:1.35;
}

.pattern-dna-detail-summary .pattern-dna-detail-value {
    color:#aaa;
    font-weight:400;
}

.pattern-dna-swatch-list {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:4px;
}

.pattern-dna-swatch-chip {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    color:#888;
    font-size:7px;
    line-height:1;
}

.pattern-dna-swatch-box {
    display:block;
    width:20px;
    height:14px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.25);
    border-radius:3px;
}

.pattern-dna-palette-row {
    align-items:center;
}

@media (max-width:480px) {

    .pattern-dna-detail-head,
    .pattern-dna-detail-row {
        grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);
        gap:5px;
    }

    .pattern-dna-detail-row {
        font-size:9.5px;
    }

    .pattern-dna-detail-summary {
        font-size:8.5px;
    }

    .pattern-dna-swatch-list {
        gap:3px;
    }

    .pattern-dna-swatch-box {
        width:18px;
        height:13px;
    }

    .pattern-dna-measured > summary {
        font-size:12px;
    }
}