.collection-page{
  --collection-icon-size:var(--icon-default);
  --collection-text-gap:var(--space-4);
  --collection-bg:var(--page-background-default);--collection-ink:#302832;
  --collection-muted:#756775;--collection-accent:#a72868;--collection-blush:#f8e9ef;
  background:var(--collection-bg);color:var(--collection-ink);
}
.collection-toolbar{position:sticky;top:0;z-index:8;display:flex;align-items:center;justify-content:space-between;background:var(--collection-bg);margin:calc(-1 * var(--space-24)) calc(-1 * var(--screen-gutter)) var(--space-24);padding:var(--space-16) var(--screen-gutter);min-height:64px;box-sizing:border-box}
.collection-toolbar h1{margin:0;font-size:var(--heading-md)}
.collection-journal-picker{position:relative;display:grid;place-items:center;width:44px;height:44px;color:var(--color-teal-light);cursor:pointer}
.collection-journal-picker svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.collection-journal-select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.collection-journal-picker:focus-within{outline:2px solid currentColor;outline-offset:2px;border-radius:8px}
.collection-content .collection-section-heading{top:76px}
.collection-content .collection-title-line h2{margin:0;font-size:var(--heading-md)}
html.collection-document{overflow-x:clip;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.collection-page:not(.todo-page){display:block;max-width:100%;overflow-x:clip;overflow-y:visible;touch-action:pan-y}
.collection-page .app-heading,.collection-page .preview-footer{display:none}
.collection-page .simulation{background:transparent;color:var(--collection-muted);letter-spacing:0;padding:var(--space-12) var(--space-16);border-bottom:1px solid var(--border-subtle-color)}
.collection-page #surface{width:100%;max-width:640px;padding:var(--space-24) var(--screen-gutter) var(--space-32);margin:auto}
.collection-back{display:inline-flex;align-items:center;gap:var(--space-8);font-size:var(--body-sm);text-decoration:none;color:var(--collection-muted);margin-bottom:var(--space-24)}
.collection-back:hover{color:var(--collection-accent)}
.collection-heading{--collection-header-art-opacity:.75;position:relative;isolation:isolate;padding-top:var(--space-16);padding-bottom:var(--space-4);margin-bottom:var(--space-24)}
.collection-heading::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0 calc(-1 * var(--screen-gutter)) 0 0;background:url('/assets/approved/collection-celestial.svg') right center/auto 100% no-repeat;opacity:var(--collection-header-art-opacity)}
.collection-title-line{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16)}
.collection-title-line h1{margin:0;font-size:var(--heading-md)}
.collection-count{font-size:var(--body-xs);color:var(--collection-muted);white-space:nowrap}
.collection-page .collection-subtitle{font-size:var(--body-md);margin:var(--collection-text-gap) 0 0;color:var(--collection-muted)}
.collection-section+.collection-section{margin-top:var(--space-24)}
.collection-section-heading{position:sticky;top:0;z-index:5;background:var(--collection-bg);margin-inline:calc(-1 * var(--screen-gutter));padding:var(--space-12) var(--screen-gutter);margin-bottom:0}
.collection-section-heading h2{font:var(--body-emphasis-weight) var(--body-xs)/var(--body-leading) var(--font-body);font-synthesis:weight;margin:0}
.collection-section-heading p{margin:var(--collection-text-gap) 0 0;color:var(--collection-muted);font-size:var(--body-sm)}
.collection-list{background:transparent;margin-inline:calc(-1 * var(--screen-gutter))}
.collection-item{margin:0}

.collection-item summary{display:flex;align-items:flex-start;gap:var(--space-12);padding:var(--divider-space-md) var(--screen-gutter);min-height:0;list-style:none;cursor:pointer}
.collection-list>.divider-subtle{margin:0}


