/* Reign MU Season6 — Guides page navigation and article layout */

.guide-left-rail{
    align-self:start!important;
}

.guide-navigation-panel{
    overflow:visible!important;
}

.guide-navigation-body{
    padding:10px!important;
}

.guide-nav-home{
    min-height:40px;
    display:flex!important;
    align-items:center;
    gap:9px;
    margin:0 0 8px;
    padding:0 12px;
    color:#d8bf7c!important;
    background:linear-gradient(180deg,rgba(115,76,26,.18),rgba(32,21,11,.32))!important;
    border:1px solid rgba(202,150,63,.16)!important;
    border-radius:6px;
    font-size:10px!important;
    font-weight:800!important;
    letter-spacing:.055em;
    text-transform:uppercase;
}

.guide-nav-home:hover,
.guide-nav-home.is-active{
    color:#f0ce7c!important;
    border-color:rgba(222,171,76,.38)!important;
    background:linear-gradient(180deg,rgba(151,102,35,.28),rgba(48,30,12,.46))!important;
    box-shadow:inset 0 1px 0 rgba(255,231,170,.06),0 0 12px rgba(190,132,41,.10)!important;
}

.guide-nav-home-icon{
    color:#c8943d;
    font-size:8px;
}

.guide-nav-category{
    display:block;
    margin:0 0 7px;
    border:1px solid rgba(188,132,45,.14);
    border-radius:6px;
    overflow:hidden;
    background:rgba(14,10,6,.38);
}

.guide-nav-category.is-child{
    margin:7px 0 0 9px;
    border-color:rgba(188,132,45,.11);
}

.guide-nav-category>summary{
    min-height:41px;
    display:flex;
    align-items:center;
    gap:8px;
    position:relative;
    padding:8px 34px 8px 12px;
    list-style:none;
    cursor:pointer;
    user-select:none;
    color:#dec47f;
    background:
        linear-gradient(180deg,rgba(255,238,190,.055),transparent 44%),
        linear-gradient(90deg,rgba(77,50,19,.52),rgba(26,18,10,.42));
    border:0;
    font-size:10.5px;
    font-weight:800;
    line-height:1.3;
    letter-spacing:.035em;
    transition:color .18s ease,background .18s ease,box-shadow .18s ease;
}

.guide-nav-category>summary::-webkit-details-marker{display:none}
.guide-nav-category>summary::marker{content:""}

.guide-nav-category>summary::after{
    content:"+";
    position:absolute;
    right:12px;
    top:50%;
    width:16px;
    height:16px;
    margin-top:-8px;
    display:grid;
    place-items:center;
    color:#a98443;
    font-size:15px;
    font-weight:400;
    line-height:1;
}

.guide-nav-category[open]>summary::after{content:"−"}

.guide-nav-category>summary:hover,
.guide-nav-category[open]>summary{
    color:#f0cf80;
    background:
        linear-gradient(180deg,rgba(255,238,190,.075),transparent 44%),
        linear-gradient(90deg,rgba(98,62,20,.62),rgba(33,21,10,.50));
    box-shadow:inset 3px 0 0 rgba(206,150,56,.55);
}

.guide-nav-category-name{
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
    text-overflow:ellipsis;
}

.guide-nav-count{
    flex:0 0 auto;
    min-width:22px;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 6px;
    margin-right:1px;
    color:#9f895b;
    background:#100b07;
    border:1px solid rgba(192,139,50,.14);
    border-radius:10px;
    font-size:8.5px;
    font-weight:800;
}

.guide-nav-items{
    padding:5px;
    background:linear-gradient(180deg,rgba(8,6,4,.32),rgba(14,9,5,.16));
    border-top:1px solid rgba(190,139,52,.08);
}

.guide-nav-link{
    min-height:34px;
    display:flex!important;
    align-items:flex-start;
    gap:8px;
    padding:8px 9px;
    color:#aa9872!important;
    border-radius:4px;
    font-size:10px!important;
    line-height:1.35;
    overflow-wrap:anywhere;
}

.guide-nav-link:hover{
    color:#e2c475!important;
    background:rgba(165,108,29,.10)!important;
}

.guide-nav-link.is-active{
    color:#f0cd77!important;
    background:linear-gradient(90deg,rgba(160,105,31,.20),rgba(61,39,15,.08))!important;
    box-shadow:inset 2px 0 0 #c38c32!important;
}

.guide-nav-bullet{
    flex:0 0 5px;
    width:5px;
    height:5px;
    margin-top:5px;
    border-radius:50%;
    background:#765a2d;
    box-shadow:0 0 0 2px rgba(118,90,45,.10);
}

