/* CLAUDE 10-10: photo mode (Edit photo, photomode.js / photo.js). A photo project is shown in the same editor as a video,
   minus everything a still has no use for: no timeline, playback, sound, captions or transitions. Every rule that hides
   or changes the editor is under body.photo-mode (set by useProject for a photo project only), so a video project is
   untouched. The Photo tab, the Save-as dialog and the opening dialog are styled here too. */

/* ----- the Editor page's start cards: Edit photo beside New project ----- */
.ed-hero {
  grid-template-columns: 1.7fr 1fr 1fr;
  grid-template-areas:
    'cont new photo'
    'cont open open';
}
.ed-hero:has(.ed-continue[hidden]) {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: 'new photo open';
}
.ed-hero .ed-photo {
  grid-area: photo;
  min-height: 151px;
}
.ed-photo .ed-start-icon {
  background: #1f1f21;
  color: #53fc18;
}
@media (max-width: 900px) {
  .ed-hero,
  .ed-hero:has(.ed-continue[hidden]) {
    grid-template-columns: 1fr;
    grid-template-areas:
      'cont'
      'new'
      'photo'
      'open';
  }
}

/* ----- the Photo tab (right panel) ----- */
.inspector .tabs .ph-tab {
  display: none;
}
body.photo-mode .inspector .tabs .ph-tab {
  display: block;
}
.pm-panel {
  display: grid;
  gap: 22px;
}
.pm-sec h3 {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8e8e91;
}
.pm-sec[hidden] {
  display: none;
}
.pm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pm-chips button,
.pm-seg button {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid #2c2c2e;
  background: #151517;
  color: #c9c9cc;
  font-size: 12px;
}
.pm-chips button:hover,
.pm-seg button:hover {
  background: #1f1f21;
}
.pm-chips button[aria-checked='true'],
.pm-seg button[aria-checked='true'],
.pm-seg button[aria-pressed='true'] {
  border-color: var(--accent);
  color: #fff;
  background: #1b2417;
}
.pm-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.pm-seg button {
  flex: 1 1 auto;
}
.pm-note {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #8e8e91;
}
.pm-panel .range-field {
  margin-bottom: 18px;
}
.pm-panel button:focus-visible,
.pm-dlg button:focus-visible,
.pm-format:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pm-btn {
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
}
.pm-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
}
.pm-primary:hover {
  background: #7cff4f;
}

/* ----- the dialogs: opening a photo, Save your photo ----- */
.pm-dlg {
  box-sizing: border-box;
  width: min(92vw, 400px);
  padding: 24px;
  border: 1px solid #2c2c2e;
  border-radius: 16px;
  background: #121214;
  color: var(--text);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.6);
}
.pm-dlg::backdrop {
  background: rgb(0 0 0 / 0.6);
}
.pm-dlg h2 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.2px;
}
.pm-dlg p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #b0b0b3;
}
.pm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
.pm-work {
  text-align: center;
}
.pm-spin {
  width: 34px;
  height: 34px;
  margin: 4px auto 16px;
  border-radius: 50%;
  border: 3px solid #2c2c2e;
  border-top-color: var(--accent);
  animation: pm-spin 0.8s linear infinite;
}
.pm-work.bad .pm-spin {
  display: none;
}
.pm-work.bad h2 {
  color: #ff8a80;
}
.pm-work:not(.bad) .pm-actions {
  display: none;
}
@keyframes pm-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pm-spin {
    animation-duration: 2.4s;
  }
}
.pm-formats {
  display: grid;
  gap: 8px;
  margin: 14px 0 12px;
}
.pm-format {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid #2c2c2e;
  border-radius: 12px;
  background: #151517;
  cursor: pointer;
}
.pm-format:has(input:checked) {
  border-color: var(--accent);
  background: #1b2417;
}
.pm-dlg .pm-formats .pm-format input[type='radio'] {
  /* style.css sizes every input but checkbox, range and colour at 100% wide: more specific than that */
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--accent);
}
.pm-format > span {
  flex: 1;
  min-width: 0;
}
.pm-format b {
  display: block;
  font-size: 14px;
}
.pm-format small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: #9a9a9d;
}
/* the finished export in the job card: the picture, then Download and Close under it */
#jobDownloads:has(.pm-result) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.pm-result {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  min-width: 0;
  max-height: 200px;
  border-radius: 8px;
  object-fit: contain;
  background: #0b0b0c;
}
#jobDownloads:has(.pm-result) a,
#jobDownloads:has(.pm-result) button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ----- what a still does not have ----- */
body.photo-mode .cc-cats button[data-cc='audio'],
body.photo-mode .cc-cats button[data-cc='transitions'],
body.photo-mode .cc-cats button[data-cc='captions'],
body.photo-mode .cc-cats button[data-cc='templates'] {
  display: none;
}
/* no timeline: its row gives the room to the picture */
@media (min-width: 1100px) {
  body.photo-mode main {
    grid-template-rows: minmax(0, 1fr) auto auto auto 0;
  }
  body.photo-mode main::after {
    display: none;
  }
}
/* the player's row: play, the clock, the seek bar, mute, the shape picker (the Photo tab has it) and Save frame */
body.photo-mode #playBtn,
body.photo-mode #clock,
body.photo-mode #seek,
body.photo-mode #duration,
body.photo-mode #muteBtn,
body.photo-mode #snapBtn,
body.photo-mode .ratio-pick,
body.photo-mode #peKey,
body.photo-mode .pe-slash {
  display: none;
}
body.photo-mode #sequenceStrip,
body.photo-mode #editTimeline,
body.photo-mode .trim-bar,
body.photo-mode #sequenceNote,
body.photo-mode #exportShapesBtn,
body.photo-mode #exportAsNew {
  display: none;
}
/* a text or sticker is on the photo's one moment: no times, animations, tracking, speech or keyframes. The words in the
   tools' hints that talk about the playhead and the timeline go too. */