.collection-item summary:focus-visible{outline-offset:-2px}
.collection-item summary::-webkit-details-marker{display:none}
.collection-icon{color:var(--collection-accent);font:var(--body-weight) var(--collection-icon-size)/1 var(--font-body);width:var(--collection-icon-size);height:var(--collection-icon-size);flex:0 0 var(--collection-icon-size);display:flex;align-items:center;justify-content:center;margin-top:0;text-align:center}
.collection-item-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--collection-text-gap);flex:1}
.collection-item-title{font-size:var(--body-md);line-height:var(--body-leading);overflow-wrap:anywhere}
.collection-item-link{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 38%,transparent);text-decoration-thickness:var(--line-hairline-width);text-underline-offset:.18em}
.collection-item-link:hover{text-decoration-color:currentColor}
.collection-item-note{font-size:var(--body-sm);color:var(--collection-muted)}
.collection-badge{font-size:var(--body-xs);color:var(--collection-accent);background:var(--collection-blush);padding:var(--space-2) var(--space-8);border-radius:var(--radius-button-pill)}
.collection-chevron{align-self:center;font-size:var(--collection-icon-size);width:var(--collection-icon-size);height:var(--collection-icon-size);flex:0 0 var(--collection-icon-size);display:flex;align-items:center;justify-content:center;margin-top:0;line-height:1;color:var(--collection-muted);transform-origin:50% 50%;transform:rotate(0deg);transition:transform .15s}
.collection-item[open] .collection-chevron{transform:rotate(180deg)}
.collection-detail{margin:0 var(--screen-gutter) var(--space-16);padding:var(--space-16);background:var(--page-background-containers);border-radius:var(--radius-container-nested)}
.collection-detail h3{font:var(--body-emphasis-weight) var(--body-sm)/var(--body-leading) var(--font-body);font-synthesis:weight;margin:0 0 var(--space-8)}
.collection-detail p{margin:0 0 var(--space-16);font-size:var(--body-sm);color:var(--collection-muted)}
.collection-connections{display:flex;gap:var(--space-8);flex-wrap:wrap;list-style:none;padding:0;margin:0}
.collection-connections li{font-size:var(--body-xs);padding:var(--space-2) var(--space-8);border:var(--line-hairline-width) solid var(--badge-connection-border);border-radius:var(--radius-button-pill);background:var(--badge-connection-background);color:var(--badge-connection-text)}
.collection-page .collection-hint{font-size:var(--body-xs);color:var(--collection-muted);margin:var(--space-24) 0 0}
.collection-page :focus-visible{outline:2px solid var(--collection-accent);outline-offset:4px}
.collection-page .interaction-status:empty{display:none}
.collection-page .preview-footer{color:var(--collection-muted);border-color:var(--border-subtle-color);text-align:center}
@media(prefers-reduced-motion:reduce){.collection-chevron{transition:none}}
.collection-detail .collection-detail-annotation{margin:0 0 var(--space-16)}.collection-detail .collection-badge{display:table;color:var(--collection-accent);font-size:var(--body-xs)}
.collection-entry{position:relative}.collection-entry>.heart-action{position:absolute;left:var(--screen-gutter);top:var(--divider-space-md);z-index:1}.collection-entry .collection-item summary{padding:var(--divider-space-md) var(--screen-gutter);padding-left:calc(var(--screen-gutter) + var(--collection-icon-size) + var(--space-12))}.collection-entry .collection-chevron{transition-duration:var(--motion-default);transition-timing-function:var(--motion-ease)}@media(prefers-reduced-motion:reduce){.collection-entry .collection-chevron{transition:none}}

