/* az-studio-panel.css — one panel look for every Image Studio tool.

   Before this file there were four conventions: quote used <details class="sec">
   with <summary>, collage <div class="sec"> with <h2>, edit <section class="sec">,
   and the Design tool added a fourth. Nothing was shared, so the same kind of
   control looked different depending on which tool you were standing in.

   The canonical form is quote's: one <details> per group with a <summary>
   heading. Classes are prefixed azp- so a tool can adopt this a section at a
   time without colliding with the `.sec` and `.row` rules it already has.

   Section accents are mixed from the theme's own tokens, never written as
   literals, so they follow dark mode and add nothing to the strict colour
   guard's existing list.
*/

.azp-panel{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--bg-2)}
.azp-panel h3{margin:0 0 8px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.azp-field{margin-bottom:9px;font-size:13px}
.azp-field label{display:block;margin-bottom:3px;color:var(--muted)}
.azp-field input[type=range]{width:100%}
.azp-field input[type=text],.azp-field textarea,.azp-field select{width:100%;padding:6px;
  border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text)}
.azp-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#shapeGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:5px;
  max-height:184px;overflow:auto;margin-bottom:10px}
#shapeGrid .sh{padding:3px;border:1px solid var(--border);border-radius:7px;
  background:var(--bg);cursor:pointer;line-height:0}
#shapeGrid .sh:hover{border-color:var(--accent)}
/* Collapsible panel sections. The marker is a plain +/- so the affordance is
   obvious without an icon font. */
.azp-sec{border:1px solid var(--border);border-radius:9px;margin-bottom:8px;background:var(--bg)}
.azp-sec>summary{cursor:pointer;padding:9px 11px;font-size:12px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);list-style:none;
  display:flex;align-items:center;justify-content:space-between}
.azp-sec>summary::-webkit-details-marker{display:none}
.azp-sec>summary::after{content:"+";font-size:16px;font-weight:400;color:var(--muted)}
.azp-sec[open]>summary::after{content:"\2212"}
.azp-sec[open]>summary{border-bottom:1px solid var(--border);color:var(--text)}
.azp-sec>*:not(summary){padding:0 11px}
.azp-sec>*:not(summary):last-child{padding-bottom:11px}
.azp-sec>div:first-of-type{padding-top:10px}
.azp-note{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.5}
.azp-panel button{padding:6px 10px;border:1px solid var(--border);border-radius:7px;
  background:var(--bg-2);color:var(--text);cursor:pointer;font-size:13px;margin-right:5px}
.azp-panel button:hover{border-color:var(--accent)}
/* Each section gets its own accent so the headings are tellable apart at a
   glance. Derived from the theme's own tokens with color-mix rather than
   written as literals: ten hard-coded hexes would have been ten more entries
   on the 606 the strict colour guard already lists, and they would not have
   followed dark mode. */
.azp-sec>summary{border-left:4px solid var(--border)}
.azp-c-canvas >summary{border-left-color:var(--primary);color:var(--primary)}
.azp-c-shapes >summary{border-left-color:color-mix(in srgb,var(--primary) 55%,var(--danger));
                      color:color-mix(in srgb,var(--primary) 55%,var(--danger))}
.azp-c-fill   >summary{border-left-color:var(--success);color:var(--success)}
.azp-c-photo  >summary{border-left-color:var(--warning);color:var(--warning)}
.azp-c-edges  >summary{border-left-color:color-mix(in srgb,var(--warning) 55%,var(--danger));
                      color:color-mix(in srgb,var(--warning) 55%,var(--danger))}
.azp-c-overlay>summary{border-left-color:var(--danger);color:var(--danger)}
.azp-c-size   >summary{border-left-color:color-mix(in srgb,var(--primary) 50%,var(--success));
                      color:color-mix(in srgb,var(--primary) 50%,var(--success))}
.azp-c-depth  >summary{border-left-color:color-mix(in srgb,var(--primary) 75%,var(--ink));
                      color:color-mix(in srgb,var(--primary) 75%,var(--ink))}
