.header{height:auto;min-height:96px;gap:22px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px}nav{display:flex;gap:8px;flex-wrap:wrap}nav a{padding:12px 14px;border-radius:5px;font-size:12px}nav a[aria-current]{background:#eaf0e7;color:var(--green)}.brand-sub,.brand-divider{display:none}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 17px;border:1px solid #d6ddd2;border-radius:5px;background:white;font:inherit;font-size:12px;text-decoration:none;line-height:1.5}.button:hover{background:#edf1e9}.button.primary{background:var(--green);color:white;border-color:var(--green)}.button.primary:hover{background:#243d2f}.button.danger{color:#934b3e}.button:disabled{opacity:.4;cursor:default}.button.compact{padding:9px 14px}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.readiness{color:#52624c;border-left:3px solid #94a48b;padding:8px 14px;line-height:1.7}.form-heading{margin:32px 0}.editor{background:white;border:1px solid var(--line);border-radius:7px;padding:30px;min-width:0}.project-editor{max-width:790px}.field{margin-bottom:22px}.field>label,.upload>label{display:block;font-weight:600;font-size:13px;margin-bottom:10px}input:not([type=checkbox]):not(:where(.search-wrap input)){font:inherit;width:100%;min-height:46px;border-radius:4px;background:#fff;padding:12px;color:var(--ink)}input:not(:where(.search-wrap input)):focus-visible{outline:2px solid #849779!important;outline-offset:2px}input[aria-invalid=true]{border-color:#a24d42!important}.field-error,.form-error{color:#a04436;font-size:12px;line-height:1.6}.field-error:empty,.form-error:empty{display:none}.form-error{padding:14px;border:1px solid #d6aaa1;background:#fcf3f1;border-radius:4px}.selector{padding:0;border:0;margin:0 0 24px;min-width:0}.selector legend{font-weight:600;font-size:13px;margin-bottom:12px}.options{display:flex;flex-wrap:wrap;gap:8px}.options label{display:flex;align-items:center;gap:9px;border:1px solid var(--line);padding:10px 12px;border-radius:4px;min-height:44px;cursor:pointer;font-size:12px}.options label:has(input:checked){background:#edf2e9;border-color:#90a285}.options input{accent-color:var(--green);width:16px;height:16px;flex-shrink:0}.feature-search{display:block;font-size:12px;margin-bottom:12px}.feature-search input{display:block;margin-top:8px}.feature-search+.options{max-height:340px;overflow:auto;padding:3px}.comparison-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:26px;align-items:start}.uploads{display:grid;gap:24px}.upload{border:1px dashed #a9b7a3;border-radius:6px;background:#fff;padding:23px;min-width:0}.upload.dragging{background:#edf3e8;outline:2px solid var(--green)}.upload input[type=file]{font-size:12px!important;max-width:100%;padding:9px!important}.upload-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;margin-top:16px}.upload-preview:empty{display:none}.upload-preview img{width:100%;max-height:280px;object-fit:contain;display:block;background:#f4f5f1;border-radius:3px}.upload-preview figure{margin:0;min-width:0}.upload-preview figcaption{font-size:12px;overflow-wrap:anywhere;margin-top:10px;color:var(--muted)}.hint{font-size:12px;color:var(--muted);line-height:1.8}.form-actions{justify-content:flex-end;padding:10px 0}.management-list{border-top:1px solid var(--line)}.management-row{display:flex;gap:22px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}.management-row:hover{background:#eff2ec}.management-row>img,.draft-icon{width:125px;height:90px;object-fit:cover;border-radius:5px;flex-shrink:0}.draft-icon{display:grid;place-items:center;background:#e7ece3;font-size:26px;color:#7c8c72}.management-row>div:not(.draft-icon){flex:1;min-width:0}.management-row h2{font-size:17px;margin:0 0 8px}.management-row p,.management-row span{color:var(--muted);font-size:12px;line-height:1.6;margin:0}.management-row>i{margin-right:15px}.settings{margin-top:55px;max-width:750px}.settings h2{font-size:18px}.settings p{color:var(--muted);line-height:1.8}.empty-management{padding:45px;background:white;border:1px solid var(--line);border-radius:6px;grid-column:1/-1}.empty-management h2{font-size:19px}.empty-management p{color:var(--muted)}.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.support-photo{margin:0;min-width:0}.support-photo>img{width:100%;height:230px;object-fit:contain;background:#e9ede5;border-radius:5px}.support-photo p,.support-photo figcaption{font-size:12px;overflow-wrap:anywhere;color:var(--muted);line-height:1.7}.current-cover{outline:3px solid #7f9773;outline-offset:3px}.notice{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#243d2f;color:white;padding:17px 24px;border-radius:6px;z-index:20;box-shadow:0 5px 20px #0002;max-width:90%;width:max-content;font-size:13px}.missing-image{display:grid;place-items:center;height:100%;min-height:90px;color:var(--muted)}dialog.confirmation{inset:0;margin:auto;width:calc(100% - 40px);max-width:480px;height:fit-content;max-height:calc(100dvh - 40px);overflow-y:auto;background:white;color:var(--ink);padding:30px;border-radius:8px;box-shadow:0 20px 80px #0003}dialog.confirmation::backdrop{background:#17261bbb}dialog.confirmation h2{font-size:20px;margin-top:0}dialog.confirmation p{line-height:1.8;color:var(--muted)}dialog.confirmation .actions{justify-content:flex-end}@media(max-width:900px){.comparison-editor{grid-template-columns:1fr}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header{gap:12px}nav a{padding:10px;font-size:12px}}@media(max-width:480px){.editor,.upload{padding:20px}.management-row{gap:13px}.management-row>img,.draft-icon{width:75px;height:75px}.management-row h2{font-size:14px}.management-row>i{display:none}.photo-grid{grid-template-columns:1fr}.header{padding:18px 5%}nav{width:100%;justify-content:space-between;gap:0}nav a{padding:10px 6px}.actions .button{flex-grow:1}.empty-management{padding:25px}.notice{font-size:12px}.form-heading h1{font-size:29px}} 

/* Lock the page for every modal, including nested dialogs and tag editors.
   The original overflow styles resume automatically after the last one closes. */
html:has(dialog:modal),
body:has(dialog:modal) {
  overflow: hidden;
  overscroll-behavior: none;
}
dialog:modal { overscroll-behavior: contain; }

.project-selection { position: relative; min-width: 0; }
.project-selection > .card { width: 100%; height: 100%; }
.project-selection > .management-row { padding-left: 48px; }
.project-select { position: absolute; top: 12px; left: 10px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 5px; cursor: pointer; }
.project-select input { width: 20px; height: 20px; accent-color: var(--green); }
.management-list .project-select { left: 0; top: 25px; width: 40px; }
.is-selected { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 5px; }
.bulk-toolbar { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 16px; margin-top: 24px; background: white; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 4px 24px #24342e18; }
.bulk-toolbar[hidden] { display: none; }
.bulk-toolbar [data-selected-count] { margin-right: auto; font-weight: 600; }
@media(min-width:481px) { .bulk-toolbar { justify-content: flex-end; } }
.bulk-mode { padding-bottom: 24px; }
@media(max-width:480px) { .bulk-toolbar { bottom: 8px; padding: 12px; } .bulk-toolbar [data-selected-count] { flex-basis: 100%; } .bulk-toolbar .button { flex: 1 0 auto; } }
.drag-handle { cursor: grab; touch-action: none; min-width: 44px; }
.drag-handle:active { cursor: grabbing; }
.is-reordering { user-select: none; }
.is-reordering article { transition: none; }
.is-dragging { opacity: .6; outline: 2px solid var(--green); outline-offset: 3px; }
#management[aria-busy=true] .drag-handle { cursor: wait; }
.visibility-control { margin: 16px 0 20px; }
.visibility-control .hint { margin: 8px 0 0; }
.visibility-toggle { border: 0; padding-left: 0; background: transparent; }
.switch-track { width: 38px; height: 22px; padding: 3px; border-radius: 20px; background: #b3bcb1; }
.switch-track::after { content: ''; display: block; width: 16px; height: 16px; border-radius: 50%; background: white; transition: transform .15s; }
.visibility-toggle[aria-checked=true] .switch-track { background: var(--green); }
.visibility-toggle[aria-checked=true] .switch-track::after { transform: translateX(16px); }
.settings-panel { margin-bottom: 24px; }
.settings-panel h2 { margin-top: 0; font-size: 20px; }
.tag-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.tag-add { margin-bottom: 18px; }
.tag-add > label { display: block; margin-bottom: 8px; font-size: 12px; }
.tag-add input { border: 1px solid var(--line); }
.tag-list { max-height: 420px; overflow: auto; padding-right: 6px; }
.tag-row { display: flex; align-items: center; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tag-row > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tag-row .hint { margin: 5px 0 0; }
.confirmation select { width: 100%; min-height: 46px; padding: 10px; border: 1px solid var(--line); background: white; color: var(--ink); font: inherit; }
@media (max-width: 900px) { .tag-columns { grid-template-columns: 1fr; } }
@media (max-width: 480px) { nav { flex-wrap: wrap; } .tag-row { flex-wrap: wrap; } .tag-row > div { flex-basis: 100%; } }

/* Keep metadata fields consistent with the library's subtle form borders. */
.field input,
.feature-search input {
  border: 1px solid var(--line);
}

.management-intro {
  flex-wrap: wrap;
  gap: 16px 24px;
}

.management-intro > .button {
  flex: 0 0 auto;
  white-space: nowrap;
}

#management .set-grid {
  grid-auto-rows: 1fr;
}

#management .set-grid .card-body > .actions {
  margin-top: auto;
  padding-top: 20px;
}

.photo-viewer {
  display: block;
  position: relative;
  width: 100%;
  height: 230px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  background: #e9ede5;
}

.photo-viewer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.photo-viewer .hover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
}

.photo-viewer .hover-video.is-previewing {
  opacity: 1;
}

.nav:disabled {
  opacity: .4;
  cursor: default;
}

.management-results-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0;
}

