/* back.zone design system: surfaces (L0) and atoms (L1). Needs bz.tokens.css, bz.fonts.css and bz.base.css.
   Only this file and the tokens write box-shadow or backdrop-filter; pages compose these classes. */

/* ── L0 · surfaces ─────────────────────────────────────────────── */

.bz-plate {
  background: var(--bz-surface-plate);
  border-radius: var(--bz-radius-xl);
  box-shadow: var(--bz-e2-plate), var(--bz-window);
}

/* A recessed surface: inputs, tracks. */
.bz-well {
  background: var(--bz-surface-well);
  box-shadow: var(--bz-e1);
}

.bz-well:focus-within {
  background: var(--bz-surface-well-focus);
  box-shadow: inset 0 2px 4px 0 rgb(104 106 134 / var(--bz-well-focus-inset-opacity)), inset 0 -1px 0 0 rgb(255 255 255 / 0.9);
}

/* Glass, role "place": says where you are. Only on a surface that really overlaps something. */
.bz-glass-place {
  background: var(--bz-glass-place-bg);
  -webkit-backdrop-filter: var(--bz-glass-place-filter);
  backdrop-filter: var(--bz-glass-place-filter);
  box-shadow:
    inset 0 1px 0 var(--bz-glass-place-edge-top),
    inset 0 -1px 0 var(--bz-glass-place-edge-bottom);
}

/* The opaque equivalent of "place", for in-plane state such as an inline alert: no blur. */
.bz-alert {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: var(--bz-space-2-5);
  padding: var(--bz-space-3-5) var(--bz-space-4) var(--bz-space-3-5) var(--bz-space-5);
  border-radius: var(--bz-radius-md);
  background: var(--bz-alert-fill);
  box-shadow:
    inset 0 1px 0 var(--bz-glass-place-edge-top),
    inset 0 -1px 0 var(--bz-glass-place-edge-bottom);
}

/* The 5px stripe on the left edge: selection, status, focus and error all use the same form. */
.bz-stripe {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--bz-stripe-width);
  pointer-events: none;
}

.bz-alert--success .bz-stripe {
  background: var(--bz-stripe-healthy);
}

.bz-alert--success .bz-alert__icon {
  color: var(--bz-status-healthy-ink);
}

/* ── L1 · atoms ────────────────────────────────────────────────── */

.bz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bz-space-2);
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--bz-radius-sm);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--bz-dur-press) var(--bz-ease-standard),
    box-shadow var(--bz-dur-press) ease,
    background var(--bz-dur-press) ease,
    filter var(--bz-dur-press) ease;
}

.bz-btn--primary {
  color: var(--bz-ink-on-accent);
  background: var(--bz-opaque-primary-bg);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    inset 0 -1px 0 rgb(52 34 140 / 0.4),
    0 1px 1px rgb(58 40 132 / 0.2),
    0 2px 3px -1px rgb(58 40 132 / 0.22),
    0 6px 10px -4px rgb(96 72 232 / 0.4);
}

.bz-btn--primary:hover {
  color: var(--bz-ink-on-accent);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.bz-btn--primary:active {
  transform: translateY(var(--bz-press-translate-y));
  box-shadow:
    inset 0 2px 5px rgb(38 24 104 / 0.45),
    inset 0 1px 0 rgb(255 255 255 / 0.2);
}

.bz-btn--ghost {
  height: 36px;
  padding: 0 var(--bz-space-3);
  background: transparent;
  color: var(--bz-accent-link);
  font-size: var(--bz-text-body-size);
}

.bz-btn--ghost:hover {
  background: var(--bz-surface-well-focus);
  color: var(--bz-accent-link);
}

.bz-btn:disabled,
.bz-btn[aria-disabled='true'] {
  cursor: default;
  filter: grayscale(0.4) opacity(0.6);
  transform: none;
}

.bz-btn .bz-icon {
  font-size: 19px;
}

.bz-btn--ghost .bz-icon {
  font-size: var(--bz-icon-sm);
}

/* An input lives in a well; the stripe on its left carries focus and error, no ring. */
.bz-input-wrap {
  position: relative;
  display: flex;
  border-radius: var(--bz-radius-sm);
}

.bz-input-wrap .bz-stripe {
  z-index: 1;
  border-radius: var(--bz-radius-sm) 0 0 var(--bz-radius-sm);
  background: var(--bz-stripe-accent);
  opacity: 0;
  transition: opacity var(--bz-dur-press) ease;
}

.bz-input-wrap:focus-within .bz-stripe {
  opacity: 1;
}

.bz-input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 17px;
  border: 0;
  outline: 0;
  border-radius: var(--bz-radius-sm);
  background: transparent;
  font-size: var(--bz-text-body-md-size);
  color: var(--bz-ink-heading);
}

.bz-input::placeholder {
  color: var(--bz-ink-muted);
}

.bz-input-wrap--error {
  background: var(--bz-well-error-fill);
  box-shadow: inset 0 2px 4px 0 rgb(150 40 60 / 0.22), inset 0 -1px 0 0 rgb(255 255 255 / 0.9);
}

.bz-input-wrap--error:focus-within {
  background: var(--bz-well-error-fill-focus);
  box-shadow: inset 0 2px 4px 0 rgb(150 40 60 / 0.16), inset 0 -1px 0 0 rgb(255 255 255 / 0.9);
}

.bz-input-wrap--error .bz-stripe {
  background: var(--bz-stripe-error);
  opacity: 1;
}

.bz-help {
  font-size: var(--bz-text-caption-size);
  line-height: var(--bz-text-caption-lh);
  color: var(--bz-ink-secondary);
}

.bz-help--error {
  color: var(--bz-status-error-ink);
}