.azp-c-text   >summary{border-left-color:color-mix(in srgb,var(--success) 70%,var(--primary));
                      color:color-mix(in srgb,var(--success) 70%,var(--primary))}
.azp-c-export >summary{border-left-color:var(--danger);
                      color:color-mix(in srgb,var(--danger) 85%,var(--ink))}
.azp-panel{max-height:none}

/* ======================================================================
   SHARED STUDIO SKIN
   ----------------------------------------------------------------------
   Scoped with body[data-az-tool], an attribute every tool page already has,
   so these rules win over each tool's own `.sec` without any markup change.

   DELIBERATELY COSMETIC ONLY. An earlier version of this file also set
   padding, margin, border-radius and display on sections and rows. Each
   tool's rows were laid out around its own padding -- collage's are a
   88px/1fr grid -- so imposing a shared box model shuffled its panel into a
   mess. Colour, accent and affordance can be shared safely; geometry cannot.
   If a rule here changes where something sits, it does not belong here.
   ====================================================================== */

/* ---- one accent for the whole studio -------------------------------- */
body[data-az-tool]{ --az-accent: var(--primary); }

/* ---- panel container: four tools painted this four different ways ---- */
body[data-az-tool] .inspector,
body[data-az-tool] .panel,
body[data-az-tool] .insp,
body[data-az-tool] .azp-panel{ background:var(--panel); }
body[data-az-tool] .panel-tabs,
body[data-az-tool] .insp-tabs{ background:var(--panel-2); }

/* ---- section headings: colour and the open/close marker only --------- */
body[data-az-tool] .sec > h2,
body[data-az-tool] .sec > summary,
body[data-az-tool] details.group > summary{
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
}
body[data-az-tool] details.sec > summary,
body[data-az-tool] details.group > summary{ cursor:pointer; list-style:none; }
body[data-az-tool] details.sec > summary::-webkit-details-marker,
body[data-az-tool] details.group > summary::-webkit-details-marker{ display:none; }
body[data-az-tool] details.sec > summary::after,
body[data-az-tool] details.group > summary::after{
  content:"+"; float:inline-end; font-weight:400; color:var(--muted);
}
body[data-az-tool] details.sec[open] > summary::after,
body[data-az-tool] details.group[open] > summary::after{ content:"\2212"; }
body[data-az-tool] .sec > h2,
body[data-az-tool] details.sec[open] > summary,
body[data-az-tool] details.group[open] > summary{ color:var(--az-accent); }

/* ---- selection handles ----------------------------------------------
   Measured before changing: a 14px square at one corner and a 16px circle
   above, both painted in the accent with no light outline, so against a
   photograph they were invisible. Size and contrast only -- position is
   left to the tool. */
body[data-az-tool] .handle{
  width:18px; height:18px; border:2px solid var(--paper);
  box-shadow:0 1px 4px rgba(0,0,0,.45);
}
body[data-az-tool] .rothandle{
  width:20px; height:20px; border:2px solid var(--accent, var(--primary));
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
body[data-az-tool] .frame:hover,
body[data-az-tool] .textlayer:hover,
body[data-az-tool] .shapelayer:hover{
  outline:2px dashed color-mix(in srgb, var(--accent, var(--primary)) 55%, transparent);
  cursor:move;
}

/* corner handles for point editing */
body[data-az-tool] .vhandle{
  position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; background:var(--accent, var(--primary));
  border:2px solid var(--paper); box-shadow:0 1px 4px rgba(0,0,0,.4);
  cursor:grab; z-index:10; touch-action:none;
}
body[data-az-tool] .vhandle.vadd{
  width:11px; height:11px; margin:-5px 0 0 -5px;
  background:var(--paper); border:2px solid var(--accent, var(--primary)); opacity:.8;
}
body[data-az-tool] .vhandle:active{ cursor:grabbing; }