@charset "UTF-8";

/* Tool owns page placement; shared components are in /def/style.css. */
.tool { inline-size: 100%; block-size: calc(var(--vh, 1vh) * 100); overflow: hidden; background: var(--bgc); color: var(--fc); font-size: var(--fs); }
.popup.center .popup-body { margin-block-start: calc(-1 * var(--cv-vertical)); }

/* Component catalogue: real shared styles with explicitly labelled examples. */
.component-section { scroll-margin-block-start: 1rem; }
.component-section > .section-header { align-items: baseline; }
.component-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.5rem; border: var(--line) solid var(--border); border-radius: var(--radius); background: var(--surface); }
.component-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); align-items: start; }
.component-type { display: grid; gap: .75rem; inline-size: 100%; }
.component-banner-art { display: grid; place-items: center; inline-size: 12rem; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--canvas); color: var(--text-muted); }
.component-banner-art > .icon { font-size: 3rem; }
.component-menu { inline-size: 16rem; max-inline-size: 100%; }
.component-menu > .nav-group { padding: .5rem; }
.component-menu > .tabs { padding-inline: 1rem; }
.component-note { color: var(--text-muted); font-size: var(--font-caption); }
.component-empty { padding: 2rem; color: var(--text-muted); text-align: center; }
.component-dropdown { position: relative; }
.component-dropdown > summary { list-style: none; }
.component-dropdown > summary::-webkit-details-marker { display: none; }
.component-dropdown[open] > .nav-group { position: absolute; z-index: 20; inset-inline-end: 0; inset-block-start: calc(100% + .5rem); inline-size: 10rem; padding: .5rem; border: var(--line) solid var(--border); border-radius: var(--radius); background: var(--surface); }

