/* Local photo guidance, color assistance, A/B comparison and saved photo projects. */
body[data-screen='welcome'] #qualityCard { display: none; }
.quality-card {
  margin: 0 0 14px;
  padding: 0 14px;
  border: 1px solid #fff;
  border-radius: 16px;
  background: #ffffffae;
  color: var(--muted);
  box-shadow: 0 3px 13px #7844a509;
}
.quality-card summary,
.similar-shades summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  color: #654581;
}
.quality-card summary::-webkit-details-marker,
.similar-shades summary::-webkit-details-marker { display: none; }
.quality-card summary::after,
.similar-shades summary::after { content: '+'; font-size: 21px; font-weight: 400; flex-shrink: 0; }
.quality-card[open] summary::after,
.similar-shades[open] summary::after { content: '−'; }
.quality-card ul { margin: 3px 0 8px; padding-left: 20px; font-size: 14px; line-height: 1.65; }
.quality-card li + li { margin-top: 5px; }
.quality-card .quiet-button { margin: 0 0 8px; color: #7434b9; background: #eee1ff90; }
.shade-tools {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin: 13px 0 4px;
}
.shade-tools button {
  min-height: 44px;
  padding: 10px 7px;
  border: 1px solid #fff;
  border-radius: 13px;
  background: #ffffffb8;
  color: #674788;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 3px 10px #673e9409;
}
.shade-tools button:hover { background: #f8edff; border-color: #decaef; }
.similar-shades { margin: 7px 0 0; border-bottom: 1px solid var(--line); }
.similar-shades summary { padding: 8px 2px; }
.similar-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px 6px; padding: 10px 3px 15px; }
.similar-grid button { min-width: 0; min-height: 72px; font-size: 11px; }
body[data-screen] .similar-grid .color-card { min-height: 83px; }
body[data-screen] .similar-grid .color-card i { width: 36px; height: 44px; }
body[data-screen] .similar-grid .color-card span { font-size: 11px; }
body[data-screen] #compareColors { min-height: 44px; margin-top: 15px; padding: 10px 12px; font-size: 14px; background: #efe4ffac; border-color: #fff; }
body[data-screen] #compareColors[aria-pressed='true'] { border-color: #cba5ee; background: #e9d9ff; color: #622bb2; }
#compareColors + .search { margin-top: 15px; }
.comparison-bar {
  position: relative;
  margin-top: 10px;
  padding: 8px 11px 11px;
  border: 1px solid #d9bdec;
  border-radius: 16px;
  background: linear-gradient(130deg,#fff0fbcc,#ece4ffdc);
  box-shadow: inset 0 1px 0 #fff;
}
.comparison-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.comparison-heading > span { font-size: 14px; font-weight: 650; color: #5e3882; }
.comparison-heading button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  font-size: 23px;
  color: #694389;
}
.comparison-heading button:hover { background: #ffffff9c; }
.comparison-modes { display: grid; grid-template-columns: minmax(0,1fr) 65px minmax(0,1fr); gap: 6px; }
.comparison-modes button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 8px;
  border: 1px solid #ffffffcb;
  border-radius: 11px;
  font-size: 14px;
  color: #694786;
  background: #ffffff79;
}
.comparison-modes button.active,
.comparison-modes button[aria-pressed='true'] { color: #6830b9; background: #fff; border-color: #ca9eea; box-shadow: 0 2px 8px #7c3c9e0d; font-weight: 650; }
.comparison-modes i { display: block; width: 18px; height: 22px; border-radius: 8px 8px 6px 6px; flex-shrink: 0; border: 1px solid #ffffffa0; box-shadow: inset 0 0 0 1px #54217912; }
.comparison-modes button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; min-width: 0; }
#splitControl { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 12px; min-height: 44px; margin-top: 3px; font-size: 14px; color: #684b82; }
#splitPosition { min-width: 0; width: 100%; min-height: 44px; margin: 0; }
.comparison-bar > p { margin: 0; font-size: 12px; line-height: 1.5; color: #6a527f; }
.project-state { margin: 7px 2px 0; font-size: 11px; line-height: 1.4; color: #6e5486; text-align: center; }
.project-state:empty, #projectsStatus:empty, .offline-status:empty { display: none; }
.project-grid { margin: 0 0 22px; }
.project-card { transition: border-color .15s; }
.project-card:hover { border-color: #c9a3e7; }
.project-card > button:first-child { min-height: 44px; }
.project-card img { aspect-ratio: 4 / 3; }
body[data-screen] .project-card strong { font-size: 14px; line-height: 1.45; margin-top: 11px; overflow-wrap: anywhere; }
body[data-screen] .project-card small { font-size: 11px; line-height: 1.5; }
body[data-screen] .project-card .delete-saved { width: 44px; height: 44px; font-size: 22px; border: 1px solid #fff; box-shadow: 0 3px 10px #34175312; }
#paletteHeading { margin: 24px 0 15px; font-size: 19px; letter-spacing: -.3px; }
.project-title-label { display: block; font-size: 14px; font-weight: 600; color: #654780; margin: 7px 0 18px; }
#projectTitle {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #d8c0ee;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
}
body[data-screen] #saveProjectDialog .primary,
body[data-screen] #saveProjectDialog .secondary,
body[data-screen] #deleteProjectDialog .primary,
body[data-screen] #deleteProjectDialog .secondary { min-height: 48px; font-size: 14px; }
#deleteProjectName { overflow-wrap: anywhere; font-weight: 650; }
#deleteProjectDialog h2 { padding-right: 15px; }
body[data-screen] .welcome-actions #resumeLatest { min-height: 48px; font-size: 14px; border-color: #dcc0ef; background: linear-gradient(120deg,#f8eaffb8,#e9e1ffd1); }
body[data-screen] .welcome-copy .welcome-privacy { font-size: 12px; min-height: 44px; }
body[data-screen] .welcome-copy .offline-status { font-size: 11px; line-height: 1.5; color: #6c617e; margin: 1px auto 0; max-width: 330px; }
@media(max-width:1050px) and (min-width:701px) {
  .similar-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .comparison-modes { grid-template-columns: minmax(0,1fr) 54px minmax(0,1fr); }
  .comparison-modes button { padding: 8px 5px; }
  .comparison-modes button > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}
@media(max-width:700px) {
  .quality-card { margin-bottom: 10px; padding: 0 11px; border-radius: 14px; }
  .quality-card summary { font-size: 14px; }
  .quality-card ul { font-size: 14px; }
  .shade-tools { gap: 7px; margin-top: 12px; }
  .shade-tools button { min-height: 44px; font-size: 14px; padding: 10px 6px; border-radius: 12px; }
  .similar-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px 9px; }
  body[data-screen] .similar-grid .color-card { min-height: 83px; }
  body[data-screen] .similar-grid .color-card i { width: 39px; height: 47px; }
  body[data-screen='editor'].comparing .photo-stage > canvas,
  body[data-screen='editor'].comparing .photo-stage #overlay { max-height: 16dvh; }
  body[data-screen='editor'].comparing .photo-stage { min-height: 102px; }
  body[data-screen='editor'].comparing .stage-caption { padding: 5px 8px; }
  body[data-screen='editor'].comparing .stage-caption span { display: none; }
  body[data-screen='editor'].comparing .stage-caption strong { font-size: 17px; }
  body[data-screen='editor'].comparing .compare { min-height: 44px; font-size: 11px; padding: 8px; }
  .comparison-bar { margin-top: 7px; padding: 7px 8px 8px; border-radius: 13px; }
  .comparison-heading { position: absolute; right: 5px; top: 7px; }
  .comparison-heading > span { display: none; }
  .comparison-heading button { width: 44px; height: 44px; }
  .comparison-modes { grid-template-columns: minmax(0,1fr) 56px minmax(0,1fr); margin-right: 45px; gap: 5px; }
  .comparison-modes button { min-height: 44px; padding: 7px 5px; gap: 5px; font-size: 14px; }
  .comparison-modes button > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .comparison-modes i { width: 17px; height: 22px; }
  #splitControl { margin-top: 1px; font-size: 14px; gap: 10px; min-height: 44px; }
  #splitPosition { min-height: 44px; }
  .comparison-bar > p { font-size: 11px; line-height: 1.4; }
  .project-state { font-size: 11px; margin-top: 5px; }
  body[data-screen] .project-card strong { font-size: 14px; margin-left: 10px; margin-right: 10px; }
  body[data-screen] .project-card small { font-size: 11px; margin-left: 10px; margin-right: 10px; }
  body[data-screen] .welcome-actions #resumeLatest { min-height: 48px; font-size: 14px; }
}
@media(max-width:700px) and (max-height:700px) {
  body[data-screen='editor'].comparing .photo-stage > canvas,
  body[data-screen='editor'].comparing .photo-stage #overlay { max-height: 15dvh; }
  body[data-screen='editor'].comparing .photo-stage { min-height: 92px; }
  .comparison-bar > p { display: none; }
}
@media(prefers-reduced-transparency:reduce) {
  .quality-card, .shade-tools button, .comparison-bar { background: #f7f2ff; }
  .comparison-modes button { background: #f3e9fb; }
  .comparison-modes button.active { background: #fff; }
}