/**
 * Tidy Table of Contents — Front-end styles.
 *
 * Design goals
 * ------------
 * - Full-width block (no arbitrary max-width cap).
 * - Hard reset of inherited theme styles on links (bold, color, etc.).
 * - Clear visual hierarchy: H2 > H3 > H4 via size, weight and indent.
 * - Modern chevron toggle (CSS border, no emoji/unicode hack).
 * - Smooth expand/collapse animation via CSS grid trick.
 * - Three themes: minimal, card, outline.
 * - Multiple list styles: none, decimal, roman, bullet, arrow.
 * - prefers-reduced-motion safe.
 *
 * @package TidyTOC
 */

/* ============================================================
   Design tokens
   ============================================================ */

.stoc {
	/* Layout */
	--stoc-max-width:        100%;
	--stoc-radius:           10px;
	--stoc-border-color:     #e4e7eb;
	--stoc-border-width:     1px;

	/* Spacing */
	--stoc-header-py:        .875rem;
	--stoc-header-px:        1.25rem;
	--stoc-body-py:          .875rem;
	--stoc-body-px:          1.25rem;
	--stoc-row-gap:          .1rem;
	--stoc-indent:           1.25rem;

	/* Typography */
	--stoc-font:             -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--stoc-font-size-base:   .9375rem;   /* 15px */
	--stoc-line-height:      1.5;

	/* Title */
	--stoc-title-color:      #111827;
	--stoc-title-size:       1.0625rem;  /* 17px */
	--stoc-title-weight:     700;
	--stoc-title-ls:         .03em;

	/* Read time */
	--stoc-read-time-color:  #9ca3af;

	/* Links — H2 (root level) */
	--stoc-h2-color:         #1f2937;
	--stoc-h2-size:          .9375rem;   /* 15px */
	--stoc-h2-weight:        500;

	/* Links — H3 (level 2) */
	--stoc-h3-color:         #374151;
	--stoc-h3-size:          .875rem;    /* 14px */
	--stoc-h3-weight:        400;

	/* Links — H4+ (level 3+) */
	--stoc-h4-color:         #6b7280;
	--stoc-h4-size:          .8125rem;   /* 13px */
	--stoc-h4-weight:        400;

	/* Link hover */
	--stoc-hover-color:      #2563eb;
	--stoc-bg:               #f9fafb;

	/* Chevron icon */
	--stoc-chevron-size:     9px;
	--stoc-chevron-color:    #6b7280;

	/* Counter / list marker */
	--stoc-counter-color:    #9ca3af;
	--stoc-marker-color:     #9ca3af;
}

/* ============================================================
   Base block — full content width, clean box
   ============================================================ */

.stoc {
	display:        block;
	margin:         1.75em 0 2.5em;
	padding:        0;
	background:     var(--stoc-bg);
	border:         var(--stoc-border-width) solid var(--stoc-border-color);
	border-radius:  var(--stoc-radius);
	box-sizing:     border-box;
	font-family:    var(--stoc-font);
	font-size:      var(--stoc-font-size-base);
	line-height:    var(--stoc-line-height);
	color:          var(--stoc-h2-color);

	/* Isolation from theme */
	-webkit-font-smoothing: antialiased;
}

/* ============================================================
   Header
   ============================================================ */

.stoc__header {
	padding:       var(--stoc-header-py) var(--stoc-header-px);
	border-bottom: 1px solid var(--stoc-border-color);
}

/* Toggle button (collapsible mode) */
.stoc__toggle {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	padding:         0;
	margin:          0;
	background:      none;
	border:          none;
	cursor:          pointer;
	font-family:     var(--stoc-font);
	font-size:       var(--stoc-title-size);
	font-weight:     var(--stoc-title-weight);
	letter-spacing:  var(--stoc-title-ls);
	text-transform:  uppercase;
	color:           var(--stoc-title-color);
	text-align:      left;
	line-height:     1;
	gap:             .5rem;
}

.stoc__toggle:focus-visible {
	outline:        2px solid var(--stoc-hover-color);
	outline-offset: 3px;
	border-radius:  4px;
}

