/* ══════════════════════════════════════════════════════
   Cutiora — shape-frames.css  (Shape Frames tool only)
   Class prefix sf- / ids wSf (checked unused elsewhere — lesson of the wst-del clash).
   Buttons, tabs, chips and the hint line are Sticker Maker's own classes
   (css/sticker-maker.css, sm-*), loaded by the page on purpose so both tools
   look and feel the same; the frame handles are the shared sticker handles
   (css/overlay-shared.css, wst-*). Only what is new lives here.
   ══════════════════════════════════════════════════════ */

#wSfStage { display: none; flex-direction: column; align-items: center; gap: 12px; }
#wSfChangeRow { display: flex; justify-content: center; width: 100%; }

/* ── the picture + the frames on top. Size is set by js (the photo's own
   proportions, fitted to the card); the layer is exactly as big as the photo,
   so a frame's position is a fraction of the photo (CHANGES.md item 159). ── */
#wSfWrap {
  position: relative; max-width: 100%; overflow: hidden;
  border: 3px solid #2c2c2c; border-radius: 12px; background: #fff;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  box-sizing: content-box;
}
#wSfBase { display: block; width: 100%; height: 100%; }
#wSfLayer { position: absolute; inset: 0; touch-action: pan-y; }
/* drawing: a layer like the frames — its z-index is set by js/layer-stack-engine.js (Layers order), so no
   z-index here and none on #wSfLayer (a stacking context there would stop the drawing going between frames).
   It takes the fingers only in the Draw tab (#wSfStage.sf-drawing); then the frames ignore them, so you can
   draw even where the drawing sits under a frame. */
