/* Guest CSV import modal — page-scoped styles, owned by the Guests agent.
   The modal may render outside [data-view="guests"], so scope every rule under
   a dedicated root class (e.g. .gimport) rather than the view attribute.
   Shared primitives live in planner/planner.css and are READ-ONLY from here.

   The one decision here: on a phone, drag-and-drop does not exist. The picker
   is the primary control at every width and the drop zone is the label for it,
   so the whole box is one tap target rather than a hint next to a small button.
   ─────────────────────────────────────────────────────────────────────── */

.gimport .gimport__pick{display:flex;flex-direction:column;gap:var(--s3)}

/* the real input stays in the tab order and in the accessibility tree; only its
   box is hidden, and the label wears its focus ring */
.gimport .gimport__file{position:absolute;width:1px;height:1px;opacity:0;
  pointer-events:none}
.gimport .gimport__file:focus-visible + .gimport__drop{outline:2px solid var(--terracotta);
  outline-offset:2px}

.gimport .gimport__drop{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s3);min-height:8.5rem;padding:var(--s5) var(--s4);
  cursor:pointer}
.gimport .gimport__drop:hover{border-color:var(--terracotta);background:#FBF1EA}
.gimport .gimport__cta{display:inline-flex;align-items:center;justify-content:center;
  height:var(--h-ctl-lg);padding:0 1.2rem;border-radius:2px;background:var(--rust);color:#fff;
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.gimport .gimport__drop:hover .gimport__cta{background:var(--mocha)}
.gimport .gimport__or{font-size:var(--ft-meta);color:var(--muted)}
.gimport .gimport__chosen{font-size:var(--ft-meta);color:var(--muted)}
.gimport .gimport__chosen b{color:var(--ink);font-weight:700}

/* the mapping list reads as pairs, not as a column of loose controls */
.gimport .maplist label{color:var(--muted)}
/* the body is a flex column, so the preview would otherwise be squashed to a
   hairline by its own max-height rather than scrolling inside it */
.gimport .preview{flex:0 0 auto}
.gimport .preview:focus-visible{outline:2px solid var(--terracotta);outline-offset:-2px}
.gimport .summary{gap:var(--s3) var(--s6)}
.gimport .gimport__result{display:flex;flex-direction:column;gap:var(--s5);min-width:0}

/* Once a file is read there are two things on screen — how it was read, and
   what will happen — so they go side by side instead of the preview living
   below the fold in a 1,000px-wide modal. */
@media (min-width:768px){
  .gimport [data-step=preview] .modal__body{display:grid;align-items:start;
    grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:var(--s5)}
  .gimport [data-step=preview] .modal__body > .gimport__pick{grid-area:1/1}
  .gimport [data-step=preview] .modal__body > .gimport__map{grid-area:2/1}
  .gimport [data-step=preview] .modal__body > .gimport__result{grid-area:1/2/3/3}
  .gimport [data-step=preview] .gimport__drop{min-height:0;padding:var(--s4)}
}

@media (max-width:767px){
  /* In a sheet, what will happen comes before how it was read: the counts, the
     problems and the row list are the decision; the column mapping is only
     touched when the guess was wrong. */
  .gimport .modal__body > .gimport__pick{order:1}
  .gimport .modal__body > .gimport__result{order:2}
  .gimport .modal__body > .gimport__map{order:3}
  .gimport .gimport__result{gap:var(--s4)}

  .gimport .maplist{gap:var(--s1)}
  .gimport .maplist label{font-size:var(--ft-label);letter-spacing:.1em;
    text-transform:uppercase;margin-top:var(--s3)}
  .gimport .maplist select{max-width:none}
}

@media (max-width:639px){
  /* nothing to drag on a phone: the box is a button, and says so */
  .gimport .gimport__or{display:none}
  .gimport .gimport__drop{min-height:0;padding:var(--s4);border-style:solid;
    border-width:1px;border-color:var(--line)}
  .gimport .gimport__cta{width:100%}

  /* the preview answers one question here — what happens to each row */
  .gimport .preview [data-col=email],
  .gimport .preview [data-col=phone]{display:none}
  .gimport .summary{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4)}

  .gimport .modal__foot{flex-wrap:wrap}
  .gimport .modal__foot .btn{flex:1 1 8rem}
  .gimport .gimport__ready{flex:1 1 100%;text-align:center}
}