/**
 * Snug Role Guides — dashboard-facing "How this works" per role.
 * Scoped to .snug-rg-wrap so nothing leaks into other pages.
 * Reuses the network bundle tokens (--gold, --cream, etc.); guide-specific
 * only where the shared bundle does not already give us a token.
 *
 * v1.9.389 legibility fix: every color-setting selector is prefixed with
 * `.snug-rg-wrap` (or chained on itself for the root) so we clear the
 * (0,1,0) specificity of the bundle-wide `[class*="snug-"] { color: #1e1e1e }`
 * defensive rule that would otherwise win on source order and paint
 * headings/eyebrows/body/timeline near-black on the dark panel.
 * No !important is used; the offending rule does not use it either.
 *
 * @since 1.9.388
 */

.snug-rg-wrap.snug-rg-wrap {
    max-width: 840px;
    margin: 0 auto;
    padding: 32px 22px 90px;
    color: #F0EDE8;
    font-family: var(--font-body, "EB Garamond", Georgia, serif);
    font-size: 17px;
    line-height: 1.62;
    background: var(--ink, #0C0D0F);
}

.snug-rg-wrap .snug-rg-brandrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.snug-rg-wrap .snug-rg-brandrow-label {
    font-family: var(--font-display, "League Spartan", sans-serif);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 12px;
    color: #8b8f98;
}

.snug-rg-wrap .snug-rg-h1,
.snug-rg-wrap h1.snug-rg-h1 {
    font-family: var(--font-display, "League Spartan", sans-serif);
    font-weight: 700;
    font-size: 30px;
    margin: 0.2em 0 0.1em;
    color: #F0EDE8;
}
.snug-rg-wrap .snug-rg-sub {
    color: #8b8f98;
    font-style: italic;
    margin: 0 0 26px;
    font-size: 18px;
}
/* No baseline body-copy rule needed here: .snug-rg-wrap.snug-rg-wrap
 * sets color: #F0EDE8 at (0,2,0), the bundle's `[class*="snug-"] *
 * { color: inherit }` forces descendants to inherit that cream, so
 * every plain <p>/<li> inside the guide comes out cream by default.
 * Role-specific rules below then override where they need something
 * other than cream (muted eyebrows, dimmer step body, etc.). */

/* Sticky in-page section sub-menu. */
.snug-rg-wrap .snug-rg-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 4px 0 26px;
    padding: 10px 0;
    position: sticky;
    top: 0;
    background: var(--ink, #0C0D0F);
    z-index: 5;
    border-bottom: 1px solid var(--border, #2a2d33);
}
.snug-rg-wrap .snug-rg-subnav a {
    font-family: var(--font-display, "League Spartan", sans-serif);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8b8f98;
    text-decoration: none;
    background: var(--ink-mid, #1b1e23);
    border: 1px solid var(--border, #2a2d33);
    border-radius: 7px;
    padding: 6px 11px;
    cursor: pointer;
}
.snug-rg-wrap .snug-rg-subnav a:hover,
.snug-rg-wrap .snug-rg-subnav a:focus {
    color: #F0EDE8;
    border-color: var(--gold-dim, #9c7f43);
    text-decoration: none;
}

.snug-rg-wrap .snug-rg-eyebrow {
    font-family: var(--font-display, "League Spartan", sans-serif);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8b8f98;
    margin: 0 0 6px;
}
.snug-rg-wrap .snug-rg-h2,
.snug-rg-wrap h2.snug-rg-h2 {
    font-family: var(--font-display, "League Spartan", sans-serif);
    font-weight: 600;
    font-size: 24px;
    margin: 0.1em 0 0.1em;
    color: #F0EDE8;
}
.snug-rg-wrap .snug-rg-lede {
    color: #F0EDE8;
    font-size: 19px;
    margin: 0 0 26px;
}
.snug-rg-wrap .snug-rg-lede b {
    color: #c9a45a;
}

.snug-rg-wrap .snug-rg-stagehead {
    font-family: var(--font-display, "League Spartan", sans-serif);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8b8f98;
    margin: 28px 0 12px;
    border-bottom: 1px solid var(--border, #2a2d33);
    padding-bottom: 6px;
    scroll-margin-top: 84px;
}

.snug-rg-wrap ol.snug-rg-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.snug-rg-wrap ol.snug-rg-timeline:before {
    content: "";
    position: absolute;
    left: 15px;
    top: 6px;
    bottom: 10px;
    width: 1px;
    background: var(--border, #2a2d33);
}
.snug-rg-wrap ol.snug-rg-timeline > li {
    position: relative;
    padding: 0 0 22px 46px;
    color: #F0EDE8;
}
.snug-rg-wrap ol.snug-rg-timeline > li:last-child {
    padding-bottom: 0;
}
.snug-rg-wrap .snug-rg-dot,
.snug-rg-wrap span.snug-rg-dot {
    position: absolute;
    left: 4px;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ink-mid, #1b1e23);
    border: 1px solid var(--border, #2a2d33);
    font-family: var(--font-display, "League Spartan", sans-serif);
    font-size: 12px;
    color: #c9a45a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.snug-rg-wrap .snug-rg-timeline li h4 {
    font-family: var(--font-display, "League Spartan", sans-serif);
    font-weight: 600;
    font-size: 16px;
    margin: 1px 0 5px;
    color: #F0EDE8;
}
.snug-rg-wrap .snug-rg-timeline li p {
    margin: 0 0 8px;
    color: #d9d4cc;
}
.snug-rg-wrap .snug-rg-timeline li p:last-child {
    margin-bottom: 0;
}

.snug-rg-wrap .snug-rg-see {
    font-size: 14.5px;
    color: #8b8f98 !important;
    background: var(--ink-mid, #16181c);
    border: 1px solid var(--border, #2a2d33);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 8px 0 0 !important;
}
.snug-rg-wrap .snug-rg-see b {
    color: #c9a45a;
    font-family: var(--font-display, "League Spartan", sans-serif);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.snug-rg-wrap .snug-rg-branch {
    border-left: 2px solid var(--gold-dim, #9c7f43);
    padding: 2px 0 2px 14px;
    margin: 8px 0 0;
    color: #F0EDE8;
}
.snug-rg-wrap .snug-rg-branch .snug-rg-b {
    font-family: var(--font-display, "League Spartan", sans-serif);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #c9a45a;
    display: block;
    margin-bottom: 2px;
}

.snug-rg-wrap .snug-rg-covenant {
    border-left: 3px solid #5fae7d;
    background: rgba(95, 174, 125, 0.07);
    border-radius: 0 10px 10px 0;
    padding: 14px 18px;
    margin: 26px 0 0;
    color: #cfe3d6;
    font-size: 16px;
}
.snug-rg-wrap .snug-rg-covenant b {
    color: #5fae7d;
    font-family: var(--font-display, "League Spartan", sans-serif);
}

.snug-rg-wrap .snug-rg-pill {
    display: inline-block;
    font-family: var(--font-display, "League Spartan", sans-serif);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8b8f98;
    border: 1px solid var(--border, #2a2d33);
    border-radius: 6px;
    padding: 2px 7px;
    margin: 0 2px;
    vertical-align: middle;
}

.snug-rg-wrap .snug-rg-back,
.snug-rg-wrap a.snug-rg-back {
    display: inline-block;
    margin-top: 40px;
    font-family: var(--font-display, "League Spartan", sans-serif);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c9a45a;
    text-decoration: none;
    border: 1px solid var(--border, #2a2d33);
    border-radius: 999px;
    padding: 9px 15px;
    background: var(--ink-mid, #16181c);
}
.snug-rg-wrap .snug-rg-back:hover {
    border-color: #c9a45a;
    text-decoration: none;
}

.snug-rg-mark {
    display: grid;
    grid-template-columns: 12px 12px;
    grid-template-rows: 12px 12px;
    gap: 3px;
}
.snug-rg-mark i {
    display: block;
    width: 12px;
    height: 12px;
    background: var(--gold, #c9a45a);
}
.snug-rg-mark i:nth-child(2) { background: #5b6b7a; }
.snug-rg-mark i:nth-child(3) { background: #3a4a3f; }

/* The dashboard "How this works" control is a .dash-btn now, styled by the
   dashboard's own stylesheet. It used to be styled here, which never worked:
   this file is only enqueued on guide pages, so on a dashboard the rule was
   absent and the link rendered as a default blue anchor among the buttons.
   The class is kept purely as a hook and must not restyle the button. */

@media (max-width: 640px) {
    .snug-rg-wrap {
        padding: 22px 16px 60px;
        font-size: 16px;
    }
    .snug-rg-h1 { font-size: 26px; }
    .snug-rg-h2 { font-size: 21px; }
    .snug-rg-lede { font-size: 17px; }
}