body.photo-mode .layer-ed [data-ov-tab='anim'],
body.photo-mode .layer-ed [data-ov-tab='track'],
body.photo-mode .layer-ed [data-ov-tab='tts'],
body.photo-mode .layer-ed .ov-tabs,
body.photo-mode .layer-ed details[data-grp='timing'],
body.photo-mode .layer-ed details[data-grp='writer'],
body.photo-mode .layer-ed .overlay-head > span,
body.photo-mode .layer-ed .kf-dia,
body.photo-mode .layer-ed details[data-grp='track'],
body.photo-mode .layer-ed label.field:has(select[data-ov='animation']),
body.photo-mode .layer-ed .overlay-card > .pair:has([data-ov='start'], [data-ov-now]),
body.photo-mode .layer-ed .kf-bar,
body.photo-mode .ov-row > span,
body.photo-mode #tab-decos .dl-set:has(.dl-seg[aria-label='Timing']),
body.photo-mode #tab-decos .dl-when,
body.photo-mode #tab-decos label:has(> input[data-fade]),
body.photo-mode .cc-content .hint,
body.photo-mode .cc-content label:has(> input[data-key='auto_emoji']),
body.photo-mode .cc-content label:has(> input[data-key='emoji_size']),
body.photo-mode .cc-content label:has(> input[data-key='emoji_y']),
body.photo-mode .inspector > .hint,
body.photo-mode .inspector > p {
  display: none;
}
/* the Style studio's caption controls: a photo has the Photo tab and the Overlays tab */
body.photo-mode .inspector > .section-title,
body.photo-mode .inspector > label.field,
body.photo-mode .inspector > .preset-actions,
body.photo-mode .inspector > .inspector-footer,
body.photo-mode .inspector .tabs [data-tab='presets'],
body.photo-mode .inspector .tabs [data-tab='type'],
body.photo-mode .inspector .tabs [data-tab='effects'],
body.photo-mode .inspector .tabs [data-tab='layout'] {
  display: none;
}

/* ----- on a phone (phonescreen.css): the preview, one row of undo / redo, the photo's tools ----- */
@media (max-width: 767.98px) {
  body.pe-on.photo-mode .pe-chip,
  body.pe-on.photo-mode .layer-ed .ov-tabs,
  body.pe-on.photo-mode #editTimeline,
  body.pe-on.photo-mode .transport #clock,
  body.pe-on.photo-mode .transport #duration,
  body.pe-on.photo-mode .transport .pe-slash,
  body.pe-on.photo-mode .transport #playBtn,
  body.pe-on.photo-mode .transport .pe-key {
    display: none;
  }
  body.pe-on.photo-mode .transport #undoBtn {
    margin-left: auto;
  }
  /* a finger-sized target everywhere in the Photo tab and the dialogs */
  .pm-chips button,
  .pm-seg button,
  .pm-btn {
    min-height: 44px;
  }
  .pm-dlg {
    margin: auto auto 0; /* a sheet from the bottom edge */
    width: 100%;
    max-width: none;
    border-radius: 18px 18px 0 0;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }
}