/* PHOTO SPEC overlay + panels (assets/js/photo-spec.js, 2026-09-28).
   Chip: discreet, bottom-left of the carousel stage. Translucent dark glass +
   hairline border + text shadow = legible on light AND dark photos. The layer is
   pointer-events:none — only the chip itself takes a tap, so swipe / pinch /
   drag-pan / click-zoom on the photo stay untouched. Panels = the walled spec
   (#0c0e10, 1px silver, sharp corners). */
.ps-ov {
  position: absolute; left: 10px; bottom: 10px; right: 10px; z-index: 3;
  display: flex; align-items: flex-end; gap: 6px; pointer-events: none;
}
.ps-chip, .ps-admin {
  pointer-events: auto; cursor: pointer; margin: 0;
  font: 500 11.5px/1.35 var(--font-body, system-ui, sans-serif); letter-spacing: 0.02em;
  color: #f4f5f7; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  background: rgba(10, 12, 14, 0.46);
  -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0;
  padding: 5px 9px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: background .15s ease, border-color .15s ease;
}
.ps-chip { min-width: 0; max-width: min(100%, 560px); text-align: left; }
.ps-chip__t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-chip:hover, .ps-chip:focus-visible, .ps-admin:hover { background: rgba(10, 12, 14, 0.72); border-color: rgba(255, 255, 255, 0.5); outline: none; }
.ps-admin { flex: 0 0 auto; color: #ffd66b; border-style: dashed; }
@media (max-width: 768px) {
  .ps-ov { left: 6px; bottom: 6px; right: 6px; }
  .ps-chip, .ps-admin { font-size: 10.5px; padding: 4px 7px; }
  .ps-chip { max-width: calc(100% - 4px); }
}
/* hidden while the photo is zoomed in (zoom.js marks the stage) — never in the way */
.iz-stage.is-zoomed .ps-ov { opacity: 0; visibility: hidden; }

html.ps-lock { overflow: hidden; }
.ps-modal {
  position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, 0.62);
}
.ps-box {
  width: min(460px, 100%); max-height: min(86vh, 720px); overflow-y: auto;
  background: #0c0e10; color: var(--white, #f2f2f2);
  border: 1px solid rgba(198, 203, 212, 0.32); border-radius: 0;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.78); padding: 16px 18px 18px;
}
.ps-box--edit { width: min(560px, 100%); }
.ps-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ps-title { margin: 0; font-family: var(--font-display, inherit); letter-spacing: 0.04em; text-transform: uppercase; font-size: 1rem; }
.ps-x { background: transparent; border: 1px solid var(--line, #333); color: var(--white-dim, #bbb); width: 32px; height: 32px; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.ps-x:hover { color: #fff; border-color: #888; }
.ps-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 14px; font-size: 0.92rem; }
.ps-dl dt { color: var(--white-dim, #aaa); }
.ps-dl dd { margin: 0; color: #fff; overflow-wrap: anywhere; }
.ps-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-btn {
  padding: 0.55rem 0.9rem; background: transparent; color: var(--white, #eee); cursor: pointer;
  border: 1px solid var(--line, #444); font-family: var(--font-display, inherit); letter-spacing: 0.04em; font-size: 0.9rem;
}
.ps-btn:hover { border-color: #aaa; }
.ps-btn:disabled { opacity: 0.5; cursor: default; }
.ps-btn--primary { background: #f2f2f2; color: #0c0e10; border-color: #f2f2f2; }
.ps-btn--primary:hover { background: #fff; }
.ps-msg { margin: 0 0 12px; font-size: 0.85rem; color: #9fd89f; }
.ps-msg.is-warn { color: var(--pink, #ff8fb1); }
.ps-src { margin: 0 0 10px; font-size: 0.75rem; color: var(--gray, #888); overflow-wrap: anywhere; }
.ps-rows { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.ps-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ps-row__l { flex: 0 0 7.5rem; font-size: 0.85rem; color: var(--white-dim, #aaa); }
.ps-in { flex: 1 1 auto; min-width: 0; padding: 0.45rem 0.5rem; background: #000; color: #fff; border: 1px solid var(--line, #333); font-size: 0.92rem; }
.ps-in:focus-visible { outline: none; border-color: #fff; }
.ps-in--l { flex: 0 0 7.5rem; }
.ps-add { flex: 0 0 auto; align-self: flex-start; }
.ps-rm { flex: 0 0 auto; width: 2rem; height: 2rem; background: transparent; border: 1px solid var(--line, #333); color: var(--gray, #888); cursor: pointer; }
.ps-rm:hover { color: #fff; border-color: #888; }
/* HERO + RANGE CARD from the spec window (2026-10-02) */
.ps-gal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 0 0; border-top: 1px dashed var(--line, #333); }
.ps-gal[hidden], .ps-gal .ps-btn[hidden] { display: none; }
.ps-gal__info { flex: 1 1 100%; font-size: 0.78rem; color: var(--white-dim, #bbb); overflow-wrap: anywhere; }
.ps-gal__sel { flex: 1 1 100%; }
/* COPY / PASTE SPEC (2026-10-02) */
.ps-clip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 0 0; border-top: 1px dashed var(--line, #333); }
.ps-clip__inc { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; color: var(--white-dim, #bbb); cursor: pointer; min-height: 2rem; }
.ps-clip__inc[hidden] { display: none; }
.ps-clip__inc input { width: 18px; height: 18px; margin: 0; }
.ps-clip__info { flex: 1 1 100%; font-size: 0.75rem; color: var(--gray, #888); overflow-wrap: anywhere; }
.ps-log { margin-top: 12px; border-top: 1px solid var(--line, #333); padding-top: 10px; font-size: 0.78rem; display: flex; flex-direction: column; gap: 8px; }
.ps-log__r { display: flex; flex-direction: column; gap: 2px; }
.ps-log__at { color: var(--gray, #888); }
.ps-log__d { color: #ddd; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .ps-row__l, .ps-in--l { flex-basis: 5.5rem; }
}

/* SPEC EDITOR v3 + INDONESIA LAYER (2026-10-03) */
.ps-layer { margin: 0 0 8px; display: inline-block; padding: 2px 8px; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line, #444); color: var(--white-dim, #bbb); }
.ps-layer--id { border-color: #e2b13c; color: #ffd66b; }
.ps-idnote { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; padding: 8px; border: 1px dashed #e2b13c; font-size: 0.8rem; color: #ffd66b; }
.ps-idnote[hidden] { display: none; }
.ps-idnote__t { flex: 1 1 100%; overflow-wrap: anywhere; }
.ps-cats { align-items: flex-start; }
.ps-cats__chips { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ps-cat { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px; border: 1px solid #555; font-size: 0.8rem; overflow-wrap: anywhere; max-width: 100%; }
.ps-cat.is-new { border-color: #7be0a0; }
.ps-cat--tag { border-style: dashed; }
.ps-cat__x { background: transparent; border: 0; color: var(--gray, #999); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; min-height: 24px; }
.ps-cat__x:hover { color: #fff; }
.ps-cats__add { flex: 0 1 auto; max-width: 100%; }
.ps-cats__custom { flex: 1 1 140px; }
.ps-cats__note { font-size: 0.75rem; color: var(--gray, #888); flex: 1 1 100%; }
.ps-fc { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ps-fc__sel { flex: 1 1 100%; min-width: 0; }
.ps-fc__custom { flex: 1 1 60%; }
.ps-fc__save { font-size: 0.78rem; color: var(--white-dim, #bbb); display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.ps-fc__save[hidden], .ps-fc__custom[hidden], .ps-cats__custom[hidden] { display: none; }
.ps-fc__save input { width: 18px; height: 18px; margin: 0; }
.ps-row--f.is-off { opacity: 0.55; }
.ps-link { background: transparent; border: 0; color: #9cc7ff; cursor: pointer; padding: 4px 0; font-size: 0.8rem; text-align: left; align-self: flex-start; }
.ps-opts { border-top: 1px dashed var(--line, #333); padding-top: 8px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; font-size: 0.8rem; }
.ps-opts__t, .ps-opts__e { margin: 0; color: var(--gray, #888); }
.ps-opts__r { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ps-opts__k { flex: 0 0 7.5rem; color: var(--white-dim, #bbb); }
.carousel-thumb.ps-thumb-sel { outline: 3px solid #ff4da6; outline-offset: -3px; }
.ps-selbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10045; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #0c0e10; border-top: 2px solid #ff4da6; box-shadow: 0 -8px 24px rgba(0,0,0,.5); }
.ps-selbar__n { color: #ff4da6; font-size: 0.85rem; }
@media (max-width: 480px) {
  .ps-opts__k { flex-basis: 100%; }
  .ps-selbar .ps-btn { flex: 1 1 40%; min-height: 44px; }
  .ps-fc__sel, .ps-cats__add { min-height: 44px; font-size: 16px; }
}
/* the editor's dropdowns in the walled style on every engine (WebKit drew native white controls with grey text) */
.ps-box select.ps-in {
  -webkit-appearance: none; appearance: none; border-radius: 0; color: #fff; padding-right: 30px;
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c6cbd4'/%3E%3C/svg%3E") no-repeat right 11px center / 10px 6px;
}
.ps-box select.ps-in option, .ps-box select.ps-in optgroup { background: #0c0e10; color: #fff; }
/* 2026-10-03: shared multi-select (assets/js/multi-select.js) — drop target + the bar's status line */
.carousel-thumb.ps-thumb-over { outline: 2px dashed #ff4da6; outline-offset: -2px; }
.ps-selbar__msg { flex: 1 1 100%; text-align: center; font-size: 0.82rem; color: #d7dbe2; }
.ps-selbar__msg.is-warn { color: #ffb3c7; }