/* Tool login: the controller owns authentication and error messages. */
.login-page {
    display: flex; inline-size: 100%; block-size: 100vh; block-size: 100dvh;
    overflow: auto; padding: 2rem 1.25rem; background: var(--canvas);
}
.login-card {
    flex: 0 0 auto; gap: 1.75rem; inline-size: 100%; max-inline-size: 26rem;
    margin: auto; padding: 2rem; border-radius: .75rem;
    box-shadow: 0 .75rem 2.5rem rgb(0 0 0 / .035);
}
.login-header { display: grid; justify-items: start; gap: .5rem; }
.login-brand { display: inline-flex; align-items: center; gap: .625em; margin-block-end: .75rem; font-size: 1.25rem; font-weight: 600; }
.login-mark { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; border: var(--line) solid var(--border); border-radius: .625rem; background: var(--canvas); }
.login-title { font-size: var(--font-title); font-weight: 600; line-height: 1.5; }
.login-description { color: var(--text-muted); }
.login-form { display: grid; gap: 1.25rem; --control-height: 2.5rem; }
.login-error { display: flex; align-items: flex-start; gap: .625em; padding: .875em 1em; border: var(--line) solid #efd4d3; border-radius: var(--radius); background: #fff6f5; color: var(--danger); overflow-wrap: anywhere; }
.login-error > .icon { margin-block-start: .125em; }
.login-submit { inline-size: 100%; margin-block-start: .25rem; }
.login-confirmation { display: grid; gap: .875rem; line-height: 1.7; overflow-wrap: anywhere; }
.login-confirmation-actions { justify-content: flex-end; }
@media (max-width: 32rem) {
    .login-page { padding: 1.25rem 1rem; }
    .login-card { padding: 1.5rem; }
}

/* Tool dashboard: shared shell and components with service-owned placement. */
.dashboard.app-shell { block-size: 100%; font-family: var(--font-family); }
.dashboard > .app-toolbar > .app-toolbar-actions { flex-wrap: wrap; justify-content: flex-end; margin-inline-start: auto; }
.dashboard-brand-mark { display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem; border: var(--line) solid var(--border); border-radius: .5rem; background: var(--canvas); }
.dashboard-account { display: inline-flex; align-items: center; gap: .625em; margin-inline-end: .5rem; font-size: var(--font-body); }
.dashboard-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--surface-selected); color: var(--text-muted); font-size: var(--font-caption); font-weight: 600; text-transform: uppercase; }
.dashboard-sidebar { display: flex; flex-direction: column; }
.dashboard-nav-label { flex: 1; min-inline-size: 0; }
.dashboard-template-group { position: relative; }
.dashboard-template-group > .nav-group-title { position: absolute; inset-block-start: 0; inset-inline-start: 1rem; transform: translateY(-50%); padding: 0 .75em; background: var(--surface); }
.dashboard-template-list { margin: 0; padding: 0; list-style: none; }
.dashboard-template-empty { padding: .5em .875em; color: var(--text-muted); font-size: var(--font-caption); line-height: 1.7; word-break: keep-all; }
.dashboard-nav-item[disabled], .dashboard-nav-item[disabled]:hover { background: transparent; color: var(--text-muted); cursor: not-allowed; }
.dashboard-nav-item[disabled] > .icon { opacity: .65; }
.dashboard-nav-item[disabled] > .badge { background: var(--canvas); color: var(--text-muted); font-weight: 400; }
.dashboard-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.dashboard-heading > div:not(.button-group) { display: grid; gap: .375rem; }
.dashboard-intro.banner { gap: 1.5rem 2rem; padding: 1.75rem 2rem; border: var(--line) solid var(--border); background: var(--surface); }
.dashboard-flow { display: flex; align-items: center; justify-content: center; flex: 0 1 auto; gap: .75rem; }
.dashboard-flow-step { display: grid; justify-items: center; gap: .625rem; min-inline-size: 4.25rem; color: var(--text-muted); font-size: var(--font-caption); white-space: nowrap; }
.dashboard-flow-step > .icon { inline-size: 3.25rem; block-size: 3.25rem; padding: .875rem; border: var(--line) solid var(--border); border-radius: .625rem; background: var(--canvas); color: var(--text); }
.dashboard-flow-arrow { align-self: flex-start; display: flex; align-items: center; block-size: 3.25rem; color: var(--text-muted); font-size: 1.125rem; }
.dashboard-stats.card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-stat > .card-body { gap: .875rem; padding: 1.25rem; }
.dashboard-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--text-muted); font-size: var(--font-body); }
.dashboard-stat-top > .icon { font-size: 1rem; }
.dashboard-stat-value { font-size: 2rem; font-weight: 500; line-height: 1.2; }
.dashboard-lower { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
.dashboard-panel.card { min-inline-size: 0; }
.dashboard-panel-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.25rem 1.5rem; }
.dashboard-tabbar.tabs { gap: 1.5rem; padding-inline: 1.5rem; }
.dashboard-tabbar > .tab { min-block-size: 2.75rem; }
.dashboard-tabbar > .tab[disabled], .dashboard-tabbar > .tab[disabled]:hover { color: var(--text-muted); cursor: not-allowed; }
.dashboard-table-wrap { min-inline-size: 0; overflow: auto; }
.dashboard-table { inline-size: 100%; min-inline-size: 30rem; border-collapse: collapse; font-size: var(--font-body); }
.dashboard-table th { padding: .875rem 1rem; border-block-end: var(--line) solid var(--border); background: var(--canvas); color: var(--text-muted); font-size: var(--font-caption); font-weight: 400; text-align: start; white-space: nowrap; }
.dashboard-table th:first-child { padding-inline-start: 1.5rem; }
.dashboard-table th:last-child { padding-inline-end: 1.5rem; }
.dashboard-table td { padding: 1rem; border-block-end: var(--line) solid var(--border); }
.dashboard-empty td { padding: 0; border-block-end: 0; }
.dashboard-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .625rem; min-block-size: 15rem; padding: 2rem 1.5rem; text-align: center; }
.dashboard-empty-state > div { display: grid; justify-items: center; gap: .625rem; }
.dashboard-empty-state h3 { font-size: var(--font-body); font-weight: 500; }
.dashboard-empty-state p { max-inline-size: 29em; color: var(--text-muted); font-size: var(--font-caption); line-height: 1.7; word-break: keep-all; }
.dashboard-empty-icon { display: flex; align-items: center; justify-content: center; inline-size: 3rem; block-size: 3rem; margin-block-end: .375rem; border: var(--line) solid var(--border); border-radius: .625rem; background: var(--canvas); color: var(--text-muted); font-size: 1.25rem; }
.dashboard-status-note { color: var(--text-muted); font-size: var(--font-caption); line-height: 1.7; }
.dashboard-panel > .dashboard-status-note { padding: 1rem 1.5rem; border-block-start: var(--line) solid var(--border); }
.dashboard-steps { display: grid; gap: 1.5rem; margin: 0; padding: .25rem 1.5rem 1.5rem; list-style: none; }
.dashboard-steps > li { display: flex; align-items: flex-start; gap: .875rem; }
.dashboard-step-number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 1.5rem; block-size: 1.5rem; border: var(--line) solid var(--border); border-radius: 50%; background: var(--canvas); color: var(--text-muted); font-size: var(--font-caption); }
.dashboard-steps > li > div { display: grid; gap: .375rem; min-inline-size: 0; }
.dashboard-steps h3 { font-size: var(--font-body); font-weight: 500; line-height: 1.5; }
.dashboard-steps p { color: var(--text-muted); font-size: var(--font-caption); line-height: 1.7; word-break: keep-all; }
.dashboard-guide-footer { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block-start: auto; padding: 1rem 1.5rem; border-block-start: var(--line) solid var(--border); }
@media (max-width: 72rem) {
    .dashboard-lower { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 64rem) {
    .dashboard-stats.card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-intro.banner { padding: 1.5rem; }
}
@media (max-width: 36rem) {
    .dashboard > .app-toolbar { gap: .75rem; }
    .dashboard-account { margin-inline-end: 0; }
    .dashboard-flow { inline-size: 100%; gap: .375rem; }
    .dashboard-flow-step { flex: 1; min-inline-size: 0; text-align: center; white-space: normal; }
    .dashboard-panel-header, .dashboard-tabbar.tabs { padding-inline: 1rem; }
    .dashboard-panel > .dashboard-status-note, .dashboard-guide-footer { padding-inline: 1rem; }
    .dashboard-steps { padding-inline: 1rem; }
}
@media (max-width: 30rem) {
    .dashboard-stats.card-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Photo library: account-owned photos within the shared application shell. */
.photo-library-heading { gap: .5rem; }
.photo-library-empty { align-items: center; justify-content: center; gap: .75rem; min-block-size: 22rem; padding: 2.5rem 1.5rem; text-align: center; }
.photo-library-empty-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 3.5rem; block-size: 3.5rem; margin-block-end: .5rem; border: var(--line) solid var(--border); border-radius: .75rem; background: var(--canvas); color: var(--text-muted); font-size: 1.5rem; }
.photo-library-empty > p { max-inline-size: 32em; line-height: 1.7; word-break: keep-all; }
.photo-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.photo-library-search { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.photo-library-search > .search-field { flex: 1 1 16rem; max-inline-size: 30rem; }
.photo-template-labels { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .375rem; min-inline-size: 0; }
.photo-template-badge { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; text-decoration: none; }
.photo-template-badge:hover { background: var(--surface-selected); text-decoration: underline; }
.photo-template-empty { overflow-wrap: anywhere; }

/* Photo selection, upload feedback and the saved photo list. */
.photo-library-heading.section-header { align-items: flex-start; gap: 1rem 1.5rem; }
.photo-library-heading-copy { display: grid; gap: .5rem; }
.photo-upload-form { display: grid; justify-items: end; gap: .5rem; }
.photo-upload-progress { appearance: none; display: block; inline-size: 100%; block-size: .5rem; overflow: hidden; border: 0; border-radius: 1em; background: var(--surface-selected); color: var(--primary); }
.photo-upload-progress::-webkit-progress-bar { border-radius: inherit; background: var(--surface-selected); }
.photo-upload-progress::-webkit-progress-value { border-radius: inherit; background: var(--primary); }
.photo-upload-progress::-moz-progress-bar { border-radius: inherit; background: var(--primary); }
.photo-library-card > .card-body { gap: .5rem; }
.photo-library-image { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--canvas); }
.photo-library-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-block-size: 3em; overflow: hidden; }
.photo-library-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.photo-library-next { margin-inline-start: auto; }
@media (max-width: 36rem) {
    .photo-upload-form { justify-items: start; }
}