.guide-nav-link.is-active .guide-nav-bullet,
.guide-nav-link:hover .guide-nav-bullet{
    background:#d4a64f;
    box-shadow:0 0 7px rgba(212,166,79,.38);
}

.guide-nav-empty{
    padding:9px 10px;
    color:#74664d;
    font-size:9px;
    font-style:italic;
}

.guides-page #content_center{
    min-height:420px!important;
}

.guides-page .guide-page-notice{
    margin:0 0 18px!important;
}

.guide-welcome-card,
.guide-results-card,
.guide-article{
    margin-bottom:0!important;
}

.guide-welcome-card>.entry{
    min-height:360px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:42px 34px!important;
    text-align:center;
}

.guide-welcome-mark{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    margin-bottom:14px;
    color:#d5a74e;
    border:1px solid rgba(207,153,61,.25);
    border-radius:50%;
    background:radial-gradient(circle,rgba(164,106,30,.13),rgba(15,10,6,.20));
    box-shadow:0 0 24px rgba(178,119,33,.08);
    font-size:12px;
}

.guide-welcome-card h2{
    margin:0 0 8px!important;
    color:#e4c672!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:20px!important;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.guide-welcome-card p{
    max-width:520px;
    margin:0!important;
    color:#9b8b69!important;
    font-size:12px!important;
    line-height:1.65!important;
}

.guide-welcome-stats{
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid rgba(191,139,49,.12);
    color:#887756;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.guide-welcome-stats strong{
    color:#d9b85f;
}

.guide-results-list{
    display:grid;
    gap:6px;
}

.guide-result-link{
    min-height:48px;
    display:grid!important;
    grid-template-columns:16px minmax(0,1fr) 18px;
    align-items:center;
    gap:9px;
    padding:10px 13px;
    color:#c8b487!important;
    background:rgba(18,12,7,.46)!important;
    border:1px solid rgba(192,139,48,.10)!important;
    border-radius:6px;
}

.guide-result-link:hover{
    color:#edce80!important;
    background:rgba(91,57,18,.26)!important;
    border-color:rgba(210,155,59,.25)!important;
    transform:translateX(2px);
}

.guide-result-icon{
    color:#a97832;
    font-size:7px;
}

.guide-result-title{
    min-width:0;
    overflow-wrap:anywhere;
    font-size:11.5px;
    font-weight:700;
}

.guide-result-arrow{
    color:#806a40;
    font-size:18px;
    text-align:right;
}

.guide-article>.entry{
    padding:22px 24px 26px!important;
}

.guide-article-topline{
    min-height:30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px 14px;
    margin:0 0 20px;
    padding:0 0 12px;
    border-bottom:1px solid rgba(195,142,51,.13);
}

.guide-article-category{
    display:inline-flex;
    align-items:center;
    min-height:23px;
    padding:0 9px;
    color:#d4b461;
    background:rgba(117,75,23,.17);
    border:1px solid rgba(194,141,51,.16);
    border-radius:12px;
    font-size:8.5px;
    font-weight:900;
    letter-spacing:.065em;
    text-transform:uppercase;
}

.guide-article-date{
    margin-left:auto;
    color:#7f7259;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.045em;
}

.guide-article-content{
    width:100%!important;
    max-width:100%!important;
    color:#cfc0a0!important;
    font-size:12.5px!important;
    line-height:1.75!important;
    overflow-wrap:anywhere;
}

.guide-article-content img,
.guide-article-content video,
.guide-article-content iframe{
    max-width:100%!important;
}

.guide-article-content img{
    height:auto!important;
}

.guide-article-content table{
    max-width:100%!important;
}

.guide-article-content h1,
.guide-article-content h2,
.guide-article-content h3,
.guide-article-content h4{
    color:#dec175!important;
    font-family:Georgia,"Times New Roman",serif!important;
    line-height:1.35!important;
}

.guide-article-content a{
    color:#d8ad52!important;
    text-decoration:none!important;
}

.guide-article-content a:hover{
    color:#f0cc78!important;
}

.guide-article-content pre,
.guide-article-content code{
    max-width:100%;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

@media(max-width:1000px){
    .guide-navigation-body{padding:9px!important}
    .guide-welcome-card>.entry{min-height:260px}
}

@media(max-width:760px){
    .guide-left-rail{order:1!important}
    .guides-page{order:2!important}
    .guide-article>.entry{padding:18px 16px 21px!important}
    .guide-welcome-card>.entry{min-height:220px;padding:30px 18px!important}
}


/* v1.0.1 — Main Guides header uses the exact same visual component as the left sidebar. */
.guides-page #box1 > .guide-main-panel-title{
    width:100%!important;
    box-sizing:border-box!important;
    margin:0!important;
    flex:0 0 auto!important;
    border-radius:11px 11px 0 0!important;
}