.management-results-heading .hint { margin: 0; }
.view-toggle { white-space: nowrap; }
.management-result-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.status-filter { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: white; }
.status-filter button { min-height: 38px; padding: 8px 12px; border: 1px solid transparent; border-radius: 4px; background: transparent; font-size: 12px; white-space: nowrap; }
.status-filter button:hover { background: #f2f4ef; }
.status-filter button[aria-pressed=true] { background: #eaf0e7; border-color: #cbd6c5; color: var(--green); }
@media(max-width:480px) {
  .management-result-controls { width: 100%; }
  .status-filter { width: 100%; }
  .status-filter button { flex: 1; min-height: 44px; padding-inline: 8px; }
}
.custom-tag-editor { margin-top: 16px; }
.custom-tag-editor > label { display: block; font-size: 12px; margin-bottom: 8px; }
.custom-tag-entry { display: flex; gap: 10px; align-items: center; }
.custom-tag-entry input { min-width: 0; border: 1px solid var(--line); }
.custom-tag-entry .button { flex-shrink: 0; white-space: nowrap; }
.management-row { width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); }
.management-row h3 { font-size: 17px; margin: 0 0 8px; }
.management-row > i { color: #9aa390; }
.management-row .categories { margin: 0 0 6px; }
.management-row > div:not(.draft-icon) { min-width: 0; }
.project-grid .card-photo > .draft-icon { width: 100%; height: 100%; }
.project-grid .card-meta { flex-wrap: wrap; gap: 6px 12px; }

@media (max-width: 480px) {
  .management-row h3 { font-size: 14px; }
}

#management > .button + .eyebrow {
  margin-top: 28px;
}

.upload-preview video {
  display: block;
  width: 100%;
  max-height: 280px;
  background: #111;
  object-fit: contain;
}

.image-stage video {
  max-width: calc(100% - 120px);
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #111;
}

.media-error {
  position: absolute;
  padding: 16px;
  background: #24342e;
  color: white;
  font-size: 12px;
  max-width: 80%;
}

@media (max-width: 800px) {
  .image-stage video { max-width: 100%; }
  .image-stage:has(video:not([hidden])) .nav {
    top: 8px;
    bottom: auto;
  }
}
@media (max-width: 480px) {
  .toggle:has(#render:not([hidden])) button { min-width: 64px; }
}

.auth-pending { visibility: hidden; }