/* Workbench list within the shared application shell. */
.workbench-library-heading { gap: .5rem; }
.workbench-library-heading.section-header { gap: 1rem 1.5rem; }
.workbench-library-heading-copy { display: grid; gap: .5rem; }
.workbench-library-empty { align-items: center; justify-content: center; gap: .75rem; min-block-size: 22rem; padding: 2.5rem 1.5rem; text-align: center; }
.workbench-library-empty-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 3.5rem; block-size: 3.5rem; margin-block-end: .5rem; border: var(--line) solid var(--border); border-radius: .75rem; background: var(--canvas); color: var(--text-muted); font-size: 1.5rem; }
.workbench-card-grid.card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.workbench-card.card { min-block-size: 10rem; }
.workbench-card-body.card-body { min-block-size: 6.5rem; gap: .5rem; padding: 1rem; }
.workbench-card-symbol.card-symbol { color: var(--text-muted); }
.workbench-card-title.card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.5; }
.workbench-card-description.card-description { overflow-wrap: anywhere; }
.workbench-card-description.workbench-card-warning { color: var(--warning); }
.workbench-card-footer.card-footer { min-block-size: 3.5rem; padding: .75rem 1rem; }
.workbench-card-count { display: inline-flex; align-items: center; gap: .5em; color: var(--text-muted); font-size: var(--font-caption); white-space: nowrap; }
.workbench-card-count > .icon { font-size: var(--font-body); }
.workbench-card-open.btn { min-inline-size: 4.5rem; block-size: 2rem; }