.guides-page #box1 > .guide-main-panel-title h2{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}

/* Guides Editor 2.0 public content components */
.guide-article-content .guide-table-wrap{
    width:100%;
    margin:14px 0 18px;
    overflow-x:auto;
    border-radius:6px;
}
.guide-article-content table,
.guide-article-content .guide-table{
    width:100%;
    max-width:100%;
    border-collapse:collapse;
    border-spacing:0;
    background:rgba(18,12,8,.72);
    color:#cfbea0;
    box-shadow:inset 0 0 0 1px rgba(174,123,51,.18);
}
.guide-article-content table th,
.guide-article-content table td{
    padding:9px 11px;
    border:1px solid rgba(174,123,51,.27);
    vertical-align:middle;
    text-align:left;
}
.guide-article-content table th{
    background:linear-gradient(180deg,rgba(101,67,29,.92),rgba(55,34,18,.94));
    color:#e7cb88;
    font-family:Georgia,"Times New Roman",serif;
    font-weight:700;
    text-shadow:0 1px 1px rgba(0,0,0,.85);
}
.guide-article-content table tbody tr:nth-child(even) td{background:rgba(255,255,255,.018)}
.guide-article-content table tbody tr:hover td{background:rgba(190,134,48,.07)}
.guide-note{
    margin:14px 0;
    padding:12px 14px;
    border:1px solid rgba(177,128,58,.42);
    border-left-width:4px;
    border-radius:5px;
    background:rgba(35,24,14,.72);
    color:#d1c09d;
}
.guide-note strong{color:#e0bf76}
.guide-note-info{border-left-color:#5b8da8;background:rgba(28,45,53,.54)}
.guide-note-warning{border-left-color:#d09a42;background:rgba(64,43,15,.58)}
.guide-note-important{border-left-color:#b65b46;background:rgba(66,28,20,.58)}
.guide-columns{display:grid;gap:14px;margin:14px 0}
.guide-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.guide-columns>div{
    min-width:0;
    padding:14px;
    border:1px solid rgba(172,121,51,.24);
    border-radius:6px;
    background:rgba(20,13,9,.58);
}
.guide-card{
    display:flex;
    gap:14px;
    align-items:center;
    margin:14px 0;
    padding:13px;
    border:1px solid rgba(174,123,51,.3);
    border-radius:7px;
    background:linear-gradient(180deg,rgba(47,30,16,.78),rgba(20,13,9,.76));
}
.guide-card-media{
    flex:0 0 76px;
    min-height:76px;
    display:grid;
    place-items:center;
    border:1px solid rgba(196,147,69,.28);
    border-radius:5px;
    background:rgba(0,0,0,.28);
    color:#8e7957;
    font-size:10px;
}
.guide-card-media img{display:block;max-width:72px!important;max-height:72px!important}
.guide-card-body{min-width:0;flex:1}
.guide-card-body h3{margin:0 0 6px!important}
.guide-card-body p:last-child{margin-bottom:0}
.guide-coords{
    display:inline-flex;
    flex-wrap:wrap;
    gap:8px;
    margin:10px 0;
    padding:8px 11px;
    border:1px solid rgba(176,125,55,.33);
    border-radius:5px;
    background:rgba(19,13,8,.7);
    color:#cdbb96;
}
.guide-coords strong{color:#e0be72}
.guide-spoiler{
    margin:14px 0;
    border:1px solid rgba(174,123,51,.3);
    border-radius:6px;
    background:rgba(20,13,9,.64);
    overflow:hidden;
}
.guide-spoiler>summary{
    cursor:pointer;
    padding:10px 13px;
    color:#dfbe75;
    font-weight:700;
    background:rgba(94,61,27,.28);
}
.guide-spoiler-body{padding:12px 13px}
.guide-code{
    margin:14px 0!important;
    padding:12px 14px!important;
    border:1px solid rgba(174,123,51,.26)!important;
    border-radius:5px!important;
    background:#0d0b09!important;
    color:#d0c4aa!important;
    font-family:Consolas,"Courier New",monospace!important;
    font-size:12px!important;
    line-height:1.55!important;
    overflow:auto!important;
}
.guide-article-content figure{margin:16px auto;text-align:center}
.guide-article-content figcaption{margin-top:7px;color:#8e7f63;font-size:11px;font-style:italic}
.guide-article-content blockquote{
    margin:14px 0;
    padding:9px 14px;
    border-left:3px solid rgba(212,168,83,.58);
    color:#bfae8c;
    background:rgba(20,13,9,.42);
}
@media(max-width:700px){
    .guide-columns-2{grid-template-columns:1fr}
    .guide-card{align-items:flex-start}
    .guide-article-content table th,.guide-article-content table td{padding:8px 9px}
}