/* Left side of the toggle (title + optional read time) */
.stoc__toggle-content {
	display:     flex;
	align-items: center;
	gap:         .625rem;
}

/* Non-collapsible title */
.stoc__header > .stoc__title {
	display:        block;
	font-size:      var(--stoc-title-size);
	font-weight:    var(--stoc-title-weight);
	letter-spacing: var(--stoc-title-ls);
	text-transform: uppercase;
	color:          var(--stoc-title-color);
	line-height:    1;
	margin:         0;
	padding:        0;
}

/* Read time badge */
.stoc__read-time {
	font-size:      .6875rem;
	font-weight:    400;
	letter-spacing: 0;
	text-transform: none;
	color:          var(--stoc-read-time-color);
	opacity:        .85;
}

/* ============================================================
   Chevron icon — CSS only, no emoji
   ============================================================ */

.stoc__icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	width:           20px;
	height:          20px;
}

.stoc__icon::after {
	content:      "";
	display:      block;
	width:        var(--stoc-chevron-size);
	height:       var(--stoc-chevron-size);
	border-right: 2px solid var(--stoc-chevron-color);
	border-bottom: 2px solid var(--stoc-chevron-color);
	transform:    rotate(45deg) translate(-2px, -2px);
	transition:   transform .2s ease;
	border-radius: 1px;
}

/* Collapsed state: chevron points right */
.stoc__toggle[aria-expanded="false"] .stoc__icon::after {
	transform: rotate(-45deg) translate(-2px, 2px);
}

@media (prefers-reduced-motion: reduce) {
	.stoc__icon::after {
		transition: none;
	}
}

/* ============================================================
   Body — smooth expand/collapse via CSS grid trick
   ============================================================ */

.stoc__body {
	display:            grid;
	grid-template-rows: 1fr;
	overflow:           hidden;
	transition:         grid-template-rows .22s ease;
}

.stoc__body.is-collapsed {
	grid-template-rows: 0fr;
}

/* Inner wrapper: holds actual padding; clipped to 0 when parent collapses */
.stoc__body-inner {
	overflow:   hidden;
	min-height: 0;
	padding:    var(--stoc-body-py) var(--stoc-body-px);
}

/* No-JS fallback: hidden attribute hides the element entirely */
.stoc__body[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.stoc__body {
		transition: none;
	}
}

/* ============================================================
   List — reset everything, then build hierarchy
   ============================================================ */

.stoc__body-inner ul,
.stoc__body-inner li {
	margin:     0;
	padding:    0;
	list-style: none;
	border:     none;
	background: none;
}

/* Row spacing */
.stoc__body-inner li {
	margin-top: var(--stoc-row-gap);
}

.stoc__body-inner li:first-child {
	margin-top: 0;
}

/* Nested indent */
.stoc__body-inner ul ul {
	padding-left:  var(--stoc-indent);
	margin-top:    .1rem;
	margin-bottom: .1rem;
}

/* ---- Link reset — fight theme specificity ---- */
.stoc__body-inner a,
.stoc__body-inner a:link,
.stoc__body-inner a:visited,
.stoc__body-inner a:hover,
.stoc__body-inner a:active {
	font-family:     var(--stoc-font) !important;
	text-decoration: none !important;
	box-shadow:      none !important;
	border:          none !important;
	background:      none !important;
	outline:         none;
}

/* ---- H2 — root level links ---- */
.stoc__body-inner > ul > li > a {
	color:       var(--stoc-h2-color) !important;
	font-size:   var(--stoc-h2-size) !important;
	font-weight: var(--stoc-h2-weight) !important;
	display:     inline-block;
	padding:     .2rem 0;
}

/* ---- H3 — level 2 links ---- */
.stoc__body-inner > ul > li > ul > li > a {
	color:       var(--stoc-h3-color) !important;
	font-size:   var(--stoc-h3-size) !important;
	font-weight: var(--stoc-h3-weight) !important;
	display:     inline-block;
	padding:     .15rem 0;
}

/* ---- H4+ — level 3+ links ---- */
.stoc__body-inner > ul > li > ul > li > ul li a {
	color:       var(--stoc-h4-color) !important;
	font-size:   var(--stoc-h4-size) !important;
	font-weight: var(--stoc-h4-weight) !important;
	display:     inline-block;
	padding:     .1rem 0;
}