/* Resource template editor inside the existing V2 centered popup. */
.resource-template-nav-item { min-inline-size: 0; }
.resource-template-nav-item > span { min-inline-size: 0; overflow-wrap: anywhere; }
.resource-template-popup.popup { position: fixed; inset: 0; z-index: 1100; }
.resource-template-popup.popup.center .popup-body { margin-block-start: 0; }
.resource-template-dialog { inline-size: 38rem; max-inline-size: calc(100vw - 2rem); max-block-size: calc(100vh - 2rem); max-block-size: calc(100dvh - 2rem); border-radius: .5rem; font-family: var(--font-family); box-shadow: 0 1rem 3rem rgb(0 0 0 / .12); }
.resource-template-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 1rem; padding: 1rem 1.5rem; border-block-end: var(--line) solid var(--border); }
.resource-template-form { display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; overflow: hidden; }
.resource-template-content { display: grid; align-content: start; flex: 1 1 auto; gap: 1.5rem; min-block-size: 0; padding: 1.5rem; overflow: auto; overscroll-behavior: contain; }
.resource-template-fields-section { display: grid; gap: 1rem; min-inline-size: 0; }
.resource-template-fields-heading { display: grid; gap: .375rem; }
.resource-template-fields-heading > p { line-height: 1.7; word-break: keep-all; }
.resource-template-fields { display: grid; gap: .625rem; min-inline-size: 0; }
.template-field-row { display: flex; align-items: center; gap: .625rem; min-inline-size: 0; border-radius: var(--radius); }
.template-field-row[data-field-fixed] { padding-inline-start: 2.375rem; }
.template-field-row.is-dragging { background: var(--surface-selected); outline: .125rem solid var(--primary); outline-offset: .25rem; }
.template-field-drag { flex: 0 0 1.75rem; inline-size: 1.75rem; block-size: 2rem; padding: .25rem; color: var(--text-muted); cursor: grab; touch-action: none; user-select: none; }
.template-field-drag > svg { fill: currentColor; stroke: none; pointer-events: none; }
.resource-template-fields.is-sorting, .resource-template-fields.is-sorting .template-field-drag { cursor: grabbing; user-select: none; }
.template-field-label.field { display: flex; align-items: center; flex: 1; gap: .625rem; min-inline-size: 0; }
.template-field-number { flex: 0 0 3.5rem; color: var(--text-muted); font-size: var(--font-caption); white-space: nowrap; }
.template-field-label > .form-control { flex: 1; }
.template-field-actions { display: inline-flex; flex: 0 0 auto; gap: .25rem; }
.template-field-fixed-badge { padding: .25em .625em; border-radius: var(--radius); background: var(--canvas); color: var(--text-muted); font-size: var(--font-caption); white-space: nowrap; }
.template-field-remove.btn { min-block-size: 2rem; block-size: 2rem; padding: .25em .625em; border-color: var(--border); color: var(--danger); font-size: var(--font-caption); }
.resource-template-add { justify-self: start; }
.resource-template-dialog .form-control[readonly] { border-color: var(--border); background: var(--canvas); }
.resource-template-message { padding: .75rem 1rem; border: var(--line) solid var(--border); border-radius: var(--radius); background: var(--canvas); line-height: 1.7; overflow-wrap: anywhere; }
.resource-template-message[data-status="error"] { color: var(--danger); }
.resource-template-message[data-status="success"] { color: var(--success); }
.resource-template-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: .75rem; padding: 1rem 1.5rem; border-block-start: var(--line) solid var(--border); }
@media (max-width: 36rem) {
    .resource-template-header, .resource-template-footer { padding-inline: 1rem; }
    .resource-template-content { padding: 1.25rem 1rem; }
    .template-field-row { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .375rem; }
    .template-field-row[data-field-fixed] { padding-inline-start: 0; }
    .template-field-drag { grid-column: 1; grid-row: 1 / 3; align-self: start; }
    .template-field-label.field { grid-column: 2; grid-row: 1; gap: .375rem; }
    .template-field-actions { grid-column: 2; grid-row: 2; justify-self: end; }
    .template-field-number { flex-basis: 2.75rem; }
}

/* Photo data editor within the existing V2 overlay. */
.photo-library-card[data-photo-editor-id] { position: relative; cursor: pointer; }
.photo-library-open { display: block; inline-size: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; overflow-wrap: anywhere; }
.photo-library-open:hover { text-decoration: underline; }
.photo-library-card[data-photo-editor-id].is-editing { border-color: var(--primary); outline: .125rem solid var(--primary); outline-offset: 0; background: var(--surface-selected); }
.photo-editing-badge { display: inline-flex; align-items: center; justify-content: center; padding: .25em .625em; border-radius: var(--radius); background: var(--primary); color: var(--surface); font-size: var(--font-caption); font-weight: 500; line-height: 1.5; white-space: nowrap; pointer-events: none; }
.photo-library-card > .photo-editing-badge { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; }
.photo-editor-overlay.popup { position: fixed; inset: 0; z-index: 1100; }
.photo-editor-dialog { display: flex; flex-direction: column; inline-size: 100%; block-size: 100vh; block-size: 100dvh; overflow: hidden; border-inline-start: var(--line) solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font-family); }
.photo-editor-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 1rem; padding: 1rem 1.5rem; border-block-end: var(--line) solid var(--border); }
.photo-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1 1 auto; min-block-size: 0; overflow: hidden; }
.photo-editor-form { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; overflow: hidden; }
.photo-editor-content { display: grid; align-content: start; flex: 1 1 auto; gap: 1.25rem; min-inline-size: 0; min-block-size: 0; padding: 1.5rem; overflow: auto; overscroll-behavior: contain; }
.photo-editor-name { overflow-wrap: anywhere; }
.photo-editor-empty { font-size: var(--font-caption); line-height: 1.7; word-break: keep-all; }
.photo-editor-fields { display: grid; gap: 1rem; min-inline-size: 0; }
.photo-editor-fields:empty { display: none; }
.photo-editor-fields .field-label { overflow-wrap: anywhere; }
.photo-editor-fields .form-control[readonly] { background: var(--canvas); color: var(--text-muted); }
.photo-editor-message { padding: .75rem 1rem; border: var(--line) solid var(--border); border-radius: var(--radius); background: var(--canvas); line-height: 1.7; overflow-wrap: anywhere; }
.photo-editor-message[data-status="error"] { color: var(--danger); }
.photo-editor-message[data-status="success"] { color: var(--success); }
.workbench-bulk-actions { justify-content: flex-end; }
.workbench-bulk-results { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; font-size: var(--font-caption); line-height: 1.7; overflow-wrap: anywhere; }
.workbench-bulk-results li[data-status="error"] { color: var(--danger); }
.photo-editor-footer { display: grid; flex: 0 0 auto; gap: 1rem; padding: 1rem 1.5rem; border-block-start: var(--line) solid var(--border); background: var(--surface); }
.photo-editor-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.photo-editor-delete-confirm { display: grid; gap: .75rem; padding: 1rem; border: var(--line) solid var(--border); border-radius: var(--radius); background: var(--canvas); }
.photo-editor-delete-confirm > p { line-height: 1.7; }
.photo-editor-delete-confirm > .button-group { justify-content: flex-end; }
@media (max-width: 36rem) {
    .photo-editor-header, .photo-editor-footer { padding-inline: 1rem; }
    .photo-editor-content { padding: 1.25rem 1rem; }
}