#wSfDrawings { position: absolute; inset: 0; pointer-events: none; }
.sf-draw { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* only the ACTIVE drawing layer takes the brush (CHANGES.md item 164: several drawing layers) */
#wSfStage.sf-drawing .sf-draw.active { pointer-events: auto; touch-action: none; cursor: crosshair; }
#wSfStage.sf-drawing #wSfLayer, #wSfStage.sf-drawing #wSfLayer .wst-el { pointer-events: none; }

/* hint + Layers button on one line. Three columns [1fr | hint | 1fr]: the two side columns are equal, so the
   hint stays in the CENTRE like before (owner, item 164); the button sits in the right one. On a narrow
   phone the left column shrinks first, so the hint is only roughly centred there. */
.sf-hintrow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; width: 100%; }
.sf-hintrow .sm-hint { grid-column: 2; width: auto; text-align: center; }
.sf-hintrow .sf-layers-btn { grid-column: 3; justify-self: end; }
.sf-layers-btn {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; background: #fff; color: #2c2c2c; border: 2px solid #2c2c2c; border-radius: 20px;
  font: 800 13px 'Nunito', sans-serif; cursor: pointer; touch-action: manipulation;
}
.sf-layers-btn:hover { background: #fff8d6; }
.sf-layers-btn.active { background: #FFE566; }
/* number of layers — same red pill as the editor's Layers button (css/editor.css .w-layers-badge) */
.sf-layers-badge {
  position: absolute; top: -8px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
  border-radius: 10px; background: #e60023; color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
}
.sf-layers-panel { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 3px solid #2c2c2c; border-radius: 12px; background: #fffdf3; }
.sf-tabs-area { width: 100%; }
#wSfStage.sf-drawing #wSfUndo, #wSfStage.sf-drawing #wSfRedo { display: none; }   /* the Draw tab has its own Undo (as in Sticker Maker) */
#wSfPanelDraw .sm-opt input[type=range] { width: 110px; }
#wSfDrawColor { width: 34px; height: 34px; border: 2px solid #2c2c2c; border-radius: 8px; padding: 2px; background: #fff; cursor: pointer; }
/* a frame is selected: every finger on the picture belongs to the editor (pinch, drag) */
#wSfLayer.sf-active { touch-action: none; }

/* one frame = a shared .wst-el sticker holding the frame's own canvas. No border (an outline instead):
   the box is then exactly the frame, so screen position = download position to the pixel. */
.sf-frame, .sf-frame.selected { border: 0 !important; }
.sf-frame.selected { outline: 2px dashed #e60023; outline-offset: 0; }
.sf-frame canvas.sf-art { position: relative; z-index: 1; width: 100%; height: 100%; display: block; pointer-events: none; }
.sf-frame .wst-flip { display: none !important; }   /* flipping would mirror the photo inside too */
.sf-frame.sf-loading canvas.sf-art { animation: sfPulse 0.9s ease-in-out infinite alternate; }
@keyframes sfPulse { to { opacity: 0.45; } }

/* "Adjust photo": the frame keeps still, the handles go away, the border turns yellow */
.sf-frame.sf-adjusting { outline: 2px dashed #FFB800; cursor: move; }
.sf-frame.sf-adjusting .wst-del, .sf-frame.sf-adjusting .wst-resize, .sf-frame.sf-adjusting .wst-rotate { display: none !important; }
/* the whole photo, faint, around the shape — so you see what you are moving */
.sf-ghost { position: absolute; z-index: 0; opacity: 0.38; pointer-events: none; }

/* ── frame bar (only while a frame is selected) ── */
.sf-framebar { display: none; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.sf-framebar.show { display: flex; }
.sf-adjust { display: none; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.sf-adjust.show { display: flex; }
/* Outline panel (CHANGES.md item 171) — Sticker Maker's switch / swatches / Thickness, centred */
.sf-outline { display: none; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.sf-outline.show { display: flex; }
.sf-outline .sm-switch { margin: 0 auto; }
.sf-outline .sm-style-body { justify-content: center; margin-top: 0; }
.sf-done { background: #FFE566; }
.sm-tool:disabled { opacity: 0.4; cursor: default; }
.sm-tool:disabled:hover { background: #fff; }
.sf-ghost-opt { font-size: 12px; color: #777; }

/* ── shape library (Frames tab) ── */
/* minmax(0,1fr): equal columns that never grow past the panel. Plain 1fr lets the
   longest label ("Butterfly", "Diamond") widen its column, and on a 360px phone the
   5 columns ended up ~19px wider than the panel (right column cut off). */
.sf-shapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sf-shape {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  min-height: 92px; padding: 10px 4px 8px; background: #fff; border: 2px solid #2c2c2c; border-radius: 10px;
  font: 700 12px 'Nunito', sans-serif; color: #2c2c2c; cursor: pointer; touch-action: manipulation;
}
.sf-shape:hover { background: #fff9e0; }
.sf-shape:active { background: #FFE566; }
.sf-shape canvas { display: block; }
@media (max-width: 480px) {
  .sf-shapes { gap: 6px; }
  .sf-shape { min-height: 78px; padding: 8px 2px 6px; font-size: 11px; }
}
/* below ~400px five columns are too narrow for the names (measured: they need
   ~278px, a 360px phone gives the panel 259px) — four wider columns instead */
@media (max-width: 400px) {
  .sf-shapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* the library scrolls inside its own box (owner, CHANGES.md item 171): 2 full rows on computers,
   1.5 rows on phones so the cut-off half row says "there is more". The height is MEASURED by
   js (sizeShapesBox) — a fixed number would break when a translated name wraps onto 2 lines.
   padding: room for the buttons' :active colour and focus ring inside the scroll box. */
.sf-shapes { overflow-y: auto; padding: 2px; scrollbar-width: thin; }   /* no overscroll-behavior:contain: a finger on the grid must still scroll the page once the grid ends */
.sf-shape[hidden] { display: none; }
.sf-search {
  display: block; width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 9px 14px;
  border: 2px solid #2c2c2c; border-radius: 999px; background: #fff; color: #2c2c2c;
  font: 700 14px 'Nunito', sans-serif;
}
.sf-search:focus { outline: none; border-color: #e60023; box-shadow: 0 0 0 3px rgba(230, 0, 35, .15); }
.sf-noshape { margin: 6px 0 0; text-align: center; font: 700 13px 'Nunito', sans-serif; color: #777; }

/* while a photo opens nothing else can be pressed */
#wSfStage.sf-locked #wSfWrap, #wSfStage.sf-locked .sf-framebar, #wSfStage.sf-locked .sm-panel { pointer-events: none; }