/* HuHaHo Admin — Visual Crop Tool dialog (Agent B, Phase 2).
 *
 * Companion to crop.js. Vanilla CSS, no build step, no dependencies.
 * Expects the panel tokens + button classes from styles.css
 * (--cream/--ink/--muted/--green/--green-tint/--gold/--line/--white/
 *  --danger/--danger-tint/--radius/--shadow, .btn/.btn-primary/
 *  .btn-ghost/.btn-danger/.btn-sm).
 *
 * The preview frame reuses the Wall of Fame medal transform SEMANTICS
 * verbatim (see .wof-medal img in styles.css), parameterized by
 * --crop-fx / --crop-fy / --crop-z — only the frame shape differs:
 * rectangular with gold-hairline borders here, circular there.
 *
 * NOTE on --crop-z units: inside this dialog --crop-z is a PERCENT
 * (100-250, WoF-style: the CSS divides by 100). The §3 contract helper
 * cssVarsFor() in crop.js emits --crop-z as a unitless scale factor for
 * builders — see the header of crop.js before consuming either.
 */

/* ---------- Backdrop + dialog ---------- */
.hh-crop-back{
  position:fixed; inset:0; z-index:150;
  background:rgba(20,30,24,.55);
  display:flex; align-items:flex-start; justify-content:center;
  padding:40px 16px; overflow:auto;
}
.hh-crop-dialog{
  background:var(--white,#fff); border-radius:18px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
  width:100%; max-width:720px; padding:26px 28px;
}
.hh-crop-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:4px; }
.hh-crop-head h2{ font-size:23px; margin:0; flex:1 1 auto; }
.hh-crop-ratio{
  flex:0 0 auto; font-size:11.5px; font-weight:600;
  background:var(--green-tint,#e9f0ea); color:#356b45;
  border-radius:999px; padding:3px 10px; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.hh-crop-x{
  flex:0 0 auto; width:32px; height:32px; padding:0;
  border-radius:50%; border:1px solid var(--line,#e7e0d3);
  background:transparent; color:var(--muted,#7c786e);
  font-size:16px; line-height:1;
}
.hh-crop-x:hover{ background:var(--cream-2,#f4eddf); color:var(--ink,#2b2b28); }
.hh-crop-sub{ color:var(--muted,#7c786e); font-size:13px; margin:0 0 14px; }

/* Ratio switcher (only when the context holds several ratios and the
   caller did not pin one — lets one dialog cover desktop+mobile). */
.hh-crop-switch{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.hh-crop-switch button{
  border:1px solid var(--line,#e7e0d3); background:transparent;
  border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:600;
  color:var(--ink,#2b2b28); font-variant-numeric:tabular-nums;
}
.hh-crop-switch button[aria-pressed="true"]{
  background:var(--green,#4f7d5c); border-color:var(--green,#4f7d5c); color:#fff;
}

/* ---------- Dark stage + fixed-ratio rectangular frame ---------- */
.hh-crop-stage{
  position:relative; background:#0b1611; border-radius:16px; padding:14px 8px;
}
.hh-crop-frame{
  --crop-ar-w:4; --crop-ar-h:3;
  position:relative; overflow:hidden; background:#0e1d16;
  border:1px solid rgba(233,200,125,.55);            /* thin gold hairline */
  box-shadow:0 0 0 7px rgba(201,154,71,.14);          /* translucent outer ring */
  aspect-ratio:var(--crop-ar-w) / var(--crop-ar-h);
  width:min(100%, calc(46vh * var(--crop-ar-w) / var(--crop-ar-h)));
  margin:0 auto; touch-action:none; cursor:grab;
}
.hh-crop-frame:active{ cursor:grabbing; }
.hh-crop-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* WOF_CSS medal transform, verbatim, parameterized by --crop-fx/fy/z:
     translate decoupled from scale, transform-origin at the focal point,
     so pan works at every zoom including 100. */
  transform:translate(calc((50% - var(--crop-fx,50%)) * 0.2 / (var(--crop-z,100) / 100)), calc((50% - var(--crop-fy,50%)) * 0.2 / (var(--crop-z,100) / 100))) scale(calc(var(--crop-z,100) / 100));
  transform-origin:var(--crop-fx,50%) var(--crop-fy,50%);
  -webkit-user-drag:none; user-select:none; -webkit-user-select:none;
}
.hh-crop-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(243,233,210,.6); font-size:13px; text-align:center; padding:12px;
}
/* Rule-of-thirds composition grid over the frame (overlay only — never
   exported, never affects the saved crop). */
.hh-crop-grid{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to right, transparent calc(33.333% - .5px), rgba(255,255,255,.38) calc(33.333% - .5px), rgba(255,255,255,.38) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(to right, transparent calc(66.666% - .5px), rgba(255,255,255,.38) calc(66.666% - .5px), rgba(255,255,255,.38) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(to bottom, transparent calc(33.333% - .5px), rgba(255,255,255,.38) calc(33.333% - .5px), rgba(255,255,255,.38) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(to bottom, transparent calc(66.666% - .5px), rgba(255,255,255,.38) calc(66.666% - .5px), rgba(255,255,255,.38) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}
/* Corner zoom handle: lives on the stage (outside the clipped frame)
   so it stays grabbable at every ratio. */
.hh-crop-handle{
  position:absolute; right:6px; bottom:6px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center; padding:0;
  border-radius:50%; border:1px solid rgba(201,154,71,.55);
  background:rgba(11,18,13,.8); color:#e9c87d; font-size:14px; line-height:1;
  cursor:nwse-resize; touch-action:none; z-index:3;
  transition:background .2s ease, color .2s ease;
}
.hh-crop-handle:hover{ background:var(--gold,#c99a47); color:#241a06; }

/* ---------- Readout + sliders ---------- */
.hh-crop-readout{
  margin-top:10px; font-size:12.5px; color:var(--muted,#7c786e);
  font-variant-numeric:tabular-nums; text-align:center;
}
.hh-crop-readout b{ color:var(--ink,#2b2b28); }
.hh-crop-rows{ margin-top:10px; }
.hh-crop-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.hh-crop-row label{
  flex:0 0 auto; margin:0; font-size:10.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted,#7c786e);
  min-width:52px;
}
.hh-crop-row input[type=range]{
  flex:1 1 auto; width:auto; min-height:0; padding:0;
  border:0; background:transparent; box-shadow:none;
  accent-color:var(--green,#4f7d5c);
}
.hh-crop-row input[type=range]:focus{ box-shadow:none; }
.hh-crop-row output{
  flex:0 0 32px; text-align:right; font-size:12px; color:var(--muted,#7c786e);
  font-variant-numeric:tabular-nums;
}
.hh-crop-hint{ font-size:12px; color:var(--muted,#7c786e); margin:8px 0 0; }
.hh-crop-error{
  font-size:13px; color:var(--danger,#c0563f); font-weight:600;
  background:var(--danger-tint,#f7e9e5); border-radius:10px;
  padding:8px 12px; margin:10px 0 0;
}
.hh-crop-error[hidden]{ display:none; }

/* ---------- Footer ---------- */
.hh-crop-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:22px; flex-wrap:wrap; }
.hh-crop-foot .spacer{ flex:1 1 auto; }

/* ---------- Preview click-target affordance (attachPreview) ---------- */
.hh-crop-attached{ position:relative; cursor:zoom-in; }
.hh-crop-attached:focus-visible{ outline:2px solid var(--green,#4f7d5c); outline-offset:2px; }
.hh-crop-badge{
  position:absolute; left:6px; bottom:6px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px;
  background:rgba(16,34,26,.82); color:#f3e9d2;
  border:1px solid rgba(201,154,71,.55); border-radius:50%;
  pointer-events:none; white-space:nowrap;
}
.hh-crop-badge svg{ width:13px; height:13px; flex:0 0 auto; }
.hh-crop-attached:hover .hh-crop-badge,
.hh-crop-attached:focus-visible .hh-crop-badge{ background:var(--gold,#c99a47); color:#241a06; }