/* Multi-photo selection belongs to the all-photos and workbench workspaces. */
.photo-library-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; }
.photo-selection-toolbar { position: sticky; inset-block-start: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .875rem 1.5rem; padding: 1rem; border-color: var(--control-border); box-shadow: 0 .25rem .75rem rgb(0 0 0 / .06); }
.photo-selection-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.photo-selection-summary > p { white-space: nowrap; }
.photo-selection-summary strong { font-variant-numeric: tabular-nums; }
.photo-selection-delete.btn { color: var(--danger); }
.photo-selection-message { margin-block-start: 1rem; padding: .75rem 1rem; border: var(--line) solid var(--border); border-radius: var(--radius); background: var(--surface); overflow-wrap: anywhere; }
.photo-selection-message[data-status="error"] { color: var(--danger); }
.photo-selection-message[data-status="success"] { color: var(--success); }
:is([data-photo-library], [data-workbench-photo-view]) .photo-library-card { position: relative; }
.photo-select-toggle.btn { display: none; position: absolute; inset-block-start: .625rem; inset-inline-start: .625rem; z-index: 1; align-items: center; justify-content: center; inline-size: 2rem; min-inline-size: 2rem; block-size: 2rem; padding: .375rem; border: var(--outline) solid var(--control-border); border-radius: 50%; background: var(--surface); color: var(--surface); box-shadow: 0 .125rem .375rem rgb(0 0 0 / .15); }
.photo-select-toggle > .icon { inline-size: 1em; block-size: 1em; visibility: hidden; }
:is([data-photo-library], [data-workbench-photo-view]).is-selecting .photo-select-toggle { display: inline-flex; }
:is([data-photo-library], [data-workbench-photo-view]).is-selecting .photo-library-card { user-select: none; -webkit-user-select: none; }
:is([data-photo-library], [data-workbench-photo-view]).is-selecting .photo-library-image { -webkit-touch-callout: none; }
:is([data-photo-library], [data-workbench-photo-view]).is-selecting .photo-library-card.is-selected { border-color: var(--focus); box-shadow: inset 0 0 0 .125rem var(--focus); background: var(--surface-selected); }
:is([data-photo-library], [data-workbench-photo-view]).is-selecting .photo-library-card.is-selected > .photo-library-image { opacity: .8; }
:is([data-photo-library], [data-workbench-photo-view]).is-selecting .photo-select-toggle[aria-pressed="true"] { border-color: var(--focus); background: var(--focus); color: #fff; }
:is([data-photo-library], [data-workbench-photo-view]).is-selecting .photo-select-toggle[aria-pressed="true"] > .icon { visibility: visible; }
:is([data-photo-library], [data-workbench-photo-view]).is-selecting .photo-select-toggle:focus-visible { outline: var(--outline) solid var(--focus); outline-offset: .25rem; }
@media (max-width: 36rem) {
    .photo-library-actions { inline-size: 100%; }
    .photo-selection-toolbar { padding: .875rem; gap: .75rem; }
    .photo-selection-toolbar > .button-group { inline-size: 100%; }
    .photo-selection-toolbar > .button-group > .btn { flex: 1 1 auto; }
}

/* Selection confirmation and new workbench use the shared centered popup. */
.photo-selection-popup.popup, .workbench-popup.popup { position: fixed; inset: 0; z-index: 1100; }
.photo-selection-popup.popup.center .popup-body, .workbench-popup.popup.center .popup-body { margin-block-start: 0; }
.photo-selection-dialog, .workbench-dialog { inline-size: 30rem; max-inline-size: calc(100vw - 2rem); max-block-size: calc(100vh - 2rem); max-block-size: calc(100dvh - 2rem); border-radius: .5rem; font-family: var(--font-family); box-shadow: 0 1rem 3rem rgb(0 0 0 / .12); }
.photo-selection-dialog > .card-header, .workbench-dialog-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 1rem; padding: 1rem 1.5rem; border-block-end: var(--line) solid var(--border); }
.photo-selection-dialog > .card-body, .workbench-dialog-content { display: grid; align-content: start; flex: 1 1 auto; gap: 1.25rem; min-block-size: 0; padding: 1.5rem; overflow: auto; overflow-wrap: anywhere; overscroll-behavior: contain; }
.photo-selection-dialog > .card-footer, .workbench-dialog-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: .75rem; padding: 1rem 1.5rem; border-block-start: var(--line) solid var(--border); }
.workbench-dialog > form { display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; overflow: hidden; }
.workbench-dialog-message { padding: .75rem 1rem; border: var(--line) solid var(--border); border-radius: var(--radius); background: var(--canvas); line-height: 1.7; overflow-wrap: anywhere; }
.workbench-dialog-message[data-status="error"] { color: var(--danger); }
.workbench-dialog-message[data-status="success"] { color: var(--success); }
@media (max-width: 36rem) {
    .photo-selection-dialog > .card-header, .photo-selection-dialog > .card-footer,
    .workbench-dialog-header, .workbench-dialog-footer { padding-inline: 1rem; }
    .photo-selection-dialog > .card-body, .workbench-dialog-content { padding: 1.25rem 1rem; }
}

