/* Apparel page (UI-13): the polo on its stage with each spot's artwork drawn over it, the close-up of the spot being
   edited, the spot list and the size run. The layout, panel, bar, cart and footer come from style.css. */

/* The stage: the polo photo (a square render) with a canvas of the same size over it for the artwork and the dashed
   edge of the spot being edited. The photo has room above and below the polo, so it's shown a little larger than the
   stage and clipped. */
.look-a .app-studio { overflow: hidden; container-type: size; }
.look-a .app-view { position: absolute; left: 0; right: 0; top: -3cqh; margin: 0 auto; width: min(100cqw, 99cqh); aspect-ratio: 1; }
.look-a .app-view img, .look-a .app-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Marks on the stage, on white pills: what the dashed line is (top left) and the sides (top right). */
.look-a .stage-chip {
  position: absolute; top: 20px; left: 20px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px;
  background: rgba(255, 255, 255, 0.82); border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.look-a .view-seg { position: absolute; top: 16px; right: 16px; z-index: 1; display: flex; gap: 2px; padding: 4px; background: rgba(18, 52, 42, 0.06); border-radius: 999px; }
.look-a .view-seg[hidden] { display: none; }
.look-a .view-seg button { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; }
.look-a .view-seg button:hover { color: var(--ink); }
.look-a .view-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04); }
.look-a .app-studio .studio-status { z-index: 1; }

/* The close-up: the spot being edited, larger, whichever side of the polo it's on. */
.look-a .closeup {
  position: absolute; left: 20px; bottom: 20px; z-index: 1; margin: 0;
  width: 132px; padding: 6px 6px 8px; background: var(--surface); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(18, 52, 42, 0.08), 0 8px 24px rgba(18, 52, 42, 0.08);
}
.look-a .closeup canvas { display: block; width: 120px; height: 120px; border-radius: 14px; background: var(--stage); }
.look-a .closeup figcaption { margin-top: 6px; padding: 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; }

/* Spots: one row per spot, with its own picture, what's on it, and a switch. The row being edited is edged in Forest. */
.look-a .spots { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.look-a .spot { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius-m); }
.look-a .spot.is-editing { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.look-a .spot-pick {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 9px 10px;
  background: transparent; border: 0; border-radius: var(--radius-m); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.look-a .spot-thumb { flex-shrink: 0; width: 60px; height: 60px; border-radius: 10px; background: var(--stage); }
.look-a .spot-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.look-a .spot-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.look-a .spot-what { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look-a .spot-editing { flex-shrink: 0; margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; visibility: hidden; }
.look-a .spot.is-editing .spot-editing { visibility: visible; }

.look-a .switch {
  flex-shrink: 0; width: 46px; height: 28px; margin: 0 14px 0 4px; padding: 2px;
  display: flex; align-items: center; background: var(--surface); border: 1.5px solid var(--control-line); border-radius: 999px; cursor: pointer;
}
.look-a .switch-knob {
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  background: var(--control-line); border-radius: 50%; color: transparent; transition: transform 0.18s ease;
}
.look-a .switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.look-a .switch[aria-checked="true"] .switch-knob { transform: translateX(18px); background: var(--on-dark); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .look-a .switch-knob { transition: none; } }

/* The artwork editor below the spots belongs to the spot being edited. */
.look-a .spot-heading { margin-top: 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }

/* Logo size: a slider with its value beside the label (as on the hat and tumbler pages). */
.look-a .size-head { display: flex; justify-content: space-between; align-items: baseline; }
.look-a .size-head output { font-size: 14px; font-weight: 600; color: var(--muted); }
.look-a .size-field input[type="range"] { width: 100%; height: 28px; margin: 0; accent-color: var(--accent); }

/* The size run: one strip, a cell per size to type into, and the total at the end. */
.look-a .size-run {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.3fr);
  background: var(--surface); border: 1px solid var(--control-line); border-radius: var(--radius-m); overflow: hidden;
}
.look-a .size-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-left: 1px solid var(--field-line); cursor: text; }
.look-a .size-cell:first-child { border-left: 0; }
.look-a .size-name { font-size: 13px; font-weight: 600; color: var(--muted); }
/* (as specific as the shared field style, which would otherwise box each number) */
.look-a .size-run input[type="text"] {
  width: 100%; height: 34px; padding: 0; background: transparent; border: 0; border-radius: 0; color: var(--ink); text-align: center;
  font-family: inherit; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.look-a .size-run input[type="text"]:focus { outline: none; }
.look-a .size-run .is-zero input[type="text"] { color: var(--muted); font-weight: 500; }
.look-a .size-cell:focus-within { background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent); }
.look-a .size-total { background: var(--fill); cursor: default; }
.look-a .size-total output { display: flex; align-items: center; height: 34px; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* The footer follows the designer here, clear of the floating bar. */
.look-a.app .page { padding-bottom: 0; }
.look-a.app .footer { padding-bottom: 112px; }

/* Review bar: a divider before this page's own views (review only). */
.look-a.app .review-switch .review-sep { width: 1px; margin: 6px 4px; background: rgba(255, 255, 255, 0.28); }