/* ---- Hover state ---- */
.stoc__body-inner a:hover {
	color: var(--stoc-hover-color) !important;
}

/* ---- Focus ---- */
.stoc__body-inner a:focus-visible {
	outline:        2px solid var(--stoc-hover-color);
	outline-offset: 2px;
	border-radius:  3px;
}

/* ============================================================
   Visual separator between H2 groups
   ============================================================ */

.stoc__body-inner > ul > li + li {
	margin-top:  .5rem;
	padding-top: .5rem;
	border-top:  1px solid var(--stoc-border-color);
}

/* ============================================================
   LIST STYLE: decimal (hierarchical numbering)
   ============================================================ */

.stoc--list-decimal .stoc__body-inner > ul { counter-reset: stoc-1; }
.stoc--list-decimal .stoc__body-inner > ul > li { counter-increment: stoc-1; }
.stoc--list-decimal .stoc__body-inner > ul > li > ul { counter-reset: stoc-2; }
.stoc--list-decimal .stoc__body-inner > ul > li > ul > li { counter-increment: stoc-2; }
.stoc--list-decimal .stoc__body-inner > ul > li > ul > li > ul { counter-reset: stoc-3; }
.stoc--list-decimal .stoc__body-inner > ul > li > ul > li > ul > li { counter-increment: stoc-3; }

.stoc--list-decimal .stoc__body-inner > ul > li > a::before {
	content:              counter(stoc-1) ". ";
	color:                var(--stoc-counter-color);
	font-variant-numeric: tabular-nums;
	font-weight:          400;
}

.stoc--list-decimal .stoc__body-inner > ul > li > ul > li > a::before {
	content: counter(stoc-1) "." counter(stoc-2) ". ";
	color:   var(--stoc-counter-color);
}

.stoc--list-decimal .stoc__body-inner > ul > li > ul > li > ul > li > a::before {
	content: counter(stoc-1) "." counter(stoc-2) "." counter(stoc-3) ". ";
	color:   var(--stoc-counter-color);
}

/* Legacy alias — keep old class working */
.stoc--numbered .stoc__body-inner > ul { counter-reset: stoc-1; }
.stoc--numbered .stoc__body-inner > ul > li { counter-increment: stoc-1; }
.stoc--numbered .stoc__body-inner > ul > li > ul { counter-reset: stoc-2; }
.stoc--numbered .stoc__body-inner > ul > li > ul > li { counter-increment: stoc-2; }
.stoc--numbered .stoc__body-inner > ul > li > ul > li > ul { counter-reset: stoc-3; }
.stoc--numbered .stoc__body-inner > ul > li > ul > li > ul > li { counter-increment: stoc-3; }

.stoc--numbered .stoc__body-inner > ul > li > a::before {
	content:              counter(stoc-1) ". ";
	color:                var(--stoc-counter-color);
	font-variant-numeric: tabular-nums;
	font-weight:          400;
}

.stoc--numbered .stoc__body-inner > ul > li > ul > li > a::before {
	content: counter(stoc-1) "." counter(stoc-2) ". ";
	color:   var(--stoc-counter-color);
}

.stoc--numbered .stoc__body-inner > ul > li > ul > li > ul > li > a::before {
	content: counter(stoc-1) "." counter(stoc-2) "." counter(stoc-3) ". ";
	color:   var(--stoc-counter-color);
}

/* ============================================================
   LIST STYLE: roman numerals
   ============================================================ */

.stoc--list-roman .stoc__body-inner > ul { counter-reset: stoc-r1; }
.stoc--list-roman .stoc__body-inner > ul > li { counter-increment: stoc-r1; }
.stoc--list-roman .stoc__body-inner > ul > li > ul { counter-reset: stoc-r2; }
.stoc--list-roman .stoc__body-inner > ul > li > ul > li { counter-increment: stoc-r2; }

.stoc--list-roman .stoc__body-inner > ul > li > a::before {
	content:     counter(stoc-r1, upper-roman) ". ";
	color:       var(--stoc-counter-color);
	font-weight: 400;
}

