/* css/import.css - WS11 Import feature (Batch D PKG-2). Pre-allocated by the
   Batch D claim commit; PKG-2 (WS11-Import) is the ONLY writer of this file.

   Reuses the shared screen chrome already defined in css/plans.css (.wl-screen-hdr,
   .wl-screen-kicker, .wl-screen-title, .wl-back-btn, .wl-screen-body, .wl-input,
   .wl-rows, .wl-row, .wl-lbl, .wl-pencil-slot, .wl-cta-row, .wl-cta-sec, .wl-cta-pri)
   and css/sheets.css (.wl-toggle) - both already load in <head>, so only the
   Import-specific pieces (picker cards, review-row layout, pills, spinner, mapping
   selects) live here. Design source: design-source/ImportSheet.dc.html. */

.wl-import-card {
  background: var(--s1); border: 1px solid var(--b1); border-radius: 14px;
  padding: 14px; display: flex; gap: 12px; align-items: center; cursor: pointer;
  transition: transform .1s;
}
.wl-import-card:active { transform: scale(.98) }
.wl-import-ico {
  width: 48px; height: 48px; border-radius: 12px; background: var(--s2);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  flex: none;
}
.wl-import-ico-mono { font-family: var(--font-num); font-weight: 700; font-size: 13px; color: var(--mut2) }
.wl-import-card-t { font-size: 14px; font-weight: 650; color: var(--txt) }
.wl-import-card-s { font-size: 11.5px; color: var(--mut); margin-top: 2px; overflow-wrap: anywhere }
.wl-import-chev { color: var(--mut); font-size: 15px; flex: none }

.wl-import-map-row { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.wl-import-map-row .wl-input { width: auto; flex: 1; min-width: 0 }

.wl-import-spinner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 60px 20px; text-align: center; color: var(--mut2);
  font-size: 13px;
}
.wl-import-spin-dot {
  width: 34px; height: 34px; border-radius: 999px; border: 3px solid var(--b1);
  border-top-color: var(--acc); animation: wlImportSpin .8s linear infinite;
}
@keyframes wlImportSpin { to { transform: rotate(360deg) } }
.wl-import-error { font-size: 13px; color: var(--mut2); padding: 12px 0; text-align: center }

.wl-import-summary {
  background: var(--s1); border: 1px solid var(--b1); border-radius: 14px;
  padding: 13px 14px; display: flex; gap: 10px; align-items: flex-start;
}
.wl-import-summary-ico {
  width: 48px; height: 64px; border-radius: 8px; background: var(--s3);
  border: 1px solid var(--b2); display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex: none; font-family: var(--font-num); font-weight: 700; color: var(--mut2);
}
.wl-import-label-input, .wl-import-date-input {
  background: none; border: none; border-bottom: 1.5px dashed var(--b2);
  font-family: var(--font-ui); font-weight: 650; font-size: 11.5px; color: var(--txt);
  padding: 0 0 1px; outline: none; max-width: 130px;
}
.wl-import-date-input { max-width: 118px; color: var(--mut2); font-weight: 500 }
/* The native calendar-picker indicator paints for the OS light scheme by default,
   which makes it a black icon on our dark themes - invisible. color-scheme tells
   the browser which palette to render the control's built-in chrome with. */
:root[data-theme="dark"] .wl-import-date-input { color-scheme: dark; }
:root[data-theme="light"] .wl-import-date-input,
:root[data-theme="notebook"] .wl-import-date-input { color-scheme: light; }

.wl-import-pill {
  padding: 2px 8px; border-radius: 999px; font-family: var(--font-num);
  font-size: 10.5px; font-weight: 700;
}
.wl-import-pill.ok { background: color-mix(in srgb, var(--grn) 15%, transparent); color: var(--grn) }
.wl-import-pill.warn { background: color-mix(in srgb, var(--org) 14%, transparent); color: var(--org) }

.wl-import-rows { padding: 2px 14px }
.wl-import-row {
  display: flex; align-items: center; gap: 10px; min-height: 40px;
  border-bottom: 1px solid var(--b1); font-family: var(--font-num); font-size: 13px;
  padding: 6px 0;
}
.wl-import-rows .wl-import-row:last-child { border-bottom: none }
.wl-import-row-warn {
  background: color-mix(in srgb, var(--org) 6%, transparent);
  margin: 0 -14px; padding: 6px 14px; border-bottom: 1px solid var(--b1);
  flex-wrap: wrap;
}
.wl-import-row-excluded { opacity: .45 }
.wl-import-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap }
.wl-import-name-input {
  font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; color: var(--txt);
  background: none; border: none; border-bottom: 1.5px dashed var(--b2);
  padding: 0 0 1px; outline: none; min-width: 60px; max-width: 100%;
}
.wl-import-name-input.warn { border-bottom-color: var(--org) }
.wl-import-pencil { color: var(--mut); font-size: 11px; flex: none }
.wl-import-note { color: var(--org); font-size: 10.5px; font-family: var(--font-ui); flex-basis: 100%; display: block; margin-top: 4px }
.wl-import-value { color: var(--txt); flex: none }
.wl-import-val2 { display: inline-flex; align-items: center; gap: 4px; flex: none }
/* Weight/reps edit as two quiet dashed-underline fields (match the name input's
   look) - the boxed style read as heavy chrome on a long row list. */