.collection-chevron img{display:block;width:100%;height:100%}
.collection-entry>.heart-action{left:0;top:0;box-sizing:border-box;width:calc(var(--screen-gutter) + var(--collection-icon-size) + var(--space-12));height:var(--row-action-height,56px);padding:var(--divider-space-md) 0 0 var(--screen-gutter);align-items:flex-start;justify-content:flex-start}.collection-entry>.heart-action .heart-graphic{width:var(--collection-icon-size);height:var(--collection-icon-size)}.collection-entry>.heart-action .icon-feedback-rays{inset:var(--divider-space-md) auto auto var(--screen-gutter);width:var(--collection-icon-size);height:var(--collection-icon-size)}
.collection-page .simulation{display:none}
.collection-heading{padding-top:0}
.plus-action .heart-graphic svg{fill:none!important;stroke-linecap:round;stroke-linejoin:round}
.plus-action .added-circle{display:none}
.plus-action[aria-pressed=true]{color:var(--badge-connection-text)}
.plus-action[aria-pressed=true] .added-circle{display:block;fill:var(--badge-connection-background);stroke:currentColor}
.plus-action[aria-pressed=true] .heart-graphic path{stroke:currentColor;fill:none}
.collection-feedback{position:absolute;left:var(--screen-gutter);top:var(--space-16);display:flex;gap:var(--space-8);z-index:1}
.collection-feedback .heart-action{color:var(--text-secondary)}
.collection-feedback .heart-graphic svg{stroke-linecap:round;stroke-linejoin:round}
.collection-feedback .feedback-up[aria-pressed=true]{color:var(--color-teal-light)}
.collection-feedback .feedback-down[aria-pressed=true]{color:var(--ink)}
.collection-entry:has(>.collection-feedback) .collection-item summary{padding-left:calc(var(--screen-gutter) + 2 * var(--collection-icon-size) + var(--space-8) + var(--space-12))}
.collection-feedback{gap:var(--space-16)}
.collection-feedback .heart-action{width:var(--icon-sm);height:var(--icon-sm);min-height:0}
.collection-entry:has(>.collection-feedback) .collection-item summary{padding-left:calc(var(--screen-gutter) + 2 * var(--icon-sm) + var(--space-16) + var(--space-12) + var(--space-8))}
.collection-feedback{top:0;height:var(--row-action-height,56px);align-items:center}
.collection-row{padding:var(--space-16) var(--screen-gutter);padding-left:calc(var(--screen-gutter) + 2 * var(--icon-sm) + var(--space-16) + var(--space-12) + var(--space-8))}
.collection-entry{transform-origin:center}
.collection-entry>.collection-feedback{left:auto;right:var(--screen-gutter);flex-direction:row-reverse}
.collection-row{padding-left:var(--screen-gutter);padding-right:calc(var(--screen-gutter) + 2 * var(--icon-sm) + var(--space-16) + var(--space-12) + var(--space-8))}
.collection-entry>.collection-feedback{right:calc(var(--screen-gutter) + var(--space-8))}
.collection-row{padding-right:calc(var(--screen-gutter) + 2 * var(--icon-sm) + var(--space-16) + var(--space-12) + 2 * var(--space-8))}
.collection-list:has(.collection-feedback)>.divider-subtle{margin-inline:var(--screen-gutter)}
/* Small artwork inside separate, more forgiving targets. */
.collection-entry>.collection-feedback{right:var(--screen-gutter);gap:var(--space-4)}
.collection-feedback .heart-action{width:40px;height:40px;min-height:40px;padding:var(--space-8);align-items:center;justify-content:center}
.collection-feedback .heart-graphic{width:24px;height:24px;flex-shrink:0}
.collection-feedback .icon-feedback-rays{inset:var(--space-8);width:24px;height:24px}
.collection-row{padding-right:calc(var(--screen-gutter) + 80px + var(--space-4) + var(--space-12))}
.collection-rating{position:absolute;right:var(--screen-gutter);top:0;height:var(--row-action-height,56px);display:flex;align-items:center;z-index:1}
.collection-rating button{display:grid;place-items:center;width:24px;height:32px;min-height:0;padding:4px;background:transparent;color:var(--text-secondary);border-radius:var(--radius-container-nested)}
.collection-rating svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.collection-rating .is-filled{color:var(--badge-connection-text)}
.collection-rating .is-filled svg{fill:currentColor}
.collection-entry:has(>.collection-rating) .collection-row{padding-right:calc(var(--screen-gutter) + 120px + var(--space-12))}
.collection-list:has(.collection-rating)>.divider-subtle{margin-inline:var(--screen-gutter)}
.collection-rating .is-filled{color:var(--rating-yellow)}
.collection-section-heading .subcategory-label-black{color:var(--ink)}
.collection-section-heading .subcategory-label-pink{color:var(--rose-strong)}
.collection-section-heading .subcategory-label-teal{color:var(--color-teal-light)}

/* Let the final collection row scroll fully above the floating avatar. */
.collection-page:not(.todo-page) #surface{min-height:max-content;padding-bottom:calc(var(--companion-avatar-size,100px) + var(--companion-avatar-offset,16px) + var(--navigation-height,76px) + var(--space-24))}

/* Single Add/Favorite controls occupy the left lane, unlike right-side ratings. */
.collection-entry:has(>.heart-action.collection-action)>.collection-row{
 padding-left:calc(var(--screen-gutter) + var(--collection-icon-size) + var(--space-12));
 padding-right:var(--screen-gutter);
}

/* Bullet Type: decorative teal check, never a selectable control. */
.collection-entry>.collection-bullet{position:absolute;left:var(--screen-gutter);top:var(--space-16);width:24px;height:24px;color:var(--color-teal-light);pointer-events:none}
.collection-bullet svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.collection-entry:has(>.collection-bullet)>.collection-row{padding-left:calc(var(--screen-gutter) + 24px + var(--space-12));padding-right:var(--screen-gutter)}