/* The common finishing layer. Product and Studio geometry remains route-owned. */
html {scroll-padding-top: calc(var(--te-header-height, 64px) + 16px)}
html body {font-family: var(--te-font); line-height: 1.5; color: var(--te-text)}
html body :is(main, section, article, form, fieldset) {min-width: 0}
html body :is(button, input, textarea, select) {font: inherit}
html body :is(input, textarea, select) {border-radius: var(--te-radius-small); accent-color: var(--te-primary)}
html body label {text-transform: none; letter-spacing: normal; line-height: 1.5}
html body :is(button, .te-button, .gear-button, .icon-button, summary, .text-button) {min-height: 44px}
html body :is(.te-button, .gear-button, .icon-button) {border-radius: var(--te-radius-small); line-height: 1.4}
html body :is(a, button, input, textarea, select, summary):focus-visible {outline: var(--te-focus); outline-offset: 3px}
/* Shared collection carousel controls; route-specific compact sizes may override. */
html body :is(.gear-row-arrow, .te-home .video-row-arrows button) {display: grid; place-items: center; flex-shrink: 0; box-sizing: border-box; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 1px solid var(--te-border); border-radius: var(--te-radius-small, 8px); background: var(--te-elevated); color: var(--te-text); font: 400 25px/1 var(--te-font); box-shadow: none; cursor: pointer}
html body :is(.gear-row-arrow, .te-home .video-row-arrows button):hover:not(:disabled) {background: var(--te-hover)}
html body :is(.gear-row-arrow, .te-home .video-row-arrows button):disabled {opacity: .4; cursor: default}
html body :is(.gear-row-arrow, .te-home .video-row-arrows button):focus-visible {outline: var(--te-focus); outline-offset: 3px}
html body .te-home .video-row-arrows {gap: 8px}
html body :is(.fine-print, .form-note, .results-status, .detail-meta, .empty-note) {color: var(--te-muted)}
html body :is(.form-error, .gear-error) {color: var(--te-error)}
html body :is(.community-post, .community-empty, .feedback-form, .feedback-promise, .feedback-context, .feedback-success, .review-card, .context-panel, .learning-panel, .source-box, .shopping-box, .spec-note) {background: var(--te-surface); border: 1px solid var(--te-border); border-radius: var(--te-radius); box-shadow: none}
html body :is(.community-tabs button, .filter-buttons button, .text-button, .save-resource, .te-button.secondary) {background: var(--te-elevated); color: var(--te-text); border: 1px solid var(--te-border)}
html body :is(.community-tabs button[aria-pressed=true], .filter-buttons button[aria-pressed=true]) {background: var(--te-selected); border-color: var(--te-blue); font-weight: 700; box-shadow: inset 0 -2px var(--te-blue)}
html body :is(.community-tabs button, .text-button, .te-button.secondary):hover {background: var(--te-hover)}
html body .text-button {padding: 8px 12px; border-radius: var(--te-radius-small); overflow-wrap: anywhere}
html body .profile-link {background: transparent; border-color: transparent; text-align: left}
html body .watch-description, html body .watch-description-toggle {border-radius: var(--te-radius)}
html body :is(.community-author, .community-heading, .review-toolbar) {gap: 12px; flex-wrap: wrap}
html body :is(.community-author time, .community-author small) {color: var(--te-muted)}
html body :is(.outcome-details dd, .review-card p, .feedback-context, .source-box a, .shopping-box a) {overflow-wrap: anywhere}
html body footer {background: var(--te-surface)!important; padding-block: 32px; border-top: 1px solid var(--te-border)}
html body .te-modal {border-radius: var(--te-radius); width: min(720px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain}
html body .modal-top {background: var(--te-elevated); border-bottom: 1px solid var(--te-border); gap: 16px}
html body .modal-content {background: var(--te-surface); padding: clamp(16px, 4vw, 28px)}
html body .modal-top h2 {font-size: 20px; line-height: 1.3}
html body .modal-top button {min-width: 44px}
html body .profile-actions, html body .profile-session-actions, html body .profile-save-actions {display: flex; flex-wrap: wrap; gap: 12px}
.te-account-dropdown {position: fixed; z-index: 120; width: min(320px, calc(100vw - 16px)); margin: 0; padding: 8px; color: var(--te-text); background: var(--te-elevated); border: 1px solid var(--te-border); border-radius: var(--te-radius); box-shadow: var(--te-menu-shadow); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable}
.te-account-dropdown[hidden] {display: none!important}
.te-account-identity {display: flex; align-items: center; gap: 12px; padding: 12px; min-width: 0}
.te-account-identity>div {min-width: 0}
.te-account-identity :is(strong, small) {display: block; overflow-wrap: anywhere}
.te-account-identity small {color: var(--te-muted); font-size: 13px}
.te-account-group {display: grid; padding: 6px 0; border-top: 1px solid var(--te-border)}
.te-account-group>p {font-size: 12px; font-weight: 650; color: var(--te-muted); margin: 6px 12px}
html body .te-account-dropdown :is(a, button) {display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px 12px; color: var(--te-text); background: transparent; border: 0; border-radius: var(--te-radius-small); text-align: left; text-decoration: none; font-size: 14px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; cursor: pointer}
html body .te-account-dropdown :is(a, button):hover {background: var(--te-hover)}
html body .te-account-dropdown :is(a, button):focus-visible {outline-offset: -2px; background: var(--te-hover)}
.te-account-dropdown .form-error {margin: 8px 12px; font-size: 14px}
.te-account-dropdown .form-error:empty {display: none}
@media(max-width: 700px) {
 html body :is(.community-tabs, .community-find, .profile-photo-actions) {gap: 8px; flex-wrap: wrap}
 html body .community-author time {width: 100%; margin-left: 0}
 html body :is(.modal-top, .community-post, .review-card) {padding: 16px}
 html body footer {padding-inline: 20px}
}
@media(prefers-reduced-motion: reduce) {html {scroll-behavior: auto} html body :is(button, a, dialog, .gear-card, .video-card) {transition: none; animation: none}}
@media(forced-colors: active) {.te-account-dropdown {background: Canvas; color: CanvasText; border-color: CanvasText} html body .te-account-dropdown :is(a, button) {color: CanvasText} html body :focus-visible {outline-color: Highlight}}
@media(forced-colors: active) {html body :is(.gear-row-arrow, .te-home .video-row-arrows button) {background: Canvas; color: ButtonText; border-color: ButtonText} html body :is(.gear-row-arrow, .te-home .video-row-arrows button):hover:not(:disabled) {background: Highlight; color: HighlightText}}