.wl-import-value-input.wl-import-num {
  width: 56px; padding: 0 2px 1px; height: auto; text-align: right;
  background: none; border: none; border-bottom: 1.5px dashed var(--b2);
  border-radius: 0; font-style: normal; color: var(--txt); font-size: 12.5px;
}
.wl-import-value-input.wl-import-num.reps { width: 36px; text-align: left }
.wl-import-src-btn {
  border: none; background: none; padding: 0 2px; cursor: pointer;
  font-size: 12px; line-height: 1; flex: none; filter: grayscale(1); opacity: .65;
}
.wl-import-src-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 18px;
}
.wl-import-src-scroll {
  max-height: 78vh; width: min(92vw, 440px); overflow-y: auto;
  border-radius: 12px; border: 1px solid var(--b2);
}
.wl-import-src-inner { position: relative }
.wl-import-src-inner img { display: block; width: 100%; height: auto }
.wl-import-src-hl {
  position: absolute; border: 2.5px solid var(--acc); border-radius: 6px;
  box-shadow: 0 0 0 3000px rgba(0,0,0,.45); pointer-events: none;
}
.wl-import-src-note {
  color: #ddd; font-size: 12px; font-family: var(--font-ui); text-align: center;
  max-width: 92vw; overflow-wrap: anywhere;
}
.wl-import-x { color: var(--mut); font-size: 11px }
.wl-import-rawtext { margin: 4px 2px }
.wl-import-rawtext summary { color: var(--mut); font-size: 11px; cursor: pointer; font-family: var(--font-ui) }
.wl-import-rawtext pre {
  margin: 6px 0 0; padding: 10px; border-radius: 8px; background: var(--s2);
  border: 1px solid var(--b1); color: var(--mut2); font-size: 10.5px;
  white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto;
}
.wl-import-value-input {
  height: 30px; padding: 0 10px; flex: none; width: 92px; text-align: center;
  font-family: var(--font-num); font-style: italic; color: var(--pencil);
}
.wl-import-check {
  width: 26px; height: 26px; border-radius: 999px; border: none; background: none;
  color: var(--grn); font-size: 14px; cursor: pointer; flex: none; padding: 0;
}
.wl-import-check.off { color: var(--mut) }

.wl-import-nosave-note { font-size: 11px; color: var(--mut); text-align: center }

.wl-import-toggle-row {
  background: var(--s1); border: 1px solid var(--b1); border-radius: 14px;
  padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
/* Design source (ImportSheet.dc.html) renders this ON state in the "ok" (green) tone,
   not the amber .wl-toggle.on default used elsewhere (e.g. the injury toggle in
   sheets.js) - scoped override so the shared class stays amber everywhere else. */
.wl-import-toggle-row .wl-toggle.on { background: var(--grn) }

/* ── Part 7: import-your-history (three-lane fleet L1-D, 2026-08-26) ──
   Paste box, unit toggle, exercise matching panel, multi-workout preview.
   Existing tokens only - zero new tokens (fence rule). */

.wl-import-template-link {
  background: none; border: none; padding: 0; color: var(--acc); font-size: 11.5px;
  font-family: var(--font-ui); font-weight: 650; cursor: pointer; text-decoration: underline;
}

.wl-import-paste-box {
  width: 100%; min-height: 160px; resize: vertical; background: var(--s1);
  border: 1px solid var(--b1); border-radius: 14px; padding: 12px 14px;
  font-family: var(--font-num); font-size: 12.5px; color: var(--txt); outline: none;
}
.wl-import-paste-box:focus { border-color: var(--acc) }
.wl-import-paste-box::placeholder { color: var(--mut) }

.wl-import-unit-row {
  background: var(--s1); border: 1px solid var(--b1); border-radius: 14px;
  padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.wl-import-unit-seg { display: flex; border: 1px solid var(--b2); border-radius: 999px; overflow: hidden }
.wl-import-unit-btn {
  background: none; border: none; padding: 4px 14px; font-family: var(--font-num);
  font-size: 12px; font-weight: 700; color: var(--mut2); cursor: pointer;
}
.wl-import-unit-btn.on { background: var(--acc); color: var(--s1) }

.wl-import-match-rows { display: flex; flex-direction: column; gap: 8px }
.wl-import-match-row {
  background: var(--s1); border: 1px solid var(--b1); border-radius: 14px;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 6px;
}
.wl-import-match-row.matched { opacity: .55 }
.wl-import-match-name { font-size: 13px; font-weight: 650; color: var(--txt); overflow-wrap: anywhere }
.wl-import-match-res { font-size: 11.5px; color: var(--mut2) }
.wl-import-match-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center }
.wl-import-match-btn {
  background: var(--s2); border: 1px solid var(--b2); border-radius: 999px;
  padding: 5px 12px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 650;
  color: var(--mut2); cursor: pointer; max-width: 100%; overflow-wrap: anywhere;
}
.wl-import-match-btn.on { border-color: var(--acc); color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent) }
.wl-import-match-select { width: auto; flex: 1; min-width: 120px; height: 32px; font-size: 11.5px }

.wl-import-prev-list { display: flex; flex-direction: column; gap: 10px }
.wl-import-prev-workout {
  background: var(--s1); border: 1px solid var(--b1); border-radius: 14px;
  padding: 4px 14px 8px;
}
.wl-import-prev-workout.off { opacity: .45 }
.wl-import-prev-hdr {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  cursor: pointer;
}
.wl-import-prev-set {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 0; border-top: 1px solid var(--b1);
  font-family: var(--font-num); font-size: 12.5px;
}
.wl-import-prev-ex { color: var(--mut2); font-family: var(--font-ui); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; min-width: 0 }
.wl-import-prev-val { color: var(--txt); flex: none }

/* history.js's buildSessCard renders <span class="sess-imported-badge"> for a session
   with imported:true (AC-7); its sibling .sess-corrected-badge has flex-shrink:0 for
   exactly this reason (css/history.css:16) - history.css is outside this package's
   fence, so the rule for the additive imported badge lives here instead. */
.sess-imported-badge { flex-shrink: 0 }