/* Upload and deletion progress stay above the photo editor overlay. */
.photo-progress-popup.popup { position: fixed; inset: 0; z-index: 1200; }
.photo-progress-popup.popup.center .popup-body { margin-block-start: 0; }
.photo-progress-dialog { inline-size: 30rem; max-inline-size: calc(100vw - 2rem); max-block-size: calc(100vh - 2rem); max-block-size: calc(100dvh - 2rem); border-radius: .5rem; font-family: var(--font-family); box-shadow: 0 1rem 3rem rgb(0 0 0 / .12); }
.photo-progress-header { display: flex; align-items: center; flex: 0 0 auto; padding: 1rem 1.5rem; border-block-end: var(--line) solid var(--border); }
.photo-progress-content { display: grid; align-content: start; flex: 1 1 auto; gap: 1rem; min-block-size: 0; padding: 1.5rem; overflow: auto; overscroll-behavior: contain; }
.photo-progress-summary { font-weight: 500; overflow-wrap: anywhere; }
.photo-progress-summary[data-status="error"] { color: var(--danger); }
.photo-progress-summary[data-status="success"] { color: var(--success); }
.photo-progress-current { overflow-wrap: anywhere; }
.photo-progress-current:empty, .photo-progress-results:empty { display: none; }
.photo-progress-results { display: grid; gap: .625rem; max-block-size: 16rem; margin: 0; padding: 0; overflow: auto; list-style: none; overscroll-behavior: contain; }
.photo-progress-results > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem .75rem; font-size: var(--font-caption); overflow-wrap: anywhere; }
.photo-progress-results > li[data-status="error"] { color: var(--danger); }
.photo-progress-results > li[data-status="success"] { color: var(--success); }
.photo-progress-footer { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: .75rem; padding: 1rem 1.5rem; border-block-start: var(--line) solid var(--border); }
:is([data-photo-library], [data-workbench-photo-view]) [data-photo-selection-message] + [data-photo-results] { margin-block-start: var(--space-8); }
@media (max-width: 36rem) {
    .photo-progress-header, .photo-progress-footer { padding-inline: 1rem; }
    .photo-progress-content { padding: 1.25rem 1rem; }
}

/* The workbench fills the viewport beneath photo editing and progress dialogs. */
.workbench-overlay.popup { position: fixed; inset: 0; z-index: 1000; overflow: hidden; }
.workbench-overlay.popup > div:not(.popup-back) { max-block-size: 100vh; max-block-size: 100dvh; overflow: hidden; }
.workbench-overlay.popup.overlay .popup-body { inline-size: 100%; max-inline-size: none; min-block-size: 0; overflow: hidden; }
.workbench-overlay-dialog { display: flex; flex-direction: column; inline-size: 100%; max-inline-size: none; block-size: 100vh; block-size: 100dvh; min-block-size: 0; overflow: hidden; background: var(--canvas); color: var(--text); font-family: var(--font-family); }
.workbench-overlay-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 1rem; min-block-size: 3.5rem; padding: .75rem 1.5rem; border-block-end: var(--line) solid var(--border); background: var(--surface); }
.workbench-overlay-header > .section-title { min-inline-size: 0; overflow-wrap: anywhere; }
.workbench-overlay-header > .btn { flex: 0 0 auto; }
.workbench-overlay-message { flex: 0 0 auto; margin: 0; padding: 1rem 1.5rem; color: var(--text-muted); overflow-wrap: anywhere; }
.workbench-overlay-message[data-status="error"] { color: var(--danger); }
.workbench-overlay-message:empty { display: none; }
.workbench-overlay-retry.btn { align-self: flex-start; flex: 0 0 auto; margin: 0 1.5rem 1rem; }
.workbench-overlay-content { flex: 1 1 auto; inline-size: 100%; min-inline-size: 0; min-block-size: 0; overflow: auto; overscroll-behavior: contain; }
.workbench-overlay-content > .workspace { display: block; inline-size: 100%; max-inline-size: none; min-block-size: 100%; }
.workbench-overlay-content > .workspace > .workspace-content { inline-size: 100%; max-inline-size: none; overflow: visible; }
.workbench-overlay-content > .workspace[data-workbench-photo-view] { block-size: 100%; overflow: hidden; }
.workbench-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); block-size: 100%; min-block-size: 0; }
.workbench-sidebar { min-inline-size: 0; min-block-size: 0; overflow: auto; padding-block: var(--space-4); border-inline-end: var(--line) solid var(--border); background: var(--surface); overscroll-behavior: contain; }
.workbench-main.workspace-content { inline-size: 100%; max-inline-size: none; min-inline-size: 0; overflow: auto; overscroll-behavior: contain; }
.workbench-group-list { margin: 0; padding: 0; list-style: none; }
.workbench-group-list .nav-item { align-items: flex-start; }
.workbench-group-list .nav-item > .icon { flex: 0 0 auto; margin-block-start: .25em; }
.workbench-group-name { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
.workbench-group-count { flex: 0 0 auto; margin-inline-start: auto; color: var(--text-muted); font-size: var(--font-caption); font-variant-numeric: tabular-nums; white-space: nowrap; }
.workbench-group-empty { padding: .5em .875em; color: var(--text-muted); font-size: var(--font-caption); line-height: 1.7; word-break: keep-all; }
@media (max-width: 36rem) {
    .workbench-overlay-header, .workbench-overlay-message { padding-inline: 1rem; }
    .workbench-overlay-retry.btn { margin-inline: 1rem; }
    .workbench-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .workbench-sidebar { max-block-size: 12rem; padding-block: .5rem; border-inline-end: 0; border-block-end: var(--line) solid var(--border); }
    .workbench-sidebar > .nav-group { padding-inline: 1rem; }
}

/* Group registration belongs to the workbench and opens above its overlay. */
.workbench-group-popup.popup { position: fixed; inset: 0; z-index: 1150; }
.workbench-group-popup.popup.center .popup-body { margin-block-start: 0; }
.workbench-group-dialog { inline-size: 30rem; max-inline-size: calc(100vw - 2rem); max-block-size: calc(100vh - 2rem); max-block-size: calc(100dvh - 2rem); border-radius: .5rem; font-family: var(--font-family); box-shadow: 0 1rem 3rem rgb(0 0 0 / .12); }
.workbench-group-dialog-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 1rem; padding: 1rem 1.5rem; border-block-end: var(--line) solid var(--border); }
.workbench-group-dialog > form { display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; overflow: hidden; }
.workbench-group-dialog-content { display: grid; align-content: start; flex: 1 1 auto; gap: 1.25rem; min-block-size: 0; padding: 1.5rem; overflow: auto; overflow-wrap: anywhere; overscroll-behavior: contain; }
.workbench-group-dialog-message { padding: .75rem 1rem; border: var(--line) solid var(--border); border-radius: var(--radius); background: var(--canvas); line-height: 1.7; overflow-wrap: anywhere; }
.workbench-group-dialog-message[data-status="error"] { color: var(--danger); }
.workbench-group-dialog-message[data-status="success"] { color: var(--success); }
.workbench-group-dialog-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: .75rem; padding: 1rem 1.5rem; border-block-start: var(--line) solid var(--border); }
@media (max-width: 36rem) {
    .workbench-group-dialog-header, .workbench-group-dialog-footer { padding-inline: 1rem; }
    .workbench-group-dialog-content { padding: 1.25rem 1rem; }
}

