/* Shared destination + QR-design picker styles.
 *
 * Loaded by both the homepage widget and (eventually) the in-app
 * link/QR editors. Locked to neutral surfaces — black ink + mint
 * accent. Does not use any tenant-brand variables.
 */

/* Generic field plumbing — kept .lb-* prefixed so it can't collide
 * with the existing dashboard's .field / .input / .lbl rules. */
.lb-field { margin-bottom: 14px; }
.lb-field:last-child { margin-bottom: 0; }
.lb-lbl {
  display: block;
  font-family: 'Victor Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6B6B73;
  margin: 0 0 8px;
}
.lb-input {
  width: 100%;
  border: 1.5px solid #E5E4E7;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px; color: #0a0a0b;
  background: #fff; outline: 0;
  transition: border-color 100ms ease;
  font-family: inherit;
}
.lb-input:focus { border-color: #0a0a0b; }
textarea.lb-input { min-height: 80px; resize: vertical; line-height: 1.45; }

/* Destination type chips — matches the dashboard's link editor
 * pattern (.type-scroll / .type-pick in views/app/link-detail.html).
 * Fixed-width chips in a horizontal-scroll row. Each chip sized
 * the same so the row reads as a uniform strip; if there isn't
 * room for all 9 the row scrolls horizontally with a thin
 * scrollbar (Dave's reference: image 237 mobile dashboard). */
.lb-destination, .lb-field { min-width: 0; }
.lb-type-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.lb-type-grid::-webkit-scrollbar { height: 6px; }
.lb-type-grid::-webkit-scrollbar-thumb { background: #E5E4E7; border-radius: 999px; }
.lb-type-pick {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 88px;
  background: #fff;
  border: 1px solid #E5E4E7;
  border-radius: 12px;
  padding: 12px 8px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #6B6B73;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center;
  line-height: 1.2;
  transition: border-color 0.12s, color 0.12s, background-color 0.12s;
}
.lb-type-pick svg {
  width: 22px; height: 22px;
  stroke-width: 1;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lb-type-pick-label { letter-spacing: 0.01em; white-space: nowrap; }
.lb-type-pick:hover { border-color: #0a0a0b; color: #0a0a0b; }
.lb-type-pick:focus-visible { outline: 0; border-color: #0a0a0b; box-shadow: 0 0 0 3px rgba(117,251,144,0.45); }
.lb-type-pick.is-active { background: #0a0a0b; color: #fff; border-color: #0a0a0b; }

/* QR design collapsible cards. */
.lb-qrdesign { display: flex; flex-direction: column; gap: 10px; }
.lb-card {
  background: #fff;
  border: 1px solid #E5E4E7;
  border-radius: 14px;
  overflow: hidden;
}
.lb-card-head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 0;
  font-family: inherit; font-size: 14px; font-weight: 600; color: #0a0a0b;
  cursor: pointer; text-align: left;
}
.lb-card-eyebrow { font-size: 14px; font-weight: 600; color: #0a0a0b; }
.lb-card-help    { font-size: 12px; color: #6B6B73; margin-top: 4px; line-height: 1.45; }
.lb-card-chev { width: 20px; height: 20px; color: #6B6B73; transition: transform 150ms ease; }
.lb-card-chev svg { width: 100%; height: 100%; }
.lb-card.is-open .lb-card-chev { transform: rotate(180deg); }
.lb-card-body {
  padding: 0 16px 16px;
  display: none;
}
.lb-card.is-open .lb-card-body { display: block; }

/* Color swatches. */
.lb-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-swatch {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1.5px solid #E5E4E7;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: border-color 100ms, transform 100ms;
}
.lb-swatch:hover { transform: scale(1.05); }
.lb-swatch.is-active { border-color: #0a0a0b; box-shadow: inset 0 0 0 1.5px #fff; }
.lb-swatch.lb-swatch-none svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.lb-swatch-add {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1.5px dashed #B5B5BC;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; color: #6B6B73; cursor: pointer;
  background: #fff;
  position: relative;
}
.lb-swatch-add:hover { border-color: #0a0a0b; color: #0a0a0b; }
.lb-swatch-add input[type="color"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}

/* Tile picker (eye / body / frame). */
.lb-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.lb-tile-pick {
  background: #fff;
  border: 1.5px solid #E5E4E7;
  border-radius: 12px;
  padding: 10px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 500; color: #6B6B73;
  cursor: pointer;
  transition: border-color 100ms, color 100ms;
}
.lb-tile-pick:hover { border-color: #0a0a0b; color: #0a0a0b; }
.lb-tile-pick:focus-visible { outline: 0; border-color: #0a0a0b; box-shadow: 0 0 0 3px rgba(117,251,144,0.45); }
.lb-tile-pick.is-active { border-color: #0a0a0b; color: #0a0a0b; box-shadow: inset 0 0 0 1.5px #0a0a0b; }
.lb-tile-icon { width: 36px; height: 36px; color: #0a0a0b; }
.lb-tile-icon svg { width: 100%; height: 100%; fill: currentColor; }

/* "Fully dynamic" reassurance strip — sits between the type
 * chips and the typed fields. Communicates the platform's
 * core promise at the moment the user makes a destination choice
 * (so they know the type isn't permanent). Mint check + ink text. */
.lb-dynamic-pill {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: rgba(117,251,144,0.10);
  border: 1px solid rgba(117,251,144,0.45);
  border-radius: 12px;
  font-size: 12.5px; line-height: 1.45;
  color: #1a3d22;
}
.lb-dynamic-pill b { color: #0a0a0b; font-weight: 700; }
.lb-dynamic-pill-check {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: inline-grid; place-items: center;
  background: #75FB90;
  color: #0a0a0b;
  border-radius: 50%;
  margin-top: 1px;
}
.lb-dynamic-pill-check svg { width: 14px; height: 14px; display: block; }

/* Body-pattern "fill the whole space" toggle. iOS-style switch with
 * a mint glow when on — paired with the dots tile cluster above. */
.lb-toggle-row {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  background: #F7F7F8;
  border: 1px solid #E5E4E7;
  border-radius: 12px;
  cursor: pointer;
}
.lb-toggle-row:hover { border-color: #B5B5BC; }
.lb-toggle-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lb-toggle-title { font-size: 13px; font-weight: 600; color: #0a0a0b; }
.lb-toggle-sub   { font-size: 11.5px; color: #6B6B73; line-height: 1.4; }
.lb-toggle-switch {
  width: 38px; height: 22px;
  background: #B5B5BC;
  border-radius: 999px;
  position: relative; flex: 0 0 auto;
  transition: background 120ms ease;
}
.lb-toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 140ms cubic-bezier(.4,1.4,.6,1);
}
.lb-toggle-switch.is-on { background: #0a0a0b; }
.lb-toggle-switch.is-on .lb-toggle-knob { transform: translateX(16px); background: #75FB90; }
.lb-toggle-input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.lb-toggle-input:focus-visible + .lb-toggle-switch { box-shadow: 0 0 0 3px rgba(117,251,144,0.45); }

/* Footer hint inside QR design panel (e.g. "More options in your dashboard"). */
.lb-card-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed #E5E4E7;
  font-size: 12px; color: #6B6B73; line-height: 1.5;
}
.lb-card-foot a { color: #0a0a0b; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid #75FB90; }

/* Focus rings for swatches too — kills the default blue. */
.lb-swatch:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(117,251,144,0.6); }
.lb-swatch-add:focus-visible { outline: 0; border-color: #0a0a0b; box-shadow: 0 0 0 3px rgba(117,251,144,0.45); }