/* Photo Palette Extractor — palette.css (tool-specific) */

/* Eyedropper mode */
.result.picking .photo-frame img { cursor: crosshair; }

/* Result: photo + palette, 4 positions.
   Strip outer edges align exactly with the photo edge (same width for
   top/bottom, same height for left/right). One uniform gap everywhere:
   between swatches AND between photo and strip.
   The image always keeps its aspect ratio — it defines the layout size,
   the palette stretches to match it. */
.result {
  display: flex; gap: 8px;
  width: fit-content; max-width: 100%;
  margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow);
}
.result[data-pos="bottom"] { flex-direction: column; }
.result[data-pos="top"]    { flex-direction: column-reverse; }
.result[data-pos="right"]  { flex-direction: row; }
.result[data-pos="left"]   { flex-direction: row-reverse; }

/* img is a direct flex item; align-self keeps it at intrinsic ratio
   (never stretched by the palette), while the palette stretches to it */
.photo-frame { display: contents; }
.photo-frame img {
  max-width: 100%; max-height: 62vh;
  border-radius: 0; display: block;
  align-self: flex-start;
  min-width: 0;
}

/* contain:size — the palette must NEVER influence the card's size
   (many picked colors would otherwise widen it past the photo);
   the photo defines the size, the palette stretches to match */
.palette { display: flex; gap: 8px; overflow: hidden; contain: size; }
.result[data-pos="bottom"] .palette,
.result[data-pos="top"] .palette { flex-direction: row; height: 88px; }
.result[data-pos="left"] .palette,
.result[data-pos="right"] .palette { flex-direction: column; width: 120px; flex-shrink: 0; }

.swatch {
  flex: 1 1 0; min-width: 0; min-height: 0;
  border-radius: 0; border: none; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 8px; position: relative;
}
.palette.hide-codes code { display: none; }
.swatch:hover code { background: rgba(0, 0, 0, .6); }
.swatch code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 600;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(0, 0, 0, .35); color: #fff;
  transition: background .12s;
}
.swatch.light code { background: rgba(255, 255, 255, .55); color: #111; }
.swatch.light:hover code { background: rgba(255, 255, 255, .8); }

/* Library */
.library { padding: 24px 0 56px; border-top: 1px solid var(--border); }
.library-head h2 { margin: 0 0 4px; }
.library-head { margin-bottom: 20px; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.library-empty { text-align: center; padding: 24px 0; }

.lib-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow);
}
.lib-card .lib-swatches { display: flex; height: 56px; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.lib-card .lib-swatches button { flex: 1; border: none; cursor: pointer; }
.lib-card .lib-name { font-weight: 600; font-size: 14px; margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-card .lib-date { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; }
.lib-card .lib-actions { display: flex; gap: 8px; }
.lib-card .lib-actions .btn { padding: 5px 10px; font-size: 12px; }

/* Mobile (palette-specific) */
@media (max-width: 640px) {
  .result[data-pos="left"] .palette,
  .result[data-pos="right"] .palette { width: 64px; }
  .result[data-pos="bottom"] .palette,
  .result[data-pos="top"] .palette { height: 60px; }
  .palette { gap: 5px; }
  .result { gap: 5px; }
  .swatch code { font-size: 10px; padding: 2px 5px; }
}

/* Dev export (CSS / SCSS / Tailwind / JSON) */
.dev-export { display: flex; gap: 8px; }
.dev-export select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.dev-export select:focus { outline: none; border-color: var(--accent); }