.hod-lists {
    --hl-bg: #fff; --hl-surface: #fafafa; --hl-text: #171717; --hl-muted: #626262;
    --hl-border: #dedede; --hl-green: #047857; --hl-tint: #ecfdf5;
    color: var(--hl-text); font-size: .875rem; line-height: 1.5; min-width: 0;
}
.dark .hod-lists { --hl-bg: #171717; --hl-surface: #202020; --hl-text: #f5f5f5; --hl-muted: #a3a3a3; --hl-border: #404040; --hl-green: #6ee7b7; --hl-tint: #15342a; color-scheme: dark; }
.hod-lists [hidden] { display: none !important; }
.hod-lists .hod-list-icon { display: inline-block; width: 1rem; height: 1rem; flex: 0 0 auto; vertical-align: middle; pointer-events: none; }
.hod-list-section-heading { display: inline-flex; align-items: center; gap: .45rem; }
.hod-list-section-heading .hod-list-icon { color: var(--hl-muted); width: .9375rem; height: .9375rem; }
.hod-lists h1 { font-size: clamp(1.7rem, 3vw, 2rem); line-height: 1.2; font-weight: 750; letter-spacing: -.035em; overflow-wrap: anywhere; }
.hod-lists h2 { font-size: 1.2rem; line-height: 1.4; font-weight: 700; letter-spacing: -.025em; }
.hod-lists h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; overflow-wrap: anywhere; }
.hod-lists-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.hod-lists-heading p { color: var(--hl-muted); margin-top: .4rem; }
.hod-lists .hod-list-muted { color: var(--hl-muted); }
.hod-lists button, .hod-lists input, .hod-lists textarea, .hod-lists select { font-family: inherit; }
.hod-lists :is(button, a, input, textarea, select, [tabindex="0"]):focus-visible { outline: 2px solid var(--hl-green); outline-offset: 2px; }
.hod-list-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .55rem .9rem; font-size: .8125rem; line-height: 1.4; font-weight: 600; white-space: nowrap; border: 1px solid var(--hl-border); border-radius: .5rem; background: var(--hl-bg); color: var(--hl-text); cursor: pointer; transition: background .15s, border-color .15s; text-decoration: none; }
.hod-list-button:hover { background: var(--hl-surface); border-color: var(--hl-muted); }
.hod-list-button:disabled { opacity: .55; cursor: wait; }
.hod-lists .hod-list-primary { background: #047857; color: #fff; border-color: #047857; }
.hod-lists .hod-list-primary:hover { background: #065f46; border-color: #065f46; }
.hod-list-button svg, .hod-list-curator svg, .hod-list-summary > svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.hod-list-text-button { min-height: 2.75rem; padding: .4rem .6rem; font-size: .8125rem; font-weight: 600; color: var(--hl-green); cursor: pointer; border-radius: .4rem; }
.hod-list-text-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.hod-list-collection { display: grid; gap: .65rem; margin-bottom: 1.5rem; }
.hod-list-collection:empty { display: none; }
.hod-list-summary { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; background: var(--hl-bg); border: 1px solid var(--hl-border); border-radius: .6rem; min-width: 0; text-decoration: none; }
.hod-list-summary[data-active="true"] { border-color: var(--hl-green); background: var(--hl-tint); }
.hod-list-summary-title { flex: 1; min-width: 0; font-weight: 650; color: var(--hl-text); overflow-wrap: anywhere; }
.hod-list-summary-title small { display: block; color: var(--hl-green); font-size: .75rem; font-weight: 500; margin-top: .2rem; }
.hod-list-covers { --cover-fan: 0; position: relative; display: block; isolation: isolate; flex: 0 0 5.5rem; width: 5.5rem; height: 3.4rem; }
.hod-list-covers:empty::before { content: ''; position: absolute; inset: .3rem 1.75rem; border: 1px dashed var(--hl-border); border-radius: .25rem; background: var(--hl-surface); rotate: -5deg; }
.hod-list-covers img {
    --cover-x: 0px; --cover-y: calc(-5px * var(--cover-fan)); --cover-angle: 0deg;
    position: absolute; left: 50%; top: 50%; width: 2rem; height: 2.8rem; object-fit: cover;
    border-radius: .2rem; border: 1.5px solid var(--hl-bg); background: var(--hl-surface);
    box-shadow: 0 1px 4px #0003; transform-origin: 50% 85%;
    translate: calc(-50% + var(--cover-x)) calc(-50% + var(--cover-y)); rotate: var(--cover-angle); scale: 1;
    transition: translate 240ms cubic-bezier(.22, 1, .36, 1), rotate 240ms cubic-bezier(.22, 1, .36, 1), scale 240ms cubic-bezier(.22, 1, .36, 1), box-shadow 240ms ease-out;
}
.hod-list-covers img:nth-child(1) { --cover-x: calc(-16px - 8px * var(--cover-fan)); --cover-y: calc(2px - 4px * var(--cover-fan)); --cover-angle: calc(-13deg - 10deg * var(--cover-fan)); z-index: 1; }
.hod-list-covers img:nth-child(2) { z-index: 2; scale: calc(1 + .03 * var(--cover-fan)); }
.hod-list-covers img:nth-child(3) { --cover-x: calc(16px + 8px * var(--cover-fan)); --cover-y: calc(2px - 4px * var(--cover-fan)); --cover-angle: calc(13deg + 10deg * var(--cover-fan)); z-index: 3; }
.hod-list-covers:has(img:nth-child(2):last-child) img:first-child { --cover-x: calc(-9px - 8px * var(--cover-fan)); --cover-angle: calc(-10deg - 10deg * var(--cover-fan)); }
.hod-list-covers:has(img:nth-child(2):last-child) img:last-child { --cover-x: calc(9px + 8px * var(--cover-fan)); --cover-angle: calc(10deg + 10deg * var(--cover-fan)); }
.hod-list-covers img:only-child { --cover-x: 0px; --cover-y: calc(-4px * var(--cover-fan)); --cover-angle: calc(-4deg + 4deg * var(--cover-fan)); }
@media (prefers-reduced-motion: no-preference) {
    .hod-list-summary:focus-within .hod-list-covers { --cover-fan: 1; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hod-list-summary:hover .hod-list-covers { --cover-fan: 1; }
}
.hod-list-panel { border: 1px solid var(--hl-border); background: var(--hl-bg); border-radius: .75rem; padding: 1.25rem; }
.hod-lists :is(input:not([type="hidden"], [type="checkbox"]), textarea, select) { display: block; box-sizing: border-box; width: 100%; font-size: 1rem; line-height: 1.5; padding: .65rem .75rem; color: var(--hl-text); background: var(--hl-bg); border: 1px solid #aaa; border-radius: .5rem; box-shadow: none; }
.dark .hod-lists :is(input:not([type="hidden"], [type="checkbox"]), textarea, select) { border-color: #626262; }
.hod-lists textarea { resize: vertical; min-height: 4rem; max-height: 12rem; }
.hod-list-character-count { text-align: right; font-size: .6875rem; color: var(--hl-muted); margin-top: .3rem; font-variant-numeric: tabular-nums; }
.hod-lists .hod-list-danger { color: #a33b3b; }
.dark .hod-lists .hod-list-danger { color: #fca5a5; }
.hod-list-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.hod-list-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; align-items: stretch; }
.hod-list-products > * { min-width: 0; }
.hod-list-products img[src=""] { visibility: hidden; }
.hod-list-products .relative:has(> img[src=""]) { background: var(--hl-surface); }
.hod-list-products .relative:has(> img[src=""])::after { content: 'No cover image'; position: absolute; inset: 0; display: grid; place-content: center; color: var(--hl-muted); font-size: .75rem; }
.hod-list-empty { text-align: center; padding: 2.5rem 1rem; }
.hod-list-empty > svg { width: 5rem; height: 4.5rem; color: var(--hl-green); margin: 0 auto 1rem; }
.hod-list-empty h3 { font-size: 1rem; }
.hod-list-empty p { color: var(--hl-muted); margin: .5rem 0 1rem; font-size: .8125rem; }
.hod-list-search-label { display: block; color: var(--hl-muted); font-size: .75rem; margin-top: .75rem; margin-bottom: .4rem; }
.hod-list-search-wrap { position: relative; }
.hod-list-search-wrap svg { width: 1rem; height: 1rem; position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--hl-muted); pointer-events: none; }
.hod-list-search-wrap input { padding-left: 2.1rem !important; }
.hod-list-search-status { font-size: .6875rem; margin: .5rem 0 .35rem; min-height: 1rem; }
.hod-list-load-more { display: flex; margin: .75rem auto; }
.hod-list-notice { color: var(--hl-green); font-size: .8125rem; margin: 0 0 1rem; overflow-wrap: anywhere; }
.hod-list-notice:empty { display: none; }
.hod-list-error { color: #b91c1c; font-size: .8125rem; margin: .5rem 0; }
.dark .hod-list-error { color: #fca5a5; }
.hod-list-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.hod-list-dialog { max-width: min(28rem, calc(100vw - 2rem)); width: 100%; margin: auto; padding: 1.5rem; border: 1px solid var(--hl-border); border-radius: .75rem; background: var(--hl-bg); color: var(--hl-text); box-shadow: 0 10px 60px #0003; }
.hod-list-dialog::backdrop { background: #0006; }
.hod-list-dialog p { color: var(--hl-muted); margin: .6rem 0 1.25rem; }
.hod-list-dialog .hod-list-actions { justify-content: flex-end; margin-top: 1rem; }
.hod-list-delete-confirm { background: #b91c1c; color: white; border-color: #b91c1c; }
.hod-list-delete-confirm:hover { background: #991b1b; }
.hod-list-shared { max-width: 76rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; min-height: 60vh; }
.hod-list-curator { display: inline-flex; align-items: center; gap: .65rem; font-size: .8125rem; color: var(--hl-muted); margin-bottom: 1.5rem; }
.hod-list-curator strong { color: var(--hl-text); font-weight: 600; }
.hod-list-curator img { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; }
.hod-list-shared-heading {
    --hero-fan: 0; --hero-step: 22px; --hero-spread: 6px;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 2rem;
    margin-bottom: 2rem;
}
.hod-list-hero-copy { min-width: 0; }
.hod-list-shared-heading .hod-list-curator { margin: 0; min-width: 0; max-width: 100%; }
.hod-list-shared-heading .hod-list-curator span { min-width: 0; overflow-wrap: anywhere; }
.hod-list-shared .hod-list-shared-heading h1 { font-size: clamp(1.5rem, 2.7vw, 2.25rem); font-weight: 400; line-height: 1.15; letter-spacing: -.025em; }
.hod-list-shared-heading .hod-list-description { margin-top: 1rem; color: var(--hl-muted); font-size: .875rem; line-height: 1.75; }
.hod-list-hero-footer { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.25rem; }
.hod-list-hero-footer .hod-list-actions { margin: 0; }
.hod-list-hero-art { min-width: 0; }
/* .hod-list-hero-scroll { overflow: hidden; } */
.hod-list-hero-fan { position: relative; isolation: isolate; width: 100%; height: 18rem; }
.hod-list-hero-cover {
    --cover-lift: 0px;
    position: absolute; left: 50%; top: 48%; width: 9rem; aspect-ratio: 3 / 4;
    border: 3px solid var(--hl-bg); border-radius: .4rem; background: var(--hl-surface);
    box-shadow: 0 4px 8px #0002, 0 14px 28px #0002; transform-origin: 50% 90%;
    translate: calc(-50% + var(--cover-offset) * (var(--hero-step) + var(--hero-spread) * var(--hero-fan))) calc(-50% + var(--cover-depth) * 18px + var(--cover-lift));
    rotate: calc(var(--cover-tilt) * (1 + .35 * var(--hero-fan))); scale: 1; z-index: var(--cover-order);
    transition: translate 280ms cubic-bezier(.22, 1, .36, 1), rotate 280ms cubic-bezier(.22, 1, .36, 1), box-shadow 200ms ease-out;
}
.hod-list-hero-cover img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: .2rem; }
.hod-list-hero-cover-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: .75rem; text-align: center; overflow: hidden; overflow-wrap: anywhere; font-size: .875rem; font-weight: 400; color: var(--hl-green); background: var(--hl-tint); }
.hod-list-hero-cover:focus-visible { z-index: 201; }
.hod-list-hero-empty { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: no-preference) {
    .hod-list-shared-heading:focus-within { --hero-fan: 1; }
    .hod-list-hero-cover:focus-visible { --cover-lift: -14px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hod-list-shared-heading:hover { --hero-fan: 1; }
    .hod-list-hero-cover:hover { --cover-lift: -14px; z-index: 201; box-shadow: 0 6px 12px #0002, 0 18px 32px #0003; }
}
.hod-list-public-products { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.hod-list-public-products .hs-carousel-slide { margin: 0; }
.hod-profile-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.hod-profile-list-grid .hod-list-summary:hover { border-color: var(--hl-green); }

/* A quieter, compact workspace for curating products. */
.hod-lists-portal { flex: 1; width: 100%; padding: 1.5rem 0 3rem 2rem; font-weight: 400; }
.hod-lists-portal h1 { font-size: 1.5rem; font-weight: 550; letter-spacing: -.025em; }
.hod-lists-portal h2 { font-size: 1rem; font-weight: 500; letter-spacing: -.015em; }
.hod-lists-portal h3 { font-size: .8125rem; font-weight: 500; letter-spacing: 0; }
.hod-lists-portal .hod-lists-heading { margin-bottom: 1.1rem; }
.hod-lists-portal .hod-lists-heading p { font-size: .8125rem; margin-top: .3rem; }
.hod-lists-portal :is(.hod-list-button, .hod-list-text-button) { min-height: 2.25rem; font-weight: 500; font-size: .75rem; padding: .4rem .75rem; border-radius: .4rem; }
.hod-lists-portal .hod-list-text-button { font-weight: 400; }
.hod-lists-portal .hod-list-summary { padding: .65rem .85rem; }
.hod-lists-portal .hod-list-summary[data-active="true"] { background: var(--hl-surface); border-color: var(--hl-border); }
.hod-lists-portal .hod-list-summary-title { font-size: .8125rem; font-weight: 400; }
.hod-lists-portal .hod-list-summary-title small { font-family: var(--font-sans); font-size: .6875rem; font-weight: 400; color: var(--hl-muted); }
.hod-lists-portal .hod-list-covers img { width: 2rem; height: 2.8rem; }
.hod-lists-portal .hod-list-collection { margin-bottom: 1rem; gap: .5rem; }
.hod-lists-portal .hod-list-panel { border-radius: .65rem; padding: 1.1rem 1.25rem 0; }
.hod-list-details { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr); gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--hl-border); }
.hod-list-details > [data-product-inputs], .hod-list-details > input { display: none; }
.hod-list-details > .hod-list-error { grid-column: 1 / -1; }
.hod-list-field { min-width: 0; }
.hod-list-field label { display: block; font-size: .75rem; font-weight: 500; margin-bottom: .4rem; }
.hod-list-field label .hod-list-muted { font-weight: 400; }
.hod-lists-portal :is(input:not([type="hidden"], [type="checkbox"]), textarea, select) { min-height: 2.25rem; padding: .45rem .65rem; border-color: var(--hl-border); font-size: .875rem; line-height: 1.45; border-radius: .4rem; }
.hod-lists-portal textarea { min-height: 3.4rem; }
.hod-list-workspace { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); gap: 1.5rem; padding-block: 1.1rem; }
.hod-list-picker, .hod-list-preview { min-width: 0; }
.hod-list-search-scroll { max-height: 20rem; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; padding-inline-end: .3rem; }
.hod-list-result { display: flex; align-items: center; gap: .65rem; min-height: 3.5rem; padding: .4rem .4rem; border-bottom: 1px solid var(--hl-border); border-radius: .25rem; cursor: pointer; transition: background .15s; }
.hod-list-result:last-child { border-bottom-color: transparent; }
.hod-list-result:hover { background: var(--hl-surface); }
.hod-list-result[data-selected="true"] { background: var(--hl-surface); }
.hod-list-result:has(input:disabled) { opacity: .6; cursor: wait; }
.hod-list-result input[type="checkbox"] { appearance: auto; accent-color: #047857; width: 1rem; height: 1rem; flex-shrink: 0; margin: 0 .15rem 0 0; padding: 0; box-shadow: none; cursor: inherit; }
.hod-list-result img, .hod-list-result-placeholder { flex-shrink: 0; width: 1.875rem; height: 2.5rem; object-fit: cover; border-radius: .2rem; background: var(--hl-surface); border: 1px solid var(--hl-border); }
.hod-list-result-info { min-width: 0; flex: 1; }
.hod-list-result-title { display: block; font-size: .8125rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hod-list-result-info small { display: block; font-size: .6875rem; font-weight: 400; color: var(--hl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .1rem; }
.hod-list-preview { border-inline-start: 1px solid var(--hl-border); padding-inline-start: 1.25rem; }
.hod-list-preview-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1.25rem; margin-bottom: .65rem; }
.hod-list-selection-count { color: var(--hl-muted); font-size: .6875rem; font-variant-numeric: tabular-nums; }
.hod-list-selected-products { list-style: none; margin: 0; padding: 0 .2rem 0 0; max-height: 24rem; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; }
.hod-list-selected { overflow: hidden; --resize-dur: 250ms; }
.hod-list-selected-content { display: flex; align-items: center; gap: .35rem; min-height: 3.5rem; padding-block: .4rem; border-bottom: 1px solid var(--hl-border); }
.hod-list-selected:last-child .hod-list-selected-content { border-bottom-color: transparent; }
.hod-list-product-compact { display: flex; align-items: center; gap: .65rem; min-width: 0; flex: 1; }
.hod-list-product-compact > img { width: 1.875rem; height: 2.5rem; flex-shrink: 0; object-fit: cover; border-radius: .2rem; border: 1px solid var(--hl-border); }
.hod-list-product-compact-info { min-width: 0; }
.hod-list-product-compact-info > a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; font-weight: 400; color: var(--hl-text); text-decoration: none; }
.hod-list-product-compact-info > a:hover { color: var(--hl-green); text-decoration: underline; text-underline-offset: 3px; }
.hod-list-product-compact-info > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hl-muted); font-size: .6875rem; margin-top: .1rem; }
.hod-list-remove { display: grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: .3rem; color: var(--hl-muted); background: transparent; cursor: pointer; }
.hod-list-remove:hover { color: var(--hl-text); background: var(--hl-surface); }
.hod-list-remove:disabled { opacity: .5; cursor: wait; }
.hod-list-remove svg { width: .875rem; height: .875rem; }
.hod-list-preview .hod-list-empty { padding: 2rem .5rem; }
.hod-list-preview .hod-list-empty > svg { width: 1.75rem; height: 1.75rem; margin-bottom: .75rem; color: var(--hl-muted); }
.hod-list-preview .hod-list-empty p { font-size: .75rem; line-height: 1.7; margin: 0 0 .4rem; }
.hod-list-view-saved { display: inline-flex; align-items: center; gap: .3rem; color: var(--hl-muted); font-size: .6875rem; margin-top: .75rem; min-height: 1.5rem; text-decoration: none; }
.hod-list-view-saved svg { width: .75rem; height: .75rem; }
.hod-list-view-saved:hover { color: var(--hl-green); }
.hod-list-editor-footer { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; border-top: 1px solid var(--hl-border); padding-block: .85rem; }
.hod-list-save { min-width: 6rem; }
.hod-list-mobile-save { display: none; }
@media (max-width: 1023px) {
    .hod-lists-portal { padding: 1.25rem 0 3rem; }
    .hod-list-public-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .hod-list-shared-heading { grid-template-columns: 1fr; gap: .5rem; }
    .hod-list-hero-art { display: none; }
}
@media (max-width: 700px) {
    .hod-list-editor { padding-bottom: 4.5rem; }
    .hod-list-mobile-save { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: fixed; inset-inline: 0; bottom: 0; z-index: 40; padding: .6rem 1rem max(.6rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--hl-border); background: var(--hl-bg); box-shadow: 0 -2px 12px #0001; }
    .hod-list-mobile-save > span { font-size: .75rem; color: var(--hl-muted); }
    .hod-list-mobile-save > button { min-width: 8rem; min-height: 2.75rem; }
    .hod-lists-portal .hod-list-panel { padding: 1rem 1rem 0; }
    .hod-list-details { grid-template-columns: 1fr; gap: .8rem; }
    .hod-lists-portal :is(input:not([type="hidden"], [type="checkbox"]), textarea, select) { font-size: 1rem; min-height: 2.75rem; }
    .hod-list-workspace { grid-template-columns: 1fr; gap: 1rem; padding-block: 1rem; }
    .hod-list-search-scroll { max-height: 16rem; }
    .hod-list-preview { border-inline-start: 0; border-top: 1px solid var(--hl-border); padding-inline-start: 0; padding-top: 1rem; }
    .hod-list-selected-products { max-height: 16rem; }
    .hod-list-summary { flex-wrap: wrap; gap: .5rem; padding: .8rem; }
    .hod-list-summary-title { flex-basis: calc(100% - 8rem); }
    .hod-list-collection .hod-list-summary .hod-list-button { flex: 1; }
    .hod-list-editor-footer .hod-list-save { display: none; }
    .hod-list-editor-footer .hod-list-actions { margin-inline-start: auto; }
    .hod-list-shared-heading { --hero-step: 12px; --hero-spread: 3px; grid-template-columns: 1fr; gap: .5rem; padding: 1.5rem; }
    .hod-list-hero-fan { height: clamp(12rem, 55vw, 14rem); }
    .hod-list-hero-cover { width: clamp(5rem, 25vw, 6.25rem); }
    .hod-list-public-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hod-profile-list-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .hod-list-public-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hod-list-shared { padding: 1.5rem 1rem 3rem; }
    .hod-lists-heading { gap: .75rem; }
}
@media (pointer: coarse) {
    .hod-lists-portal :is(.hod-list-button, .hod-list-text-button) { min-height: 2.75rem; }
    .hod-list-remove { min-width: 2.75rem; min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) { .hod-lists *, .hod-lists *::before, .hod-lists *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Transitions.dev: panel reveal, icon swap, and modal (original snippets). */
:root {
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity   var(--panel-open-dur) var(--panel-ease),
    filter    var(--panel-open-dur) var(--panel-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-panel-slide { transition: none !important; }
}

:root {
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
}

.t-icon-swap {
  position: relative;
  display: inline-grid;
}
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}

@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon { transition: none !important; }
}

:root {
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
}

/* Tune the portable patterns to this compact workspace. */
.hod-list-panel.t-panel-slide { --panel-translate-y: 8px; }
.hod-list-selected-content.t-panel-slide { --panel-translate-y: 6px; --panel-open-dur: 250ms; --panel-close-dur: 150ms; }
.hod-list-notice.t-panel-slide { --panel-translate-y: 4px; --panel-blur: 0px; --panel-open-dur: 250ms; }
.hod-list-button .t-icon-swap { width: 1rem; height: 1rem; flex: 0 0 auto; --icon-swap-start-scale: .65; }
.hod-list-button .t-icon { display: inline-flex; align-items: center; justify-content: center; }
.hod-list-button, .hod-list-remove { transition-property: background-color, border-color, color; transition-duration: 150ms; transition-timing-function: cubic-bezier(.22, 1, .36, 1); }


:root {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-resize {
  transition:
    width  var(--resize-dur) var(--resize-ease),
    height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}

@media (prefers-reduced-motion: reduce) {
  .t-resize { transition: none !important; }
}

/* Transitions.dev toast, with its original reduced-motion guard. */
:root {
  --toast-open: 350ms;
  --toast-close: 250ms;
  --toast-distance: 16px;
  --toast-blur: 2px;
  --toast-scale: 0.97;
  --toast-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}
.t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-toast { transition: none !important; }
}

.hod-list-search-status:empty { display: none; }
.hod-list-toast { position: fixed; inset: auto 1rem max(1rem, env(safe-area-inset-bottom)) auto; z-index: 1000; display: flex; align-items: center; gap: .75rem; width: min(25rem, calc(100vw - 2rem)); margin: 0; padding: .8rem 1rem; border: 1px solid var(--hl-border); border-radius: .75rem; background: var(--hl-bg); color: var(--hl-text); box-shadow: 0 8px 32px #0002; pointer-events: none; transition-behavior: allow-discrete; }
.hod-list-toast.is-open { pointer-events: auto; }
.hod-list-toast p { flex: 1; min-width: 0; font-size: .8125rem; line-height: 1.5; }
.hod-list-toast-mark { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; flex: 0 0 auto; border-radius: 50%; color: var(--hl-green); background: var(--hl-tint); }
.hod-list-toast-close { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: .35rem; color: var(--hl-muted); cursor: pointer; }
.hod-list-toast-close:hover { background: var(--hl-surface); color: var(--hl-text); }

.hod-lists [data-new-list]:disabled { cursor: not-allowed; }

/* Transitions.dev: image loading and reveal. */
:root {
  --pulse-dur: 1000ms;
  --pulse-count: 1;
  --pulse-min: 0.5;
  --reveal-dur: 400ms;
  --reveal-blur: 2px;
  --reveal-ease: ease-in-out;
}

/* The wrap stacks two layers on the same coordinates. The
   skeleton owns the cold pulse + the fade-out side of the
   reveal; the content owns the fade-in side. They share the
   same duration / ease so the swap reads as one motion. */
.t-skel { position: relative; }
.t-skel-skeleton,
.t-skel-content {
  position: absolute;
  inset: 0;
}

.t-skel-skeleton {
  z-index: 1;
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter  var(--reveal-dur) var(--reveal-ease);
}
.t-skel-content {
  z-index: 2;
  opacity: 0;
  filter: blur(var(--reveal-blur));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter  var(--reveal-dur) var(--reveal-ease);
}
.t-skel.is-revealed .t-skel-skeleton {
  opacity: 0;
  filter: blur(var(--reveal-blur));
}
.t-skel.is-revealed .t-skel-content {
  opacity: 1;
  filter: blur(0);
}
/* Snap-back when replaying: kill transitions so the reverse
   (revealed → skeleton) is instant. Drop `.is-resetting`
   after a forced reflow and the next reveal animates again. */
.t-skel.is-resetting .t-skel-skeleton,
.t-skel.is-resetting .t-skel-content {
  transition: none !important;
}

/* Pulse: place the animation on the bar/avatar children, not
   on the skeleton itself, so the skeleton's opacity / filter
   stay free for the cross-fade transition above. */
.t-skel-skeleton.is-pulsing > * {
  animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count);
}
@keyframes t-skel-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: var(--pulse-min); }
}

@media (prefers-reduced-motion: reduce) {
  .t-skel-skeleton, .t-skel-content {
    transition: none !important;
  }
  .t-skel-skeleton.is-pulsing > * { animation: none !important; }
}


/* Optional collection artwork and owner insights. */
.hod-collection-cover-field { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; padding-block: .25rem .5rem; min-width: 0; }
.hod-collection-cover-preview { flex: 0 0 7.5rem; height: 4.75rem; border: 1px solid var(--hl-border); border-radius: .5rem; overflow: hidden; background: var(--hl-surface); }
.hod-collection-cover-preview .t-skel-content { display: grid; place-items: center; }
.hod-collection-cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.hod-collection-cover-preview [data-cover-placeholder] { color: var(--hl-muted); font-size: .6875rem; }
.hod-collection-cover-preview .t-skel-skeleton > span, .hod-collection-banner .t-skel-skeleton > span { display: block; width: 100%; height: 100%; background: var(--hl-surface); }
.hod-collection-cover-controls { flex: 1; min-width: 0; }
.hod-collection-cover-label { display: block; font-size: .75rem; font-weight: 500; }
.hod-collection-cover-label .hod-list-muted { font-weight: 400; }
.hod-collection-cover-controls > p:not(.hod-list-error) { font-size: .6875rem; color: var(--hl-muted); margin: .2rem 0 .45rem; }
.hod-collection-cover-picker { cursor: pointer; }
.hod-lists.hod-lists-ready .hod-collection-cover-input { position: absolute; clip-path: inset(50%); overflow: hidden; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; white-space: nowrap; }
.hod-collection-cover-controls:has(.hod-collection-cover-input:focus-visible) .hod-collection-cover-picker { outline: 2px solid var(--hl-green); outline-offset: 2px; }
.hod-collection-cover-controls:has(.hod-collection-cover-input:disabled) .hod-collection-cover-picker { opacity: .5; cursor: wait; pointer-events: none; }
.hod-collection-upload { display: flex; align-items: center; gap: .65rem; margin-top: .5rem; max-width: 22rem; }
.hod-collection-upload progress { flex: 1; min-width: 3rem; height: .4rem; border: 0; border-radius: 1rem; accent-color: #047857; color: #047857; background: var(--hl-border); }
.hod-collection-upload progress::-webkit-progress-bar { background: var(--hl-border); border-radius: 1rem; }
.hod-collection-upload progress::-webkit-progress-value { background: #047857; border-radius: 1rem; transition: width 150ms ease-out; }
.hod-collection-upload progress::-moz-progress-bar { background: #047857; border-radius: 1rem; }
.hod-collection-upload > span { font-size: .6875rem; color: var(--hl-muted); min-width: 6rem; }
.hod-collection-cover-field .hod-list-error { margin: .4rem 0 0; font-size: .75rem; }
.hod-collection-has-cover { position: relative; isolation: isolate; overflow: hidden; grid-template-columns: 1fr; padding: 14rem 1.5rem 1.25rem; border-radius: .75rem; gap: 0; }
.hod-collection-has-cover .hod-list-hero-copy { position: relative; z-index: 1; }
.hod-collection-banner { position: absolute; inset: 0 0 auto; height: 23rem; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000b 25%, #0003 65%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000b 25%, #0003 65%, transparent 100%); }
.hod-collection-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: .85; }
.hod-collection-has-cover::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to bottom, transparent 30%, var(--hl-bg) 85%); opacity: .8; pointer-events: none; }
.hod-collection-has-cover .hod-list-description { max-width: 48rem; }
.hod-collection-product { display: flex; min-width: 0; }
.hod-collection-product > * { flex: 1; }
.hod-collection-row-insights { display: flex; gap: 1.25rem; margin: 0 .5rem; font-variant-numeric: tabular-nums; }
.hod-collection-row-insights dt { color: var(--hl-muted); font-size: .625rem; white-space: nowrap; }
.hod-collection-row-insights dd { font-size: .8125rem; font-weight: 500; margin: .1rem 0 0; }
/* Owner-only statistics, using the shared Transitions.dev modal pattern. */
.hod-collection-statistics.hod-list-dialog { width: min(34rem, calc(100vw - 2rem)); max-width: 34rem; max-height: calc(100dvh - 2rem); margin: auto; padding: 1.5rem; overflow-y: auto; overscroll-behavior: contain; border-radius: 1rem; box-shadow: 0 24px 80px #0004; }
.hod-collection-statistics-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.hod-collection-statistics-heading > div { min-width: 0; }
.hod-lists .hod-collection-statistics-heading h2 { font-size: 1.125rem; font-weight: 500; line-height: 1.4; letter-spacing: -.02em; }
.hod-collection-statistics-heading p { font-size: .8125rem; overflow-wrap: anywhere; margin: .25rem 0 0; line-height: 1.6; }
.hod-collection-statistics-close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; margin: -.5rem -.5rem 0 0; border-radius: .5rem; color: var(--hl-muted); cursor: pointer; transition: background-color 150ms var(--modal-ease), color 150ms var(--modal-ease); }
.hod-collection-statistics-close:hover { color: var(--hl-text); background: var(--hl-surface); }
.hod-collection-statistics-period { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; margin-block: 1.25rem .65rem; color: var(--hl-muted); font-size: .6875rem; }
.hod-collection-statistics-period > span:first-child { display: inline-flex; align-items: center; gap: .35rem; }
.hod-collection-statistics-period .hod-list-icon { width: .8125rem; height: .8125rem; }
.hod-collection-statistics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; font-variant-numeric: tabular-nums; }
.hod-collection-stat { padding: 1.1rem; border: 1px solid var(--hl-border); border-radius: .75rem; background: var(--hl-surface); min-width: 0; }
.hod-collection-stat dt { color: var(--hl-muted); font-size: .8125rem; }
.hod-collection-stat-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: .9rem; border-radius: .85rem; background: var(--hl-tint); color: var(--hl-green); }
.hod-collection-stat-icon .hod-list-icon { width: 2rem; height: 2rem; }
.hod-collection-stat dd { margin: .25rem 0 0; }
.hod-collection-stat dd strong { display: block; font-size: clamp(1.75rem, 5vw, 2.125rem); font-weight: 500; line-height: 1.3; letter-spacing: -.035em; overflow-wrap: anywhere; }
.hod-collection-clicks { margin-top: 1.1rem; }
.hod-collection-clicks-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.hod-lists .hod-collection-clicks-heading h3 { font-size: .8125rem; font-weight: 500; letter-spacing: 0; }
.hod-collection-clicks-heading > span { color: var(--hl-muted); font-size: .6875rem; white-space: nowrap; }
.hod-collection-clicks-scroll { max-height: 13rem; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto; scrollbar-width: thin; padding: .2rem; margin-inline: -.2rem; border-radius: .3rem; }
.hod-collection-clicks-list { margin: 0; padding: 0; list-style: none; }
.hod-collection-click-row { display: flex; align-items: center; gap: .65rem; padding-block: .3rem; min-height: 2.75rem; border-bottom: 1px solid var(--hl-border); }
.hod-collection-click-row:last-child { border-bottom: 0; }
.hod-collection-click-row > img, .hod-collection-click-placeholder { flex: 0 0 1.5rem; width: 1.5rem; height: 2rem; border-radius: .2rem; object-fit: cover; background: var(--hl-surface); border: 1px solid var(--hl-border); }
.hod-collection-click-info { flex: 1; min-width: 0; }
.hod-collection-click-title { display: flex; align-items: center; min-height: 2rem; color: var(--hl-text); font-size: .6875rem; line-height: 1.5; text-decoration: none; }
.hod-collection-click-title > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 400; overflow-wrap: anywhere; }
a.hod-collection-click-title:hover { color: var(--hl-green); }
.hod-collection-click-info > small { display: block; color: var(--hl-muted); font-size: .625rem; margin-top: -.1rem; }
.hod-collection-click-count { flex-shrink: 0; min-width: 2rem; text-align: right; padding-inline: .25rem; font-size: .75rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.hod-collection-statistics.hod-list-dialog .hod-collection-clicks-empty { margin: 0; padding: .65rem .75rem; border-radius: .4rem; background: var(--hl-surface); color: var(--hl-muted); font-size: .75rem; }
.hod-collection-statistics.hod-list-dialog .hod-collection-statistics-note { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--hl-border); color: var(--hl-muted); font-size: .6875rem; line-height: 1.7; }
.hod-collection-statistics::backdrop { background: rgb(0 0 0 / .55); opacity: 0; transition: opacity var(--modal-close-dur) var(--modal-ease); }
.hod-collection-statistics.is-open::backdrop { opacity: 1; transition-duration: var(--modal-open-dur); }
.hod-collection-statistics.is-closing::backdrop { opacity: 0; }
/* JS retains the top layer until the exit completes, also covering Safari/Firefox. */
.hod-collection-statistics.t-modal, .hod-collection-statistics.t-modal.is-open { transition-property: transform, opacity, display, overlay; transition-duration: var(--modal-open-dur), var(--modal-open-dur), 0s, 0s; transition-timing-function: var(--modal-ease); transition-behavior: allow-discrete; }
.hod-collection-statistics.t-modal.is-closing { transition-duration: var(--modal-close-dur), var(--modal-close-dur), 0s, 0s; }
html:has(.hod-collection-statistics) { scrollbar-gutter: stable; }
html:has(.hod-collection-statistics[open]) { overflow: hidden; }
@media (max-width: 480px) {
    .hod-collection-statistics.hod-list-dialog { padding: 1.1rem; }
    .hod-collection-stat { padding: .9rem .8rem; }
    .hod-collection-stat-icon { width: 2.75rem; height: 2.75rem; margin-bottom: .75rem; }
    .hod-collection-stat-icon .hod-list-icon { width: 1.75rem; height: 1.75rem; }
}
@media (max-width: 700px) {
    .hod-collection-row-insights { flex: 1 0 calc(100% - 7rem); margin: 0 0 .25rem 6.25rem; }
    .hod-collection-cover-field { gap: .75rem; align-items: flex-start; }
    .hod-collection-cover-preview { flex-basis: 5.25rem; height: 4rem; }
    .hod-collection-cover-controls .hod-list-actions { gap: .15rem; }
    .hod-collection-has-cover { padding: 10rem .75rem 1rem; }
    .hod-collection-banner { height: 19rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hod-collection-upload progress::-webkit-progress-value { transition: none; }
    .hod-collection-statistics::backdrop { transition: none !important; }
}