/* Components of this guide. Colours, surfaces and radii come from the Content UI Kit tokens (--mcui-*, content-ui-kit/README.md);
   each fallback after the comma keeps the look on pages without the kit tokens. Game colours are named --d4-*. */
.blog-wrapper { --d4-splinter-terror: oklch(0.74 0.17 25); --d4-splinter-destruction: oklch(0.86 0.14 90); --d4-splinter-hatred: oklch(0.8 0.11 240); }
.blog-wrapper :is(h2, h3)[id] { scroll-margin-block-start: 7rem; }
.htf-toc { margin-block: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--mcui-line, rgb(175 181 207 / .12)); border-radius: var(--mcui-radius, 8px); background: var(--mcui-reference, #202436); }
.htf-toc > p { margin: 0 0 0.5rem; font-weight: 700; color: var(--mcui-ink, #eff0f5); }
.htf-toc ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.4rem 1.5rem; margin: 0; padding-inline-start: 1.25rem; }
.htf-toc a { display: inline-block; padding-block: 0.15rem; color: inherit; text-decoration: underline; text-decoration-color: var(--mcui-link, #ff7478); text-underline-offset: 0.2em; }
.htf-toc a:focus-visible { outline: 2px solid var(--mcui-focus, #eff0f5); outline-offset: 2px; }
.htf-toc a:active { color: var(--mcui-link, #ff7478); }
@media (hover: hover) and (pointer: fine) { .htf-toc a:hover { color: var(--mcui-link, #ff7478); } }
.htf-table { overflow-x: auto; }
.htf-table td { font-variant-numeric: tabular-nums; }
.htf-status { font-weight: 700; }
.htf-fixed { color: var(--mcui-muted, #afb5cf); }
.htf-open { color: var(--mcui-tint, #e1a856); }
.htf-ok { color: var(--mcui-ink, #eff0f5); }
.htf-bag { margin-block: 1.5rem; padding: 1rem; border: 1px solid var(--mcui-line, rgb(175 181 207 / .12)); border-radius: var(--mcui-radius, 8px); background: var(--mcui-reference, #202436); }
.blog-wrapper .htf-bag__slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.htf-bag__slot { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.6rem; padding: 0.6rem 0.75rem; border: 1px solid var(--mcui-row-line, rgb(175 181 207 / .07)); border-radius: var(--mcui-radius-sm, 4px); background: var(--mcui-sunken, #191c29); }
.blog-wrapper .htf-bag__slot { margin: 0; }
.htf-bag__slot--missing { border: 1px dashed var(--mcui-line-strong, rgb(175 181 207 / .24)); background: transparent; }
.blog-wrapper img.htf-bag__shard { grid-row: span 2; inline-size: 2rem; block-size: 3.1rem; border-radius: 0; object-fit: contain; }
.blog-wrapper .htf-bag__slot--missing img.htf-bag__shard { opacity: 0.3; filter: grayscale(1); }
.blog-wrapper img.htf-sp-icon { display: inline-block; inline-size: auto; block-size: 1.6em; margin-inline-end: 0.4rem; border-radius: 0; vertical-align: middle; }
.htf-bag__name { font-size: 1rem; line-height: 1.3; font-weight: 700; color: var(--mcui-ink, #eff0f5); }
.htf-bag__state { font-size: 0.875rem; line-height: 1.4; color: var(--mcui-muted, #afb5cf); }
.htf-bag__ground { display: flex; align-items: center; gap: 0.6rem; margin: 0.75rem 0 0; padding-inline-start: 0.75rem; font-size: 1rem; line-height: 1.45; }
.htf-bag__ground .htf-bag__shard { flex: none; opacity: 0.45; filter: grayscale(0.6); rotate: 24deg; }
.blog-wrapper .htf-bag__ground strong:not(.htf-sp) { color: var(--mcui-ink, #eff0f5); }
.blog-wrapper .htf-bag figcaption { margin-block-start: 0.75rem; color: var(--mcui-muted, #afb5cf); font-size: 0.875rem; font-style: normal; text-align: start; }
@media (max-width: 479.98px) { .blog-wrapper .htf-bag__slots { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .htf-bag__ground .htf-bag__shard { animation: htf-drop linear both; animation-timeline: view(); animation-range: entry 60% cover 40%; }
  }
  .d4tt-card { transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1), translate 0.16s cubic-bezier(0.16, 1, 0.3, 1); }
  @starting-style { .d4tt-card { opacity: 0; translate: 0 4px; } }
}
@keyframes htf-drop {
  from { translate: 0 -0.75rem; rotate: -30deg; opacity: 0; filter: none; }
  55% { translate: 0 0.1rem; rotate: 24deg; opacity: 1; filter: none; }
  to { translate: 0 0; rotate: 24deg; opacity: 0.45; filter: grayscale(0.6); }
}
.blog-wrapper .htf-sp--terror { color: var(--d4-splinter-terror); }
.blog-wrapper .htf-sp--destruction { color: var(--d4-splinter-destruction); }
.blog-wrapper .htf-sp--hatred { color: var(--d4-splinter-hatred); }