/* Responsive corrections shared by all page types. Do not mask page overflow:
   constrain intrinsic content and keep wide code/tables locally scrollable. */
.app-frame, .app-frame > main { min-width: 0; }
main :is(h1,h2,h3,p,dd,.chip,.btn) { overflow-wrap: anywhere; }
main :is(.tool-main,.tool-aside,.co-section,.co-profile__body,.co-profile__body > *, .model-hub__grid > *, .panel,.markdown-body,.prose,.settings-layout > *, .profile-hero__inner > *) { min-width: 0; max-width: 100%; }
main :is(video,iframe) { max-width: 100%; }
main :is(pre,.coll-table-wrap) { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
main :is(.markdown-body,.prose) { overflow-wrap: anywhere; }
main :is(.markdown-body,.prose) table { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
main :is(.markdown-body,.prose) pre { white-space: pre; overflow-wrap: normal; }
main :is(.markdown-body,.prose) img { max-width: 100%; height: auto; }
.crumbtrail__end { max-width: 100%; flex-basis: 240px; }
.crumbtrail__end-name { display: block; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.crumbtrail__end-tagline { flex: 1 1 0; }
.crumbtrail__item { max-width: 100%; }
.crumbtrail__label { min-width: 0; }
.crumbtrail__open { flex: 0 0 auto; }
.tool-toc { min-width: 0; max-width: 100%; scrollbar-width: thin; }
.tool-layout > * { min-width: 0; }
main :is(input,textarea,select) { max-width: 100%; }
@media (max-width: 1279px) {
  .page-tool .tool-layout { grid-template-columns: minmax(0,1fr); }
  .page-tool .tool-aside__sticky { position: static; max-height: none; overflow: visible; }
  .model-hub__grid { grid-template-columns: minmax(0,1fr); }
  .tool-verdict__grid { grid-template-columns: minmax(0,1fr); }
  .use-case-rank__item { grid-template-columns: 2rem minmax(0,1fr); }
}
@media (min-width: 960px) and (max-width: 1279px) {
  .co-profile__top { grid-template-columns: 72px minmax(0,1fr); }
  .co-profile__cta { grid-column: 2; justify-items: start; text-align: left; }
  .yt-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 720px) {
  main :is(input,textarea,select) { font-size: 16px; }
  .crumbtrail__end { flex-basis: 100%; margin: 4px 0 0; padding-left: 0; }
  .crumbtrail__end-name { max-width: none; flex: 1 1 0; }
  .crumbtrail__end-tagline { display: none; }
  .page-tool .tool-hero__main { grid-template-columns: 48px minmax(0,1fr); }
  .page-tool .tool-hero__main > div { min-width: 0; }
  .page-tool .tool-sticky-cta { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .page-tool { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
  .page-compare .compare-table__tool-link strong { overflow-wrap: anywhere; }
  .page-compare .compare-page__back { flex-wrap: wrap; }
  .co-section__head, .catalog-hero__actions { flex-wrap: wrap; }
  .co-profile__stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .co-profile__stats > *, .model-hub__facts > * { min-width: 0; }
}
@media (max-width: 380px) {
  .site-header__inner { gap: 6px; padding-inline: 8px; }
  .brand--header-icon .brand__mark { width: 28px; height: 28px; }
  .header-search { min-width: 0; }
  .top-actions { gap: 5px; }
  .top-actions .nav-cta { padding-inline: 10px; }
  .home-refresh .hp-index { gap: 14px 8px; }
  .home-refresh .hp-index a { padding-left: 8px; }
  .home-refresh .hp-index a > span { overflow-wrap: anywhere; }
  .model-hub__facts { grid-template-columns: minmax(0,1fr); }
}

/* Keep the fixed tool action bar inside the content column, clear of the sidebar. */
@media (min-width: 981px) { .tool-sticky-cta { left: var(--sidebar-w); } }
.page-tool { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
.tool-sticky-cta__inner > div:first-child { min-width: 0; }
.tool-sticky-cta strong { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tool-sticky-cta__actions { flex-shrink: 0; }
@media (max-width: 480px) {
  .tool-sticky-cta__inner { gap: 12px; }
  .tool-sticky-cta strong { font-size: 13px; }
  .tool-sticky-cta__actions .btn { font-size: 13px; padding: 10px 12px; }
}
/* Shared shortlist tray and lightweight video previews. */
.hp-compare-choice { display: flex; align-items: center; gap: 9px; padding: 12px 18px; font-size: 13px; cursor: pointer; }
.hp-compare-choice[hidden], .hp-compare-tray[hidden], .hp-compare-tray [hidden] { display: none !important; }
.hp-compare-choice input { width: 18px; height: 18px; accent-color: #3155e7; }
.hp-compare-tray { position: sticky; bottom: 12px; z-index: 38; padding: 16px 20px; margin-block: 24px; border: 1px solid #c7d2f5; border-radius: 10px; background: #f4f6ff; box-shadow: 0 6px 24px #19243a20; }
.hp-compare-status { font-size: 14px; margin: 0 0 12px; overflow-wrap: anywhere; }
.hp-compare-tray > div { display: flex; flex-wrap: wrap; gap: 10px; }
.hp-compare-tray .hp-primary, .hp-compare-tray .hp-secondary { display: inline-flex; padding: 10px 16px; border: 1px solid #c7d2f5; border-radius: 6px; font: 600 14px var(--font-body); cursor: pointer; }
.hp-compare-tray .hp-primary { background: #3155e7; color: #fff; }
.hp-compare-tray .hp-secondary { background: #fff; color: #19243a; }
.has-compare-selection .tool-sticky-cta { display: none; }
.yt-preview__play { display: grid; position: absolute; inset: 0; place-items: center; background: #172039; color: #fff; }
.yt-preview__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-preview__button { z-index: 1; background: #e32020; color: #fff; width: 64px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; }
.yt-preview__caption { z-index: 1; position: absolute; bottom: 12px; left: 12px; padding: 4px 9px; border-radius: 4px; background: #111d; color: #fff; font-size: 13px; }
.yt-preview__play:focus-visible { outline: 4px solid #3155e7; outline-offset: -4px; }
.yt-preview__external { font-size: 13px; }
.hp-compare-tray { position: fixed; left: calc(var(--sidebar-w) + 24px); right: 24px; width: auto; margin: 0; bottom: max(12px, env(safe-area-inset-bottom)); }
.has-compare-selection .app-frame { padding-bottom: 170px; }
@media (max-width: 980px) { .hp-compare-tray { left: 16px; right: 16px; } }

/* Tool section navigation: real anchor links, scroll tracking and overflow controls. */
.page-tool .tool-toc {
  position: sticky; top: var(--header-h); z-index: 30; display: flex;
  align-items: center; gap: 8px; padding: 9px 12px; margin-block: 18px 4px;
  overflow: visible; border: 1px solid #e0e6f0; border-radius: 12px;
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px #19243a08;
}
.tool-toc__label { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 0 15px 0 3px; border-right: 1px solid #e2e6ed; color: #65738b; font-size: 11px; font-weight: 700; white-space: nowrap; }
.tool-toc__label svg { color: #3155e7; }
.tool-toc__links { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; scroll-padding-inline: 8px; }
.tool-toc__links::-webkit-scrollbar { display: none; }
.page-tool .tool-toc a { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; min-height: 40px; padding: 8px 13px; border: 1px solid transparent; border-radius: 7px; color: #536179; font: 600 13px var(--font-body); white-space: nowrap; text-decoration: none; transition: color .15s, background .15s; }
.page-tool .tool-toc a:hover { background: #f2f5fc; color: #2342b6; border-color: transparent; }
.page-tool .tool-toc a[aria-current="location"] { background: #eaf0ff; color: #2342b6; border-color: #cedbff; }
.tool-toc__arrow { display: inline-grid; place-items: center; flex: 0 0 32px; width: 32px; height: 36px; padding: 0; background: #f6f8fc; color: #41577e; border: 1px solid #e0e6f0; border-radius: 7px; cursor: pointer; }
.tool-toc__arrow[hidden] { display: none; }
.tool-toc__arrow:disabled { opacity: .35; cursor: default; }
.tool-toc__arrow:hover:not(:disabled) { background: #eaf0ff; border-color: #bccdf8; }
.page-tool .tool-toc :is(a,button):focus-visible { outline: 2px solid #3155e7; outline-offset: -2px; }
.page-tool .tool-main > section[id] { scroll-margin-top: calc(var(--header-h) + 90px); }
@media(max-width:720px) {
  .page-tool .tool-toc { gap: 5px; padding: 6px; border-radius: 9px; margin-block: 12px 0; }
  .tool-toc__label { display: none; }
  .page-tool .tool-toc a { min-height: 42px; padding: 8px 12px; font-size: 12px; }
  .tool-toc__arrow { flex-basis: 30px; width: 30px; height: 40px; }
}
@media(prefers-reduced-motion:reduce) { .page-tool .tool-toc a { transition: none; } }