/* ============================================================
   beatsquares — components.css
   Interaction elements, faithfully from the brand component sheet.
   Buttons · inputs · toggles · checkboxes · dropdowns · diamonds.
   Depends on colors_and_type.css (tokens). Source of truth for UI.
   ============================================================ */

/* ---------------- BUTTONS ---------------- */
.bs-btn{
  font-family:var(--bs-sans); font-weight:600; font-size:15px; line-height:1;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border:1px solid transparent; border-radius:var(--r-sm);
  background:var(--bs-azure-800); color:var(--bs-white);
  cursor:pointer; user-select:none; white-space:nowrap;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.bs-btn svg{width:18px;height:18px;flex:none;stroke-width:2}
.bs-btn:hover,.bs-btn.is-hover{ background:var(--bs-azure-900); }
.bs-btn:active,.bs-btn.is-pressed{ background:#0C3A55; transform:translateY(.5px); }
.bs-btn:focus-visible,.bs-btn.is-focused{ outline:none; background:var(--bs-azure-800); box-shadow:var(--ring-focus); }
.bs-btn:disabled,.bs-btn.is-disabled{
  background:#C3CBD4; color:rgba(255,255,255,.9);
  cursor:not-allowed; box-shadow:none; transform:none;
}
/* Ink — the quiet primary, for pages where azure is already the field */
.bs-btn--ink{ background:var(--bs-ink); color:var(--bs-white); }
.bs-btn--ink:hover,.bs-btn--ink.is-hover{ background:var(--bs-slate); }
.bs-btn--ink:active,.bs-btn--ink.is-pressed{ background:#060D16; }

/* Outline — the hairline box from the site header */
.bs-btn--outline{ background:transparent; color:var(--bs-ink); border-color:var(--bs-ink); border-radius:0; }
.bs-btn--outline:hover,.bs-btn--outline.is-hover{ background:var(--bs-ink); color:var(--bs-white); }
.bs-btn--outline:active,.bs-btn--outline.is-pressed{ background:var(--bs-azure-900); color:var(--bs-white); border-color:var(--bs-azure-900); }
.bs-btn--outline:disabled,.bs-btn--outline.is-disabled{ background:transparent; color:var(--bs-ink-mute); border-color:var(--bs-rule-2); }

/* Icon-only square */
.bs-btn--icon{ padding:0; width:44px; height:44px; justify-content:center; gap:0; }
.bs-btn--icon svg{ width:20px; height:20px; }

/* Negative — for azure / deep / ink fields */
.bs-btn--neg{ background:var(--bs-white); color:var(--bs-azure-900); }
.bs-btn--neg:hover,.bs-btn--neg.is-hover{ background:var(--bs-azure-100); color:var(--bs-azure-900); }
.bs-btn--neg:active,.bs-btn--neg.is-pressed{ background:var(--bs-azure-900); color:var(--bs-white); }
.bs-btn--neg:focus-visible,.bs-btn--neg.is-focused{
  background:transparent; color:var(--bs-white);
  border-color:var(--bs-white); box-shadow:none;
}
.bs-btn--neg:disabled,.bs-btn--neg.is-disabled{ background:rgba(255,255,255,.35); color:rgba(255,255,255,.7); }

/* ---------------- TEXT INPUT ---------------- */
.bs-field{ display:flex; flex-direction:column; gap:6px; font-family:var(--bs-sans); }
.bs-label{ font-size:14px; font-weight:600; color:var(--bs-ink); }
.bs-input-wrap{ position:relative; display:flex; align-items:center; }
.bs-input{
  width:100%; box-sizing:border-box;
  font-family:var(--bs-sans); font-size:15px; color:var(--bs-ink);
  padding:11px 14px; border:1px solid var(--bs-rule-2); border-radius:var(--r-sm);
  background:var(--bs-white); transition:border-color .15s ease, box-shadow .15s ease;
}
.bs-input::placeholder{ color:var(--bs-slate); opacity:.8; }
.bs-input:focus{ outline:none; border-color:var(--bs-azure-500); box-shadow:var(--ring-focus); }
.bs-input-wrap .bs-affix{
  position:absolute; right:12px; display:flex; align-items:center;
  color:var(--bs-slate); pointer-events:none;
}
.bs-input-wrap .bs-affix svg{ width:18px; height:18px; stroke-width:2; }
.bs-helper{ font-size:12px; color:var(--bs-slate); }
/* Validation */
.bs-field.is-success .bs-input{ border-color:var(--bs-success); }
.bs-field.is-success .bs-badge{ background:var(--bs-success); }
.bs-field.is-error .bs-input{ border-color:var(--bs-error); }
.bs-field.is-error .bs-input:focus{ box-shadow:0 0 0 3px rgba(200,50,43,.25); }
.bs-field.is-error .bs-badge{ background:var(--bs-error); }
.bs-field.is-error .bs-helper{ color:var(--bs-error); }
.bs-badge{
  position:absolute; right:12px; width:20px; height:20px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center; color:#fff; pointer-events:none;
}
.bs-badge svg{ width:13px; height:13px; stroke-width:3; }

/* ---------------- TOGGLE ---------------- */
.bs-toggle{ position:relative; display:inline-block; width:44px; height:24px; flex:none; }
.bs-toggle input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.bs-toggle .track{
  position:absolute; inset:0; border-radius:var(--r-pill);
  background:#CBD5DF; transition:background .18s ease;
}
.bs-toggle .knob{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:var(--sh-1); transition:transform .18s ease;
}
.bs-toggle input:checked ~ .track{ background:var(--bs-azure-500); }
.bs-toggle input:checked ~ .knob{ transform:translateX(20px); }
.bs-toggle input:disabled ~ .track{ opacity:.5; }

/* ---------------- CHECKBOX ---------------- */
.bs-check{ display:inline-flex; align-items:center; gap:10px; font-size:15px; color:var(--bs-ink); cursor:pointer; }
.bs-check input{ position:absolute; opacity:0; }
.bs-check .box{
  width:20px; height:20px; border-radius:var(--r-xs);
  border:1.5px solid var(--bs-azure-500); background:var(--bs-white);
  display:flex; align-items:center; justify-content:center; color:var(--bs-white);
  transition:background .15s ease, border-color .15s ease;
}
.bs-check .box svg{ width:13px; height:13px; stroke-width:3; opacity:0; }
.bs-check input:checked ~ .box{ background:var(--bs-azure-500); border-color:var(--bs-azure-500); }
.bs-check input:checked ~ .box svg{ opacity:1; }
.bs-check input:disabled ~ .box{ border-color:var(--bs-rule-2); }
.bs-check input:disabled ~ .lbl{ color:var(--bs-ink-mute); }

/* ---------------- DROPDOWN / SELECT ---------------- */
.bs-select{ position:relative; display:inline-flex; align-items:center; min-width:180px; }
.bs-select select{
  appearance:none; -webkit-appearance:none;
  width:100%; font-family:var(--bs-sans); font-size:15px; color:var(--bs-ink);
  padding:11px 38px 11px 14px; border:1px solid var(--bs-rule-2); border-radius:var(--r-sm);
  background:var(--bs-white); cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease;
}
.bs-select select:focus{ outline:none; border-color:var(--bs-azure-500); box-shadow:var(--ring-focus); }
.bs-select.is-active select{ border-color:var(--bs-azure-500); }
.bs-select select:disabled{ color:var(--bs-ink-mute); background:var(--bs-tint-1); cursor:not-allowed; }
.bs-select .chev{
  position:absolute; right:12px; pointer-events:none; color:var(--bs-slate);
  display:flex; align-items:center;
}
.bs-select .chev svg{ width:18px; height:18px; stroke-width:2; }

/* ---------------- CHIP ---------------- */
.bs-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--bs-sans); font-size:13px; font-weight:600; line-height:1;
  padding:7px 12px; border-radius:var(--r-xs);
  background:var(--bs-azure-100); color:var(--bs-azure-900);
}
.bs-chip--quiet{ background:var(--bs-tint-2); color:var(--bs-slate); }
.bs-chip--lilac{ background:var(--bs-lilac); color:#2A3560; }

/* ---------------- THE RAUTE (diamond) ---------------- *
   The mark's own shape, reused as a container. Square box + clip.
   Use for portraits, avatars, spot marks, list bullets. */
.bs-raute{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background:var(--bs-azure-500); color:var(--bs-white); overflow:hidden;
}
.bs-raute > img{ width:100%; height:100%; object-fit:cover; display:block; }
.bs-raute--white{ background:var(--bs-white); color:var(--bs-azure-900); }
.bs-raute--ink{ background:var(--bs-ink); color:var(--bs-white); }
/* Tiny inline bullet — the "◆ SWIPE" meta glyph */
.bs-raute-dot{
  display:inline-block; width:.5em; height:.5em; vertical-align:baseline;
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background:var(--bs-azure-500);
}

/* ---------------- THE SLANT (parallelogram) ---------------- *
   The mark's shear, reused as a container or accent block. */
.bs-slant-block{
  clip-path:polygon(18% 0, 100% 0, 82% 100%, 0 100%);
  background:var(--bs-azure-500); color:var(--bs-white);
}
.bs-slant-block--lilac{ background:var(--bs-lilac); color:var(--bs-ink); }
.bs-slant-block--mint{ background:var(--bs-mint); color:var(--bs-ink); }