/* Photo upload selection uses the centered popup before upload progress begins. */
.photo-upload-popup.popup { position: fixed; inset: 0; z-index: 1100; }
.photo-upload-popup.popup.center .popup-body { margin-block-start: 0; }
.photo-upload-dialog { inline-size: 36rem; max-inline-size: calc(100vw - 2rem); max-block-size: calc(100vh - 2rem); max-block-size: calc(100dvh - 2rem); border-radius: .5rem; font-family: var(--font-family); box-shadow: 0 1rem 3rem rgb(0 0 0 / .12); }
.photo-upload-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 1rem; padding: 1rem 1.5rem; border-block-end: var(--line) solid var(--border); }
.photo-upload-content { display: grid; align-content: start; flex: 1 1 auto; gap: 1.25rem; min-block-size: 0; padding: 1.5rem; overflow: auto; overscroll-behavior: contain; }
.photo-upload-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .625rem; min-block-size: 15rem; padding: 1.75rem 1rem; border: .125rem dashed var(--control-border); border-radius: .5rem; background: var(--canvas); text-align: center; transition: border-color .15s ease, background-color .15s ease; }
.photo-upload-dropzone.is-dragging { border-color: var(--focus); background: var(--surface-selected); }
.photo-upload-dropzone-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 3rem; block-size: 3rem; margin-block-end: .25rem; color: var(--text-muted); font-size: 1.75rem; }
.photo-upload-dropzone-title { font-size: var(--font-body); font-weight: 500; line-height: 1.6; word-break: keep-all; }
.photo-upload-dropzone > .btn { margin-block-start: .375rem; }
.photo-upload-formats { margin-block-start: .25rem; }
.photo-upload-selection { display: grid; gap: .75rem; min-inline-size: 0; }
.photo-upload-selection-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.photo-upload-selection-header strong { font-variant-numeric: tabular-nums; }
.photo-upload-clear.btn { min-block-size: 2rem; block-size: auto; padding: .25em .75em; border-color: var(--border); font-size: var(--font-caption); }
.photo-upload-list { display: grid; gap: .5rem; max-block-size: 13rem; margin: 0; padding: 0; overflow: auto; list-style: none; overscroll-behavior: contain; }
.photo-upload-file { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; padding: .625rem .75rem; border: var(--line) solid var(--border); border-radius: var(--radius); background: var(--surface); }
.photo-upload-file-name { min-inline-size: 0; font-size: var(--font-caption); overflow-wrap: anywhere; }
.photo-upload-file-size { color: var(--text-muted); font-size: var(--font-caption); font-variant-numeric: tabular-nums; white-space: nowrap; }
.photo-upload-file [data-photo-upload-remove] { flex: 0 0 auto; }
.photo-upload-message { padding: .75rem 1rem; border: var(--line) solid var(--border); border-radius: var(--radius); background: var(--canvas); line-height: 1.7; overflow-wrap: anywhere; }
.photo-upload-message[data-status="error"] { color: var(--danger); }
.photo-upload-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: .75rem; padding: 1rem 1.5rem; border-block-start: var(--line) solid var(--border); }
@media (max-width: 36rem) {
    .photo-upload-header, .photo-upload-footer { padding-inline: 1rem; }
    .photo-upload-content { padding: 1.25rem 1rem; }
    .photo-upload-dropzone { min-block-size: 13rem; padding: 1.25rem .75rem; }
    .photo-upload-file { grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .5rem; }
    .photo-upload-file-name { grid-column: 1; grid-row: 1; }
    .photo-upload-file-size { grid-column: 1; grid-row: 2; }
    .photo-upload-file [data-photo-upload-remove] { grid-column: 2; grid-row: 1 / 3; }
}
@media (prefers-reduced-motion: reduce) {
    .photo-upload-dropzone { transition: none; }
}

