.sb-sheet > h2:not(:first-child) {
margin-top: clamp(3rem, 6vw, 4.5rem);
} .sb-meta-item {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--sb-muted);
}
.sb-meta-item .sb-icon { width: 1rem; height: 1rem; } .sb-toc {
margin-bottom: var(--sb-stack);
}
.sb-toc__box {
background: var(--sb-white);
border-radius: var(--sb-radius-lg);
}
.sb-toc__title {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 1rem 1.25rem;
font-size: 0.8125rem;
font-weight: 650;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sb-primary);
cursor: pointer;
list-style: none;
}
.sb-toc__title::-webkit-details-marker { display: none; }
.sb-toc__title::after {
content: "";
width: 0.5rem;
height: 0.5rem;
margin-left: auto;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-25%) rotate(45deg);
}
.sb-toc__box[open] .sb-toc__title::after { transform: translateY(15%) rotate(-135deg); }
.sb-toc__count {
display: inline-grid;
place-items: center;
min-width: 1.5rem;
height: 1.5rem;
padding-inline: 0.35rem;
border-radius: 999px;
background: var(--sb-primary-soft);
font-size: 0.75rem;
letter-spacing: 0;
}
.sb-toc__list {
--sb-toc-progress: 0;
position: relative;
margin: 0;
padding: 0 1.25rem 1.25rem;
list-style: none;
counter-reset: sb-toc;
}
.sb-toc__list li { counter-increment: sb-toc; }
.sb-toc__list li + li { margin-top: 0.15rem; }
.sb-toc__list a {
display: flex;
gap: 0.75rem;
padding: 0.5rem 0;
font-size: 0.9375rem;
line-height: 1.4;
color: var(--sb-text);
text-decoration: none;
transition: color 0.2s;
}
.sb-toc__list a::before {
content: counter(sb-toc, decimal-leading-zero);
flex-shrink: 0;
display: inline-grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
margin-top: -0.15rem;
border-radius: 50%;
background: var(--sb-canvas);
font-size: 0.6875rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--sb-muted);
transition: background-color 0.2s, color 0.2s;
}
.sb-toc__list a:hover { color: var(--sb-primary); }
.sb-toc__list a[aria-current="true"] {
color: var(--sb-ink);
font-weight: 600;
}
.sb-toc__list a[aria-current="true"]::before {
background: var(--sb-primary);
color: var(--sb-white);
}
.sb-toc__list a.is-done:not([aria-current="true"])::before {
background: var(--sb-primary-soft);
color: var(--sb-primary);
}
.sb-toc__help { display: none; } @media (min-width: 1180px) {
.sb-doc {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: var(--sb-stack);
align-items: start;
}
.sb-doc > .sb-sheet { grid-column: 1; grid-row: 1; }
.sb-doc > .sb-toc {
grid-column: 2;
grid-row: 1;
position: sticky;
top: calc(var(--sb-header-h) + 1.25rem);
margin: 0;
}
.admin-bar .sb-doc > .sb-toc { top: calc(var(--sb-header-h) + 32px + 1.25rem); }
.sb-toc__box { padding-top: 0.5rem; }
.sb-toc__title { cursor: default; pointer-events: none; padding-inline: 1.5rem; }
.sb-toc__title::after { display: none; }
.sb-toc__list { padding-inline: 1.5rem; } .sb-toc__list::before,
.sb-toc__list::after {
content: "";
position: absolute;
top: 0.5rem;
bottom: 2.25rem;
left: calc(1.5rem + 0.875rem - 1px);
width: 2px;
border-radius: 2px;
background: var(--sb-canvas);
}
.sb-toc__list::after {
background: var(--sb-primary);
transform-origin: top;
transform: scaleY(var(--sb-toc-progress));
}
.sb-toc__list a { position: relative; z-index: 1; }
.sb-toc__help {
display: block;
margin-top: 1rem;
padding: 1.5rem;
border-radius: var(--sb-radius-lg);
background: var(--sb-primary-soft);
}
.sb-toc__help p {
margin: 0 0 0.85rem;
font-weight: 650;
color: var(--sb-ink);
}
.sb-toc__help .sb-btn { width: 100%; justify-content: center; }
} .sb-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 101;
height: 3px;
pointer-events: none;
}
.admin-bar .sb-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .sb-progress { top: 0; } }
.sb-progress span {
display: block;
height: 100%;
background: var(--sb-primary);
transform-origin: left;
transform: scaleX(0);
} @media (prefers-reduced-motion: no-preference) { .sb-reveal {
opacity: 0;
transform: translate3d(0, 12px, 0);
transition:
opacity 0.5s ease-out var(--sb-d, 0ms),
transform 0.6s var(--sb-ease) var(--sb-d, 0ms);
}
.sb-reveal.is-in {
opacity: 1;
transform: none;
} @supports selector(::details-content) {
:root { interpolate-size: allow-keywords; }
.wp-block-details::details-content,
.sb-toc__box::details-content,
.sb-report__details::details-content {
block-size: 0;
overflow: clip;
transition:
block-size 0.3s var(--sb-ease),
content-visibility 0.3s allow-discrete;
}
:is(.wp-block-details, .sb-toc__box, .sb-report__details)[open]::details-content {
block-size: auto;
}
}
}
@media print {
.sb-reveal { opacity: 1 !important; transform: none !important; }
.sb-toc, .sb-progress { display: none !important; }
}