.stoc--list-roman .stoc__body-inner > ul > li > ul > li > a::before {
	content: counter(stoc-r2, lower-roman) ". ";
	color:   var(--stoc-counter-color);
}

/* ============================================================
   LIST STYLE: bullet
   ============================================================ */

.stoc--list-bullet .stoc__body-inner > ul > li > a::before {
	content:       "• ";
	color:         var(--stoc-marker-color);
	font-weight:   400;
}

.stoc--list-bullet .stoc__body-inner > ul > li > ul > li > a::before {
	content: "◦ ";
	color:   var(--stoc-marker-color);
}

.stoc--list-bullet .stoc__body-inner > ul > li > ul > li > ul > li > a::before {
	content: "▸ ";
	color:   var(--stoc-marker-color);
	font-size: .7em;
}

/* ============================================================
   LIST STYLE: arrow
   ============================================================ */

.stoc--list-arrow .stoc__body-inner li > a::before {
	content:      "→ ";
	color:        var(--stoc-marker-color);
	font-weight:  400;
}

/* ============================================================
   Centered layout
   ============================================================ */

.stoc--centered {
	margin-left:  auto;
	margin-right: auto;
}

/* ============================================================
   THEME: minimal (default)
   ============================================================ */

.stoc--minimal {
	--stoc-bg:           transparent;
	--stoc-border-color: transparent;
	--stoc-radius:       0;
	--stoc-header-py:    0;
	--stoc-header-px:    0;
	--stoc-body-py:      0;
	--stoc-body-px:      0;
	--stoc-font:         inherit;
	--stoc-font-size-base: inherit;
	--stoc-line-height:  inherit;
	--stoc-h2-color:     inherit;
	--stoc-h3-color:     inherit;
	--stoc-h4-color:     inherit;
	--stoc-hover-color:  inherit;

	border: none;
}

.stoc--minimal .stoc__header {
	border-bottom: none;
	padding-bottom: .5rem;
}

.stoc--minimal .stoc__body-inner a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(0, 0, 0, .2);
	text-underline-offset: 2px;
}

.stoc--minimal .stoc__body-inner a:hover {
	text-decoration-color: currentColor;
}

