/* fetch-1206: the looks editor (Clients, third segment). Tokens only - no raw colour, no pixel type.
   The client preview is NOT styled here: it is a frame that carries myevent.html's own stylesheet. */
.lke-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin: var(--s-3) 0; }
.lke-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.lke-row--start { justify-content: flex-start; }
.lke-seg { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
.lke-inline { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sub); color: var(--ink); }
.lke-label { display: block; font-size: var(--t-sub); color: var(--muted); margin-bottom: var(--s-1); }
.lke-toggle { min-height: var(--control-height-touch); font-size: var(--t-body); }

.lke-included p { margin: var(--s-1) 0 0; }
.lke-looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.lke-look { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.lke-look--off { opacity: .72; }
.lke-look-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--wash); }
.lke-look-body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); }
.lke-look-body h3, .lke-slot h3, .lke-picker h3 { margin: 0; font-size: var(--t-section); }
.lke-look-body p { margin: 0; }

.lke-slot { margin-top: var(--s-3); }
.lke-pieces, .lke-parts { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.lke-piece, .lke-part { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--hair); }
.lke-part { grid-template-columns: auto 1fr auto auto; }
/* fetch-1213: the reorder handle is the survey editor's (.qdrag, .qrow-over in portal.css); what is added is the finger and the "drops after" line */
.lke-drag { touch-action: none; }
.lke-part.cse-dragging { opacity: .45; }
.lke-part--after { background: var(--wash); box-shadow: inset 0 -2px 0 var(--gold); }
@media (pointer: coarse) { .lke-drag { display: inline-grid; place-items: center; min-width: var(--control-height-touch); min-height: var(--control-height-touch); } }
.lke-piece:first-child, .lke-part:first-child { border-top: 0; }
.lke-piece--off .lke-piece-name b { color: var(--muted); }
.lke-piece-price { font-size: var(--t-sub); font-variant-numeric: tabular-nums; text-align: right; }
.lke-thumb { width: 40px; height: 40px; border-radius: var(--r-s); object-fit: cover; background: var(--wash); border: 1px solid var(--line); display: inline-block; flex: none; }
.lke-thumb--swatch { border-radius: 50%; }

.lke-form { margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); }
/* fetch-1220: a form's two halves. Here they are the same single column the form always was (same gap, same order); the desktop block at the foot sets them side by side */
.lke-cols, .lke-col { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.lke-form h2 { margin: 0; font-size: var(--t-title); }
.lke-hero { width: 180px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-m); background: var(--wash); border: 1px solid var(--line); }
.lke-hero--none { display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-sub); color: var(--muted); }
.lke-shots { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.lke-shot { display: inline-flex; flex-direction: column; gap: var(--s-1); align-items: center; }
.lke-shot img { width: 120px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--line); }

.lke-picker { background: var(--wash); display: flex; flex-direction: column; gap: var(--s-3); }
/* fetch-1220: a photo group's name can be longer than a phone is wide, and a select is as wide as its longest option - found at 390px, where Photo group ran off the screen.
   The label's cap is what Chromium needs (probe1220 P2); the select's own is the belt for a browser that will not shrink one without it */
