/* AURIA LASH — interactive lash map builder. House dress throughout:
   whites ladder, ink structure, rose-vivid working marks, champagne
   ceremony. Opened only from a client's card. */

.lash-card {
  max-width: 640px;
  max-height: 88vh;
  overflow-y: auto;
}

.lash-card .sim-note { margin: calc(var(--unit) * 1) 0; }

/* ---------- top strip: one line + anchor dot per lash ---------- */

/* the top rail: minus and plus flank the lash count lines */
.lash-strip {
  display: flex;
  align-items: center;
  gap: calc(var(--unit) * 1);
  padding: calc(var(--unit) * 1.5) calc(var(--unit) * 1) 0;
}
.strip-rail {
  flex: 1;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}
.strip-lash {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 0 3px;
}
.strip-lash .sl-line {
  width: 3px;
  height: 26px;
  background: var(--ink);
  opacity: 0.55;
  border-radius: 3px 3px 0 0; /* soft crown, no hard 90-degree top */
}
.strip-lash .sl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose);
  margin-top: 2px;
}
.strip-lash.sel .sl-line { background: var(--rose-vivid); opacity: 1; width: 4px; }
.strip-lash.sel .sl-dot { background: var(--rose-vivid); }

/* ---------- stage: minus | eye | plus ---------- */

/* the stage is a framed white canvas; the diagram owns all of it */
.lash-stage {
  position: relative;
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: calc(var(--unit) * 1.5);
  margin: calc(var(--unit) * 1) 0;
}
#lash-svg {
  width: 100%;
  height: auto;
  min-height: 190px;
  display: block;
}

.lash-circle {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--rose-vivid);
  color: var(--on-accent);
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  flex: none;
}
.lash-circle:hover { background: var(--rose); }
.lash-circle:disabled { background: var(--bone); cursor: not-allowed; }

.eye-badge {
  position: absolute;
  right: 8px;
  bottom: 2px;
  font-family: var(--font-mark);
  font-size: 40px;
  color: var(--ink);
  opacity: 0.18;
  pointer-events: none;
}

/* live lash count, top left; saves her the counting */
.count-badge {
  position: absolute;
  left: 12px;
  top: 4px;
  font-family: var(--font-mark);
  font-size: 40px;
  color: var(--ink);
  opacity: 0.18;
  pointer-events: none;
}

/* ---------- controls ---------- */

.lash-controls {
  display: grid;
  gap: calc(var(--unit) * 2);
  padding: calc(var(--unit) * 1) calc(var(--unit) * 2) calc(var(--unit) * 1);
}

.sel-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--unit) * 2);
}
.num-box {
  width: 46px;
  border: 1px solid var(--bone);
  border-radius: var(--radius-btn);
  background: var(--white);
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: var(--ink);
  text-align: center;
  padding: 7px 0;
}
.num-box:focus { outline: none; border-color: var(--rose-vivid); }
/* native tick arrows are useless at thumb scale; steppers do the job */
.num-box::-webkit-inner-spin-button,
.num-box::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.num-box { -moz-appearance: textfield; appearance: textfield; }

.stepper {
  display: flex;
  flex-direction: column;
  gap: 10px; /* decent air so a thumb never hits the wrong one */
}
.stepper button {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--rose);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.stepper button:hover { background: var(--rose-vivid); }
.stepper img { width: 13px; height: 13px; }
.stepper .st-up { transform: rotate(-90deg); }
.stepper .st-dn { transform: rotate(90deg); }
.sel-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sel-arrows { display: flex; gap: calc(var(--unit) * 1.5); }
.sel-label,
.slide-label {
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose-vivid);
  text-align: center;
}

.slide-row { display: grid; gap: 4px; justify-items: center; }
.slide-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: min(320px, 80%);
  height: 20px;
  background: transparent;
  cursor: pointer;
}
.slide-row input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--rose);
  border-radius: 1px;
}
.slide-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--rose-vivid);
  border: 2px solid #FFFFFF;
  box-shadow: var(--shadow-card);
  margin-top: -7px;
}
.slide-row input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--rose);
}
.slide-row input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rose-vivid);
  border: 2px solid #FFFFFF;
}

.lash-foot {
  display: flex;
  justify-content: flex-end;
  padding: 0 calc(var(--unit) * 2) calc(var(--unit) * 1);
}
.snap-btn {
  border: none;
  background: var(--rose); /* the Lash Map dress, never chocolate */
  color: var(--on-accent);
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 9px 22px;
  border-radius: var(--radius-btn);
  cursor: pointer;
}
.snap-btn:hover { background: var(--rose-vivid); }
.snap-btn.saved { background: var(--champagne); cursor: default; }

/* snapshot SVGs render inside history thumbs */
.map-thumb svg { width: 100%; height: auto; display: block; }

/* history holds ONLY real snapshots; quiet empty state until then */
.map-empty {
  font-size: 12px;
  font-style: italic;
  opacity: 0.55;
  padding: calc(var(--unit) * 2) 0 calc(var(--unit) * 3);
}
.map-actions { width: 100%; }
.map-del {
  margin-left: auto; /* bottom right corner of the card details */
  border: none;
  background: var(--rose);
  color: var(--on-accent);
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: var(--radius-btn);
  cursor: pointer;
}
.map-del:hover { background: var(--rose-vivid); }