.stoc--minimal .stoc__body-inner > ul > li + li {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

.stoc--minimal .stoc__body-inner li {
	line-height: 1.3;
}

.stoc--minimal .stoc__body-inner ul ul {
	margin-top: 0;
}

/* ============================================================
   THEME: card
   ============================================================ */

.stoc--card {
	--stoc-bg:           #ffffff;
	--stoc-border-color: #e2e8f0;
	--stoc-radius:       12px;
	--stoc-header-py:    1rem;
	--stoc-header-px:    1.25rem;
	--stoc-body-py:      .875rem;
	--stoc-body-px:      1.25rem;

	border: 1px solid var(--stoc-border-color);
}

.stoc--card .stoc__header {
	border-bottom: 1px solid var(--stoc-border-color);
}

/* ============================================================
   THEME: outline
   ============================================================ */

.stoc--outline {
	--stoc-bg:           #f0f4ff;
	--stoc-border-color: transparent;
	--stoc-radius:       12px;
	--stoc-header-py:    1rem;
	--stoc-header-px:    1.25rem;
	--stoc-body-py:      .875rem;
	--stoc-body-px:      1.25rem;
	--stoc-hover-color:  #4f46e5;
	--stoc-title-color:  #312e81;
	--stoc-h2-color:     #1e1b4b;
	--stoc-h3-color:     #3730a3;
	--stoc-h4-color:     #6366f1;

	border: none;
}

.stoc--outline .stoc__header {
	border-bottom: 1px solid rgba(99, 102, 241, .15);
}

.stoc--outline .stoc__body-inner > ul > li + li {
	border-top: none;
	margin-top: .2rem;
	padding-top: .2rem;
}

/* ============================================================
   THEME: custom (colors set via inline CSS variables)
   ============================================================ */

.stoc--custom {
	--stoc-radius:       12px;
	--stoc-header-py:    1rem;
	--stoc-header-px:    1.25rem;
	--stoc-body-py:      .875rem;
	--stoc-body-px:      1.25rem;
}

.stoc--custom .stoc__header {
	border-bottom: 1px solid var(--stoc-border-color);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 600px) {
	.stoc {
		--stoc-header-px: 1rem;
		--stoc-body-px:   1rem;
	}
}

/* ============================================================
   Sticky sidebar
   ============================================================ */

.stoc--sticky {
	position: sticky;
	top: 2rem;
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
}

/* ============================================================
   Scroll spy — active heading highlight
   ============================================================ */

.stoc__body-inner a.is-active {
	color: var(--stoc-hover-color) !important;
	font-weight: 600;
	transition: color .2s ease, font-weight .2s ease;
}

.stoc__body-inner a {
	transition: color .2s ease;
}

/* ============================================================
   Device targeting
   ============================================================ */

.stoc--desktop-only {
	display: block;
}

.stoc--mobile-only {
	display: none;
}

@media (max-width: 782px) {
	.stoc--desktop-only {
		display: none;
	}
	.stoc--mobile-only {
		display: block;
	}
}

/* ============================================================
   View more — truncated TOC
   ============================================================ */

.stoc__view-more {
	display:         inline-block;
	margin-top:      .5rem;
	padding:         .2rem .5rem;
	font-size:       .8125rem;
	color:           var(--stoc-h3-color);
	text-decoration: none;
	cursor:          pointer;
	opacity:         .7;
	transition:      opacity .15s;
}

.stoc__view-more:hover {
	opacity: 1;
	color:   var(--stoc-hover-color);
}

.stoc__body-inner > ul > li.stoc-hidden {
	display: none;
}

/* ============================================================
   Collapsible sub-headings
   ============================================================ */

.stoc-sub-toggle {
	cursor:       pointer;
	display:      inline-flex;
	align-items:  center;
	justify-content: center;
	width:        16px;
	height:       16px;
	margin-right: 4px;
	vertical-align: middle;
	color:        var(--stoc-chevron-color);
	transition:   transform .2s;
}

.stoc-sub-toggle.is-collapsed {
	transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
	.stoc-sub-toggle {
		transition: none;
	}
}

/* ============================================================
   Progress bar
   ============================================================ */

.stoc-progress-bar {
	position:   fixed;
	top:        0;
	left:       0;
	width:      0;
	height:     3px;
	background: var(--stoc-hover-color, #2563eb);
	z-index:    99999;
	transition: width .1s linear;
	pointer-events: none;
}

/* ============================================================
   Copy heading anchor
   ============================================================ */

.stoc-anchor-link {
	position:    absolute;
	left:        -1.5em;
	top:         50%;
	transform:   translateY(-50%);
	opacity:     0;
	color:       var(--stoc-hover-color, #2563eb);
	text-decoration: none;
	transition:  opacity .15s;
	display:     inline-flex;
	align-items: center;
	padding:     4px;
	border-radius: 4px;
}

*:hover > .stoc-anchor-link,
.stoc-anchor-link:focus {
	opacity: 0.5;
}

*:hover > .stoc-anchor-link:hover,
.stoc-anchor-link:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, .05);
}

.stoc-anchor-link.is-copied {
	opacity: 1;
	color:   #16a34a;
}

/* ============================================================
   Floating TOC
   ============================================================ */

.stoc-floating-btn {
	position:        fixed;
	bottom:          24px;
	right:           24px;
	z-index:         99990;
	width:           48px;
	height:          48px;
	border-radius:   50%;
	border:          none;
	background:      #1e293b;
	color:           #fff;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	box-shadow:      0 2px 12px rgba(0, 0, 0, .2);
	transition:      background .15s, transform .15s;
}

.stoc-floating-btn:hover {
	background: #334155;
	transform:  scale(1.05);
}

.stoc-floating-btn.is-active {
	background: #7c3aed;
}

.stoc-floating-panel {
	position:      fixed;
	bottom:        84px;
	right:         24px;
	z-index:       99991;
	width:         320px;
	max-height:    60vh;
	background:    #fff;
	border-radius: 16px;
	box-shadow:    0 4px 24px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .05);
	overflow:      hidden;
	opacity:       0;
	transform:     translateY(12px) scale(.96);
	pointer-events: none;
	transition:    opacity .2s, transform .2s;
}

