/* ============================================================
   Rules / SkapaKaraktar — three-pane sidebar layout
   Used by: Rules.cshtml, SkapaKaraktar.cshtml
   ============================================================ */

/* ---- Content area (kept — class reused in new layout) ---- */
.rules-content {
    padding: 1.5rem 2rem;
    min-height: calc(100vh - 52px);
    overflow-y: auto;
}

/* Prevent vp-tome cards/paragraphs from overflowing narrow panels */
.rules-content .vp-tome p {
    max-width: 64ch;
}

/* ============================================================
   NEW CHROME — vp-dome design system
   ============================================================ */

/* ---- Dot rule — gold ❖ ❖ ❖ separator under sheet-header ---- */
.vp-dot-rule {
    max-width: 1380px; margin: 14px auto 18px; padding: 0 38px;
    display: flex; align-items: center; gap: 12px;
}
.vp-dot-rule__line {
    flex: 1; height: 1px;
    background: linear-gradient(to right, transparent, #a8935e 8%, #a8935e 92%, transparent);
}
.vp-dot-rule__glyph {
    color: #a8935e; font-size: 12px; letter-spacing: 0.5em;
    font-family: 'Cinzel', serif; text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

/* ---- Folio — parchment wrap around all 3 columns ---- */
.vp-folio {
    max-width: 1420px; margin: 0 auto 60px; padding: 28px 30px 38px;
    background: linear-gradient(180deg, rgba(246,240,228,0.42) 0%, rgba(232,222,197,0.32) 100%);
    border: 1px solid rgba(168,147,94,0.32); border-radius: 3px; position: relative;
    box-shadow: inset 0 0 0 1px rgba(255,250,235,0.18), inset 0 0 60px rgba(120,90,50,0.06),
                0 14px 40px -22px rgba(20,10,0,0.55);
}
.vp-folio::before, .vp-folio::after,
.vp-folio > .vp-folio__tick--tr, .vp-folio > .vp-folio__tick--bl {
    content: ""; position: absolute; width: 16px; height: 16px;
    border: 1px solid rgba(168,147,94,0.55); pointer-events: none;
}
.vp-folio::before  { top: 8px; left: 8px;   border-right: none;  border-bottom: none; }
.vp-folio::after   { bottom: 8px; right: 8px; border-left: none;  border-top: none; }
.vp-folio__tick--tr { top: 8px; right: 8px;   border-left: none;  border-bottom: none; }
.vp-folio__tick--bl { bottom: 8px; left: 8px;  border-right: none; border-top: none; }
.vp-folio__grid {
    display: grid; grid-template-columns: 240px 1fr 210px; gap: 26px; align-items: start;
}
.vp-folio__grid:has(.vp-toc.is-hidden) {
    grid-template-columns: 240px 1fr;
}

/* ---- Sidenav — dark leather left sidebar ---- */
.vp-sidenav {
    background: radial-gradient(120% 100% at 20% 0%, #54401f 0%, #3e2d14 60%, #322310 100%);
    border: 1px solid #6b4e2a; border-radius: 4px; padding: 0 0 18px;
    position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow-y: auto;
    box-shadow: inset 0 1px 0 rgba(232,217,184,0.28), inset 0 -1px 0 rgba(0,0,0,0.35),
                0 8px 24px -10px rgba(0,0,0,0.55);
}
.vp-sidenav::-webkit-scrollbar { width: 6px; }
.vp-sidenav::-webkit-scrollbar-thumb { background: #6b4e2a; border-radius: 3px; }
.vp-sidenav__header {
    padding: 18px 22px 14px; border-bottom: 1px solid rgba(168,147,94,0.32);
    margin-bottom: 8px; text-align: center;
}
.vp-sidenav__eyebrow {
    font-family: 'EB Garamond', serif; font-style: italic; font-size: 12px;
    color: #ede0bd; letter-spacing: 0.06em; opacity: 0.85;
}
.vp-sidenav__title {
    font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: 0.22em;
    color: #fbedc8; margin-top: 3px; text-transform: uppercase;
}
.vp-sidenav__group-wrap { padding: 6px 0; }
.vp-sidenav__group-wrap + .vp-sidenav__group-wrap {
    margin-top: 10px; padding-top: 14px; position: relative;
}
.vp-sidenav__group-wrap + .vp-sidenav__group-wrap::before {
    content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px;
    background: linear-gradient(to right, transparent, rgba(168,147,94,0.4), transparent);
}
.vp-sidenav__group {
    display: block; font-family: 'Cinzel', serif; font-size: 9.5px; letter-spacing: 0.22em;
    text-transform: uppercase; color: #c9b990; padding: 6px 22px 4px; opacity: 0.82;
}
.vp-sidenav__item {
    display: block; font-family: 'EB Garamond', serif; font-size: 15px;
    color: #ede0bd; padding: 8px 22px 8px 34px; cursor: pointer;
    text-decoration: none; position: relative; transition: color 0.12s, background 0.12s;
}
.vp-sidenav__item::before {
    content: ""; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: #6b4e2a;
    transition: background 0.12s;
}
.vp-sidenav__item:hover { color: #fbedc8; }
.vp-sidenav__item:hover::before { background: #c9b990; }
.vp-sidenav__item.is-active {
    background: linear-gradient(to right, rgba(168,147,94,0.25), rgba(168,147,94,0.10));
    color: #f0d999; font-family: 'Cinzel', serif; font-size: 12.5px;
    letter-spacing: 0.14em; font-weight: 500; text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(168,147,94,0.2);
}
.vp-sidenav__item.is-active::before { display: none; }
.vp-sidenav__children { display: none; padding: 0; }
.vp-sidenav__accordion.is-expanded .vp-sidenav__children { display: block; }
.vp-sidenav__children .vp-sidenav__item { font-size: 14px; padding-left: 32px; }
.vp-sidenav__children .vp-sidenav__item::before { left: 26px; }
.vp-sidenav__chevron {
    float: right; display: inline-block; transition: transform 0.2s;
    font-style: normal; font-size: 11px; opacity: 0.7; margin-top: 1px;
}
.vp-sidenav__accordion.is-expanded .vp-sidenav__chevron { transform: rotate(90deg); }

/* ---- TOC — parchment card right column ---- */
.vp-toc {
    position: sticky; top: 70px;
    background: linear-gradient(180deg, #f6f0e4 0%, #ede3ca 100%);
    border: 1px solid #d5c7ad; border-radius: 3px; padding: 16px 14px 18px;
    box-shadow: inset 0 0 0 1px rgba(168,147,94,0.18), 0 6px 18px -10px rgba(20,10,0,0.45);
}
.vp-toc.is-hidden { display: none; }
.vp-toc__label {
    font-family: 'EB Garamond', serif; font-style: italic; font-size: 16px;
    color: #7a6638; margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid #c9b990; text-align: center; line-height: 1.2;
}
.vp-toc__list { list-style: none; padding: 0; margin: 0; }
.vp-toc__item {
    display: block; font-family: 'EB Garamond', serif; font-size: 14px;
    padding: 6px 6px 6px 14px; position: relative; color: #2b241c;
    line-height: 1.4; cursor: pointer; text-decoration: none;
}
.vp-toc__item::before {
    content: ""; position: absolute; left: 4px; top: 7px; bottom: 7px;
    width: 1px; background: #c9b990;
}
.vp-toc__item:hover { color: #7a6638; }
.vp-toc__item.is-active { color: #2b241c; font-style: italic; font-weight: 600; }
.vp-toc__item.is-active::before { background: #7a6638; width: 2px; }
.vp-toc__item--h3 { padding-left: 24px; font-size: 13px; }

/* Lyadskapare internal subtab bar — sidebar is primary nav, hide the button row */
#panel-lyadskapare .lyads-sub-bar {
    display: none;
}

/* Grid column min-width — prevents vp-tome blocks from overflowing the content column */
.rules-content {
    min-width: 0;
}

/* Stone / card overflow containment */
.rules-content .vp-tome {
    min-width: 0;
    overflow-x: hidden;
}
.rules-content .vp-tome__stone,
.rules-content .vp-tome__stone-inner,
.rules-content .vp-tome__card {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}
.rules-content .vp-tome__stone-inner {
    padding-left: 24px;
    padding-right: 24px;
}