/* Saved work is the object; controls explain the next use of that same result. */
.studio-collection {
    --studio-ink: var(--attance-ink, var(--ink, #172b24));
    --studio-muted: var(--attance-muted, var(--muted, #52655b));
    --studio-surface: var(--attance-surface, #fffef8);
    --studio-raised: var(--attance-raised, #edf2e9);
    --studio-line: var(--attance-line, var(--line, #d5d9cd));
    color: var(--studio-ink);
}
.studio-collection > h2 { margin-bottom: .75rem; }
.studio-collection > p { max-width: 65ch; }
.studio-collection .studio-collection-actions { margin: 1.25rem 0 2rem; }
.studio-collection .studio-resume { padding: 1.25rem; margin: 2rem 0 3rem; }
.studio-collection .studio-resume h3 { margin: 0 0 .5rem; }
.studio-collection .studio-resume > p { margin: 0; color: var(--studio-muted); }
.studio-collection .family-saved { margin: .75rem 0 0; }
.studio-collection .family-saved > li:last-child { border-bottom: 0; padding-bottom: 0; }
.studio-collection .family-saved a { overflow-wrap: anywhere; }
.studio-collection .family-saved p { font-size: .95rem; color: var(--studio-muted); }
.studio-saved-results > h3 { margin: 2rem 0 .5rem; }
.studio-saved-results > p { color: var(--studio-muted); margin-bottom: 1.5rem; }
.studio-collection .family-artifacts > li { padding: 2rem 0; }
.studio-collection .studio-saved-result > h4 { font-size: 1.5rem; line-height: 1.3; margin: 0 0 1.25rem; overflow-wrap: anywhere; }
.studio-result-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 1fr); gap: 2rem; align-items: start; }
.studio-result-layout:has(.studio-result-next:empty) { grid-template-columns: minmax(0, 1fr); }
.studio-result-layout:has(.studio-result-next:empty) .studio-result-object { max-width: 36rem; }
.studio-result-object, .studio-artifact-preview, .studio-result-next { min-width: 0; }
.studio-artifact-preview figure { margin-top: 0; }
.studio-artifact-preview { overflow-wrap: anywhere; }
.studio-artifact-preview:has(> .studio-saved-path) { container: studio-saved-result / inline-size; }
.studio-saved-path { margin: 0 0 1rem; padding: 1.25rem; background: var(--attance-surface, #fffef8); border: 1px solid var(--attance-line, var(--line, #d5d9cd)); border-radius: 16px; }
.studio-saved-path ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.studio-saved-path li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: .75rem .5rem; background: var(--attance-raised, #edf2e9); color: var(--attance-ink, var(--ink, #172b24)); border-radius: 8px; text-align: center; font-weight: 600; }
.studio-saved-path li:not(:last-child)::after { content: ''; position: absolute; left: 100%; top: 50%; width: 1.25rem; height: 1px; background: var(--attance-control, #7c9185); }
.studio-saved-path small { font-variant-numeric: tabular-nums; font-size: .8rem; font-weight: 400; color: var(--attance-muted, var(--muted, #52655b)); }
.studio-saved-path figcaption { margin: 1rem 0 0; font-size: .875rem; color: var(--attance-muted, var(--muted, #52655b)); }
.studio-saved-path.is-long ol { grid-template-columns: minmax(0, 1fr); }
.studio-saved-path.is-long li { flex-direction: row; justify-content: flex-start; gap: .75rem; padding: .75rem; text-align: left; }
.studio-saved-path.is-long li:not(:last-child)::after { left: 1.1rem; top: 100%; width: 1px; height: 1.25rem; }
/* The card column can be narrow even on a wide page. Keep each route continuous. */
@container studio-saved-result (max-width: 42rem) {
    .studio-saved-path ol { grid-template-columns: minmax(0, 1fr); }
    .studio-saved-path li { flex-direction: row; justify-content: flex-start; gap: .75rem; padding: .75rem; text-align: left; }
    .studio-saved-path li:not(:last-child)::after { left: 1.1rem; top: 100%; width: 1px; height: 1.25rem; }
}
.studio-result-summary { margin: 1rem 0; }
.studio-result-text { margin: .5rem 0 1rem; }
.studio-result-text summary, .studio-collection .family-source summary { padding: .65rem 0; cursor: pointer; }
.studio-result-text summary { color: var(--attance-action, var(--accent, #163d30)); }
.studio-result-text ol { padding-left: 1.5rem; }
.studio-result-text ol > li { padding: .5rem 0; line-height: 1.6; }
.studio-collection .family-source { color: var(--studio-muted); font-size: .875rem; }
.studio-result-next.actions { display: block; margin: 0; }
.studio-result-next.actions:has(> button) { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; }
.studio-result-next > button { min-height: 44px; max-width: 100%; text-align: left; justify-content: flex-start; white-space: normal; overflow-wrap: anywhere; }
.studio-result-next:empty { display: none; }
.studio-continuations { width: 100%; min-width: 0; }
.studio-continuation-title { margin: 0 0 .5rem; font-weight: 650; font-size: 1.125rem; }
.studio-carry-description { margin: 0 0 .75rem; color: var(--attance-muted, var(--muted, #52655b)); font-size: .9rem; line-height: 1.5; }
.studio-carry-preview { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.studio-carry-preview > span { display: block; max-width: 100%; padding: .4rem .65rem; background: var(--attance-raised, #edf2e9); color: var(--attance-ink, var(--ink, #172b24)); border-radius: 8px; overflow-wrap: anywhere; font-weight: 550; font-size: .9rem; }
.studio-carry-preview > small { color: var(--attance-muted, var(--muted, #52655b)); }
.studio-continuations .family-next-choices { display: grid; gap: 1rem; }
.studio-continuations .family-next-choice { min-width: 0; padding-top: 1rem; border-top: 1px solid var(--attance-line, var(--line, #d5d9cd)); }
.studio-continuations .family-next-choice.is-primary { padding-top: 0; border-top: 0; }
.studio-continuations .family-next-choice button { width: 100%; min-height: 44px; text-align: left; justify-content: flex-start; overflow-wrap: anywhere; }
.studio-continuations .family-next-choice p { margin: .5rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--attance-muted, var(--muted, #52655b)); }
.studio-more-continuations { margin-top: 1rem; }
.studio-more-continuations summary { padding: .65rem 0; cursor: pointer; font-size: .9rem; }
.studio-more-continuations[open] { margin-bottom: 1rem; }
.studio-collection-empty { padding: 1.5rem 0 2rem; border-top: 1px solid var(--studio-line); }
.studio-collection-empty h4 { font-size: 1.25rem; line-height: 1.4; }
.studio-collection-empty p { max-width: 60ch; color: var(--studio-muted); }
.studio-round-history, .studio-collection #family-starter { border-top: 1px solid var(--studio-line); padding: 1rem 0; }
.studio-round-history > summary, .studio-collection #family-starter > summary { cursor: pointer; padding: .5rem 0; }
.studio-collection > .muted { margin-top: 1.5rem; font-size: .875rem; }
@media (max-width: 760px) {
    .studio-result-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .studio-collection .studio-resume { padding: 1rem; }
    .studio-collection .studio-saved-result > h4 { font-size: 1.3rem; }
    .studio-result-next { max-width: none; }
}
@media (max-width: 480px) {
    .studio-saved-path { padding: 1rem; }
    .studio-saved-path ol { grid-template-columns: minmax(0, 1fr); }
    .studio-saved-path li { flex-direction: row; justify-content: flex-start; gap: .75rem; padding: .75rem; text-align: left; }
    .studio-saved-path li:not(:last-child)::after { left: 1.1rem; top: 100%; width: 1px; height: 1.25rem; }
}