/* The live dashboard presents account-owned photos, workbenches, and templates. */
main[data-dashboard-view] .dashboard-stat-value { font-variant-numeric: tabular-nums; }
main[data-dashboard-view] .dashboard-live-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
main[data-dashboard-view] .dashboard-panel-header { border-block-end: var(--line) solid var(--border); }
main[data-dashboard-view] .dashboard-table td:first-child { padding-inline-start: 1.5rem; }
main[data-dashboard-view] .dashboard-table td:last-child { padding-inline-end: 1.5rem; }
main[data-dashboard-view] .dashboard-table tr:last-child td { border-block-end: 0; }
main[data-dashboard-view] .dashboard-table tr[data-photo-editor-id] { cursor: pointer; }
main[data-dashboard-view] .dashboard-table tr[data-photo-editor-id]:hover { background: var(--canvas); }
main[data-dashboard-view] .dashboard-table tr[data-photo-editor-id].is-editing { background: var(--surface-selected); }
main[data-dashboard-view] .dashboard-table tr.is-editing > td:first-child { position: relative; box-shadow: inset .1875rem 0 var(--primary); }
main[data-dashboard-view] .dashboard-table td > .photo-editing-badge { position: absolute; inset-block-end: .75rem; inset-inline-start: 1.5rem; inline-size: 4rem; padding-inline: .25em; }
main[data-dashboard-view] .dashboard-photo-thumb { inline-size: 4rem; block-size: 3rem; max-inline-size: none; object-fit: cover; border-radius: var(--radius); background: var(--canvas); }
main[data-dashboard-view] .dashboard-photo-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-inline-size: 0; max-inline-size: 24em; overflow: hidden; overflow-wrap: anywhere; line-height: 1.6; }
main[data-dashboard-view] .dashboard-photo-date { color: var(--text-muted); font-size: var(--font-caption); white-space: nowrap; }
main[data-dashboard-view] .dashboard-workbench-list { margin: 0; padding: 0 1.5rem; list-style: none; }
main[data-dashboard-view] .dashboard-workbench-row { display: flex; align-items: center; gap: 1rem; min-inline-size: 0; padding: 1.25rem 0; border-block-end: var(--line) solid var(--border); }
main[data-dashboard-view] .dashboard-workbench-row:last-child { border-block-end: 0; }
main[data-dashboard-view] .dashboard-workbench-copy { display: grid; flex: 1; gap: .375rem; min-inline-size: 0; }
main[data-dashboard-view] .dashboard-workbench-copy h3 { min-inline-size: 0; font-size: var(--font-body); font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
main[data-dashboard-view] .dashboard-workbench-copy p { color: var(--text-muted); font-size: var(--font-caption); overflow-wrap: anywhere; }
main[data-dashboard-view] .dashboard-template-grid.card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
main[data-dashboard-view] .dashboard-template-card > .card-body { gap: .75rem; }
main[data-dashboard-view] .dashboard-item-link { margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; text-decoration: none; text-underline-offset: .2em; cursor: pointer; }
main[data-dashboard-view] .dashboard-item-link:hover { text-decoration: underline; }
main[data-dashboard-view] .dashboard-item-link:focus-visible { outline: var(--outline) solid var(--focus); outline-offset: .1875rem; }
main[data-dashboard-view] .dashboard-template-title { min-inline-size: 0; line-height: 1.6; overflow-wrap: anywhere; }
main[data-dashboard-view] .dashboard-template-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; overflow-wrap: anywhere; }
main[data-dashboard-view] .dashboard-template-footer { justify-content: flex-end; }
main[data-dashboard-view] .dashboard-template-meta { display: flex; flex-wrap: wrap; gap: .375rem 1rem; color: var(--text-muted); font-size: var(--font-caption); }
main[data-dashboard-view] .dashboard-panel-message { padding: 1.5rem; color: var(--text-muted); line-height: 1.7; overflow-wrap: anywhere; }
main[data-dashboard-view] .dashboard-panel-message[role="alert"] { color: var(--danger); }
main[data-dashboard-view] .dashboard-panel-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; min-block-size: 8rem; padding: 1.5rem; color: var(--text-muted); font-size: var(--font-body); line-height: 1.7; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 64rem) {
    main[data-dashboard-view] .dashboard-live-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 36rem) {
    main[data-dashboard-view] .dashboard-table td:first-child { padding-inline-start: 1rem; }
    main[data-dashboard-view] .dashboard-table td > .photo-editing-badge { inset-inline-start: 1rem; }
    main[data-dashboard-view] .dashboard-table td:last-child { padding-inline-end: 1rem; }
    main[data-dashboard-view] .dashboard-workbench-list { padding-inline: 1rem; }
    main[data-dashboard-view] .dashboard-panel-message, main[data-dashboard-view] .dashboard-panel-empty { padding-inline: 1rem; }
}