.lke-picker .lke-inline { min-width: 0; max-width: 100%; }
.lke-picker .lke-inline .sel { min-width: 0; max-width: 100%; flex: 0 1 auto; }
.lke-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-2); }
.lke-photo { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-1); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-card); cursor: pointer; text-align: left; font: inherit; }
.lke-photo:hover, .lke-photo:focus-visible { border-color: var(--gold); }
.lke-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-s); }
.lke-photo span { font-size: var(--t-label); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* fetch-1221: Your uploads. The file input is kept IN the page (a label is its face) so the keyboard still reaches it; the ring is drawn on the label */
.lke-upload { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px dashed var(--line); border-radius: var(--r-m); background: var(--surface-card); }
.lke-upload .field { flex: 1 1 16rem; min-width: 0; margin: 0; }
.lke-upload .muted { flex: 1 1 16rem; min-width: 0; }
.lke-upload .notice { flex-basis: 100%; }
.lke-upload-preview { width: 120px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--wash); }
.lke-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.lke-file:focus-visible + .btn { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lke-file:disabled + .btn { opacity: .6; cursor: default; }
.lke-photo-cell { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.lke-photo[disabled] { opacity: .6; cursor: default; }

.lke-preview-bar { margin-top: var(--s-3); }
.lke-preview-bar p { margin: var(--s-1) 0 0; }
.lke-frame { display: block; width: 100%; height: 82vh; min-height: 560px; margin-top: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface-card); }

@media (max-width: 640px) {
  /* fetch-1221, line L (Jack 2026-09-21: yes). fetch-1206 let the price span columns 2 to the end, so Edit auto-placed ALONE on a third line of
     every piece - 59 pieces were about 9,650px of scrolling. Now the row is two lines: the picture and Edit stand beside the name and its price,
     which is what the desktop block below already does from 1100px. */
  .lke-piece { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0; }
  .lke-piece > .lke-thumb, .lke-piece > .lke-zoom-door { grid-column: 1; grid-row: 1 / span 2; }
  .lke-piece-name { grid-column: 2; grid-row: 1; }
  .lke-piece-price { grid-column: 2; grid-row: 2; text-align: left; }
  .lke-piece > .btn { grid-column: 3; grid-row: 1 / span 2; }
  /* fetch-1221, line M (Jack 2026-09-21, from four mock-ups: "one across, 4 a screen", with "clear designations between photos"). The picker's grid is 278px wide
     at 390px, two 140px tiles and their gap need 288px, so fetch-1206 drew ONE tall photograph a row - three to a screen, ten screens to a page of thirty. Now
     each photograph is a wide band in its own card with its name in reading type: four whole ones to a screen. A ROOM survives the band; a PRODUCT shot (a round
     charger) would be a strip of plate, so when the photograph is a piece's the whole picture is shown inside the band instead of being cropped to it. */
  .lke-photo-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .lke-photo { padding: var(--s-2); border-width: 2px; }
  .lke-photo img { aspect-ratio: 21 / 9; }
  .lke-photo-grid--whole .lke-photo img { object-fit: contain; background: var(--wash); }
  .lke-photo span { font-size: var(--t-sub); color: var(--ink); }
  .lke-part { grid-template-columns: auto 1fr; }
  .lke-part > .lke-inline, .lke-part > .actions { grid-column: 2; }
  .lke-zoom { padding: var(--s-3); } /* fetch-1232: the overlay hugs the screen */
}

/* fetch-1220 (Jack 2026-09-21: "i would like to use more of the page space in Client looks"). On a desktop the catalog read DOWN the page -
   59 pieces, one to a line, a name at one edge and its price at the other - and every form was one column stretched the width of the
   screen. From 1100px: the pieces read ACROSS (as many columns as fit, the price under the name), a form is two columns - what it is
   beside what it is made of, the photograph picker across both - and the client's page gets a frame the height of the screen.
   Nothing under 1100px is touched: the phone's layout is the rules above, unchanged. */
@media (min-width: 1100px) {
  .lke-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); column-gap: var(--s-5); }
  .lke-piece, .lke-piece:first-child { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0; border-top: 1px solid var(--hair); }
  .lke-piece > .lke-thumb, .lke-piece > .lke-zoom-door { grid-column: 1; grid-row: 1 / span 2; }
  .lke-piece-name { grid-column: 2; grid-row: 1; }
  .lke-piece-price { grid-column: 2; grid-row: 2; text-align: left; }
  .lke-piece > .btn { grid-column: 3; grid-row: 1 / span 2; }

  .lke-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-6); row-gap: var(--s-3); }
  .lke-cols--item { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .lke-col--a { grid-column: 1; grid-row: 1; }
  .lke-col--b { grid-column: 2; grid-row: 1; padding-left: var(--s-6); border-left: 1px solid var(--hair); }
  .lke-cols > .lke-picker { grid-column: 1 / -1; grid-row: 2; }
  .lke-col--a .lke-hero { width: min(100%, 20rem); }
  .lke-cols--item .lke-col--b .lke-thumb { width: 7.5rem; height: 7.5rem; }
  .lke-cols--item .lke-col--b .lke-zoom-door > .lke-thumb { width: 7.5rem; height: 7.5rem; }
  .lke-measure { max-width: 64rem; }

  .lke-frame { height: calc(100vh - 6rem); }
}
/* fetch-1224: every Edit door is the crystal edit glyph - a square button, the words in aria-label + title; a 44px target on a phone */
.lke-edit { display: inline-flex; align-items: center; justify-content: center; padding: 4px; min-width: 2rem; min-height: 2rem; }
@media (max-width: 640px), (pointer: coarse) { .lke-edit { min-width: var(--control-height-touch); min-height: var(--control-height-touch); } }

/* fetch-1232, line R (Jack 2026-09-21: "in the manager portal we should be able to click each photo to enlarge it in a temporal UX"). Every photograph
   on Client looks is a door (.lke-zoom-door wraps the picture it always drew, so the picture's own class and size hold); the picker's tiles are PICKS,
   so there the door is a magnifier over the picture's corner. The overlay is the client page's .lk-zoom (event-looks.css, which this shell does not
   load) drawn with the portal's tokens; z-index 600 is the top-overlay tier (portal.css, fetch-431). Tap the backdrop, Close or Esc: it is gone. */
.lke-zoom-door { display: inline-flex; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; border-radius: var(--r-s); vertical-align: top; }
.lke-zoom-door > img { display: block; }
.lke-zoom-door:hover > img { border-color: var(--gold); }
.lke-zoom-door:focus-visible, .lke-zoom:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lke-look > .lke-zoom-door { display: block; width: 100%; border-radius: 0; }
.lke-photo-cell { position: relative; }
.lke-zoom-btn { position: absolute; top: var(--s-2); right: var(--s-2); display: inline-flex; align-items: center; justify-content: center; padding: 4px; min-width: 2rem; min-height: 2rem; background: var(--surface-card); opacity: .92; }
.lke-zoom-btn:hover, .lke-zoom-btn:focus-visible { opacity: 1; border-color: var(--gold); }
@media (max-width: 640px), (pointer: coarse) { .lke-zoom-btn { min-width: var(--control-height-touch); min-height: var(--control-height-touch); } } /* a finger's target, after the base rule so it wins */
.lke-zoom { position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; padding: var(--s-5); background: rgba(20, 33, 61, .58); overscroll-behavior: contain; cursor: zoom-out; }
.lke-zoom-box { margin: 0; display: flex; flex-direction: column; max-width: min(60rem, 100%); max-height: 100%; background: var(--paper); border-radius: var(--r-l); overflow: hidden; box-shadow: 0 16px 48px rgba(36, 43, 66, .32); cursor: default; }
.lke-zoom-box > img { display: block; max-width: 100%; max-height: calc(100vh - 9.5rem); min-height: 0; object-fit: contain; background: var(--wash); }
.lke-zoom-box figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); }
.lke-zoom-box figcaption > span { min-width: 0; }
.lke-zoom-kicker { display: block; font-size: var(--t-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.3; }
.lke-zoom-name { display: block; font-weight: 600; line-height: 1.3; }
.lke-zoom-from { display: block; font-size: var(--t-sub); color: var(--muted); line-height: 1.35; }