/* ---------------------------------------------------------------------
   WIGGLE APP CSS — structural layout for wiggle.html only. This is
   loaded by wiggle.html itself (inside its iframe), not by the parent
   shell — the shell doesn't need any of these rules, and this file
   doesn't need any of the shell's window/taskbar rules either.

   Purely structural/functional, no colors — skin this yourself.
   --------------------------------------------------------------------- */

*{box-sizing:border-box;}
body{margin:0;}
h2{margin:0 0 4px;}

.hidden{display:none !important;}

/* Buttons carry their own native chrome + a default focus outline drawn
   outside their border, which is what produces a "button inside a
   border" double-outline look. Reset once here, same technique used in
   the parent shell: the custom border is the only border, and focus is
   shown by thickening it instead of relying on a separate outline. */
button{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:none;
  font:inherit;
  outline:none;
  cursor:pointer;
  border:1px solid;
  padding:8px 14px;
}
button:focus-visible{border-width:2px;}
button.icon{padding:6px 10px;}
button.primary{border-width:2px;font-weight:bold;} /* the emphasized action in a group reads heavier, not just same-weight text */
button:disabled{cursor:not-allowed;}

input, select{
  font:inherit;
  border:1px solid;
  padding:6px 8px;
}

/* ---------- page header ---------- */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 0;
  border-bottom:1px solid;
  margin-bottom:20px;
}
.title{margin:0;}
.subtitle{margin:2px 0 0;}
.counter{border:1px solid;padding:6px 14px;text-align:center;min-width:80px;}

/* ---------- step panels ---------- */
.panel{border:1px solid;padding:18px;margin-bottom:20px;}
.step-num{margin-right:6px;}
.hint{margin:4px 0 14px;}

/* ---------- upload ---------- */
.seg{display:inline-flex;margin-bottom:14px;}
.seg button{border-radius:0;}
.seg button + button{border-left:none;} /* segmented control reads as one joined bar, not stacked separate boxes */
.seg button.active{border-width:2px;font-weight:bold;} /* same treatment as .primary — border/weight only, so this can never produce a legibility problem the way a background/text-color inversion can */

.drop{display:block;border:1px dashed;padding:20px;text-align:center;cursor:pointer;}
.drop input{display:none;}
.triple-inputs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.sprockets{height:10px;}

/* ---------- frame picker ---------- */
.picker-grid{display:flex;gap:2px;flex-wrap:wrap;border:1px solid;padding:2px;}
.frame-cell{flex:1 1 220px;position:relative;display:flex;flex-direction:column;border:1px solid;}
.frame-cell canvas{width:100%;display:block;touch-action:none;}
.frame-tag{position:absolute;top:6px;left:6px;z-index:2;border:1px solid;padding:1px 6px;}
.frame-coord{text-align:center;padding:6px 0;border-top:1px solid;}

.loupe{position:fixed;width:150px;height:150px;pointer-events:none;overflow:hidden;display:none;z-index:20000;border:2px solid;border-radius:50%;}
.loupe canvas{position:absolute;top:0;left:0;}

.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}

/* ---------- preview / export ---------- */
.preview-wrap{display:flex;flex-direction:column;align-items:center;}
.preview-canvas-holder{max-width:100%;border:1px solid;}
.preview-canvas-holder canvas{max-width:100%;display:block;}
.controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:12px;}
.speed{display:flex;align-items:center;gap:8px;}

.progress{height:8px;overflow:hidden;width:100%;max-width:320px;border:1px solid;margin-top:10px;}
.progress > div{height:100%;width:0%;background:currentColor;}

/* ---------- BPM sync ---------- */
.switch-row{display:flex;align-items:center;gap:8px;cursor:pointer;}

.bpm-fields{display:flex;gap:18px;flex-wrap:wrap;}
.bpm-field{display:flex;flex-direction:column;gap:5px;}
.bpm-field input{width:80px;}

.status{margin:8px 0 0;}

footer{border-top:1px solid;padding:16px 0;margin-top:10px;}