.stoc-floating-panel.is-open {
	opacity:        1;
	transform:      translateY(0) scale(1);
	pointer-events: auto;
}

.stoc-floating-panel__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         14px 18px;
	border-bottom:   1px solid #f1f5f9;
	background:      #f8fafc;
}

.stoc-floating-panel__title {
	font-size:    13px;
	font-weight:  700;
	color:        #0f172a;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.stoc-floating-panel__close {
	background: none;
	border:     none;
	font-size:  22px;
	color:      #94a3b8;
	cursor:     pointer;
	padding:    0;
	line-height: 1;
}

.stoc-floating-panel__close:hover {
	color: #1e293b;
}

.stoc-floating-panel__body {
	padding:    14px 18px;
	overflow-y: auto;
	max-height: calc(60vh - 52px);
	font-size:  13px;
	line-height: 1.5;
}

.stoc-floating-panel__body ul {
	list-style:  none;
	margin:      0;
	padding:     0;
}

.stoc-floating-panel__body li {
	margin-top: 2px;
}

.stoc-floating-panel__body ul ul {
	padding-left: 14px;
}

.stoc-floating-panel__body a {
	display:         block;
	padding:         5px 8px;
	color:           #374151;
	text-decoration: none;
	border-radius:   6px;
	transition:      background .1s, color .1s;
}

.stoc-floating-panel__body a:hover {
	background: #f1f5f9;
	color:      #1e293b;
}

@media (max-width: 480px) {
	.stoc-floating-panel {
		right:  12px;
		bottom: 72px;
		width:  calc(100vw - 24px);
	}
	.stoc-floating-btn {
		right:  12px;
		bottom: 12px;
	}
}

/* ============================================================
   Dark mode (auto)
   ============================================================ */

@media (prefers-color-scheme: dark) {
	.stoc {
		--stoc-bg:            #1e293b;
		--stoc-border-color:  #334155;
		--stoc-title-color:   #f1f5f9;
		--stoc-h2-color:      #e2e8f0;
		--stoc-h3-color:      #cbd5e1;
		--stoc-h4-color:      #94a3b8;
		--stoc-hover-color:   #818cf8;
		--stoc-chevron-color: #94a3b8;
		--stoc-counter-color: #64748b;
		--stoc-marker-color:  #64748b;
		--stoc-read-time-color: #64748b;
	}

	.stoc--minimal {
		--stoc-bg: transparent;
		--stoc-border-color: transparent;
	}

	.stoc--card {
		--stoc-bg:           #0f172a;
		--stoc-border-color: #1e293b;
	}

	.stoc--outline {
		--stoc-bg:           rgba(99, 102, 241, .1);
		--stoc-title-color:  #c7d2fe;
		--stoc-h2-color:     #e0e7ff;
		--stoc-h3-color:     #a5b4fc;
		--stoc-h4-color:     #818cf8;
	}

	.stoc-anchor-link {
		color: #818cf8;
	}

	*:hover > .stoc-anchor-link:hover {
		background: rgba(255, 255, 255, .1);
	}

	.stoc-floating-btn {
		background: #334155;
	}

	.stoc-floating-panel {
		background: #1e293b;
		box-shadow: 0 4px 24px rgba(0, 0, 0, .4);
	}

	.stoc-floating-panel__header {
		background: #0f172a;
		border-bottom-color: #334155;
	}

	.stoc-floating-panel__title {
		color: #f1f5f9;
	}

	.stoc-floating-panel__body a {
		color: #cbd5e1;
	}

	.stoc-floating-panel__body a:hover {
		background: #334155;
		color: #f1f5f9;
	}
}

/* ============================================================
   Print
   ============================================================ */

@media print {
	.stoc__icon { display: none; }

	/* Show body even when collapsed or hidden */
	.stoc__body[hidden],
	.stoc__body.is-collapsed {
		display:            block !important;
		grid-template-rows: 1fr !important;
		overflow:           visible !important;
	}

	.stoc__body[hidden] .stoc__body-inner,
	.stoc__body.is-collapsed .stoc__body-inner {
		overflow: visible !important;
	}
}