/* ============================================================
   TESSERON DS — components.css
   Buttons, badges, inputs, callouts, tabs, KPI, modal, toast,
   wordmark, lockup, product lockup, skin panel
   ============================================================ */

/* ---------------------------------------------------- */
/* BUTTON — sharp edges, 1px line, ink/bone first       */
/* ---------------------------------------------------- */
.t-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-family: var(--t-sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--t-ink);
  background: var(--t-ink); color: var(--t-bg);
  border-radius: var(--t-r-0);
  cursor: pointer;
  transition: all var(--t-dur-1) var(--t-ease-out);
  text-decoration: none;
}
.t-btn:hover  { background: oklch(0.26 0.010 260); border-color: oklch(0.26 0.010 260); }
.t-btn:active { background: oklch(0.12 0.008 260); }
.t-btn:focus-visible { outline: 2px solid var(--t-ink); outline-offset: 2px; }
.t-btn--ghost {
  background: transparent; color: var(--t-ink);
}
.t-btn--ghost:hover { background: var(--t-bg-alt); }
.t-btn--quiet {
  background: transparent; color: var(--t-ink-2);
  border: 1px solid var(--t-line);
}
.t-btn--quiet:hover { border-color: var(--t-ink); color: var(--t-ink); }
.t-btn--sm { padding: 6px 10px; font-size: 12px; }
.t-btn--lg { padding: 14px 22px; font-size: 14px; }
.t-btn .arr { font-family: var(--t-mono); letter-spacing: 0; opacity: 0.8; }

/* ---------------------------------------------------- */
/* BADGE / PILL — quiet, mono, uppercase                 */
/* ---------------------------------------------------- */
.t-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--t-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--t-line);
  color: var(--t-ink);
  background: var(--t-bg);
  border-radius: var(--t-r-0);
}
.t-badge--solid { background: var(--t-ink); color: var(--t-bg); border-color: var(--t-ink); }
.t-badge--soft  { background: var(--t-bg-alt); border-color: transparent; }
.t-badge--ok      { border-color: oklch(0.62 0.14 155); color: oklch(0.42 0.14 155); }
.t-badge--warn    { border-color: oklch(0.72 0.16 75);  color: oklch(0.48 0.15 75); }
.t-badge--danger  { border-color: oklch(0.60 0.20 25);  color: oklch(0.52 0.20 25); }

.t-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------------------------------------------- */
/* INPUT / FIELD                                         */
/* ---------------------------------------------------- */
.t-field { display: flex; flex-direction: column; gap: 6px; }
.t-field__label {
  font-family: var(--t-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--t-muted);
}
.t-input {
  font-family: var(--t-sans); font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--t-line);
  background: var(--t-surface); color: var(--t-ink);
  border-radius: var(--t-r-0);
  transition: border-color var(--t-dur-1) var(--t-ease-out);
}
.t-input::placeholder { color: var(--t-muted); }
.t-input:hover { border-color: var(--t-ink-2); }
.t-input:focus { outline: none; border-color: var(--t-ink); box-shadow: 0 0 0 2px oklch(0.18 0.008 260 / 0.12); }
.t-input[disabled] { background: var(--t-bg-alt); color: var(--t-muted); cursor: not-allowed; }

.t-field__hint { font-family: var(--t-mono); font-size: 10.5px; color: var(--t-muted); }

/* ---------------------------------------------------- */
/* SELECT (native, restyled)                             */
/* ---------------------------------------------------- */
.t-select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--t-sans); font-size: 14px;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--t-line);
  background: var(--t-surface)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1L6 6L11 1' stroke='%231a1e25' stroke-width='1' fill='none'/></svg>")
    no-repeat right 12px center;
  color: var(--t-ink);
  border-radius: var(--t-r-0);
  cursor: pointer;
}

/* ---------------------------------------------------- */
/* CHECKBOX / TOGGLE                                     */
/* ---------------------------------------------------- */
.t-check { display:inline-flex; align-items:center; gap: 10px; cursor: pointer; font-size: 14px; }
.t-check input { appearance: none; width: 16px; height: 16px; border: 1px solid var(--t-line); background: var(--t-surface); display: grid; place-items: center; cursor: pointer; }
.t-check input:checked { background: var(--t-ink); border-color: var(--t-ink); }
.t-check input:checked::after {
  content:''; width:10px; height:10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M1 5L4 8L9 2' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

.t-toggle { display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size: 13px; }
.t-toggle__track {
  width: 36px; height: 20px; border-radius: 999px;
  border: 1px solid var(--t-line); background: var(--t-bg-alt);
  position: relative; transition: background var(--t-dur-2) var(--t-ease-out), border-color var(--t-dur-2);
}
.t-toggle__track::after {
  content:''; position:absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--t-ink);
  transition: transform var(--t-dur-2) var(--t-ease-out);
}
.t-toggle input { display: none; }
.t-toggle input:checked + .t-toggle__track { background: var(--t-ink); border-color: var(--t-ink); }
.t-toggle input:checked + .t-toggle__track::after { background: var(--t-bg); transform: translateX(16px); }

/* ---------------------------------------------------- */
/* CARD                                                  */
/* ---------------------------------------------------- */
.t-card {
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  border-radius: var(--t-r-0);
}
.t-card__title { font-size: 16px; font-weight: 500; color: var(--t-ink); letter-spacing: -0.005em; }
.t-card__kicker { font-family: var(--t-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-muted); }
.t-card__body  { font-size: 14px; line-height: 1.55; color: var(--t-ink-2); }
.t-card__foot  { display:flex; justify-content:space-between; align-items:center; border-top: 1px solid var(--t-line-soft); padding-top: 12px; margin-top: 8px; font-family: var(--t-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--t-muted); }

/* ---------------------------------------------------- */
/* KPI TILE                                              */
/* ---------------------------------------------------- */
.t-kpi {
  padding: 20px;
  display:flex; flex-direction:column; gap: 8px;
  border: 1px solid var(--t-line);
  background: var(--t-surface);
}
.t-kpi__label { font-family: var(--t-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-muted); }
.t-kpi__value { font-family: var(--t-display); font-weight: 300; font-size: 44px; letter-spacing: -0.035em; line-height: 1; color: var(--t-ink); font-variant-numeric: tabular-nums; }
.t-kpi__delta { font-family: var(--t-mono); font-size: 11px; color: var(--t-ink-2); letter-spacing: 0.04em; }
.t-kpi__delta--up   { color: oklch(0.45 0.12 155); }
.t-kpi__delta--down { color: oklch(0.52 0.20 25); }
.t-kpi__foot { margin-top: auto; font-family: var(--t-mono); font-size: 10.5px; color: var(--t-muted); letter-spacing: 0.06em; }

/* ---------------------------------------------------- */
/* TABS                                                  */
/* ---------------------------------------------------- */
.t-tabs { display:flex; border-bottom: 1px solid var(--t-line); }
.t-tabs button {
  background: transparent; border: 0; border-bottom: 1px solid transparent;
  padding: 10px 14px;
  font-family: var(--t-sans); font-size: 13px; font-weight: 500;
  color: var(--t-ink-2); cursor: pointer; letter-spacing: 0.01em;
  margin-bottom: -1px;
}
.t-tabs button:hover { color: var(--t-ink); }
.t-tabs button.is-on { color: var(--t-ink); border-bottom-color: var(--t-ink); }

/* ---------------------------------------------------- */
/* TABLE (data)                                          */
/* ---------------------------------------------------- */
.t-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.t-table th, .t-table td {
  text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--t-line-soft);
  vertical-align: middle;
}
.t-table th {
  font-family: var(--t-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--t-muted); font-weight: 500;
  border-bottom: 1px solid var(--t-line);
  background: var(--t-bg);
}
.t-table tbody tr:hover { background: var(--t-bg-alt); }
.t-table .num { font-family: var(--t-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------------------------------------------------- */
/* TOAST                                                 */
/* ---------------------------------------------------- */
.t-toast {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 14px;
  padding: 12px 14px 12px 0;
  background: var(--t-ink); color: var(--t-bg);
  font-size: 13px;
  max-width: 420px;
}
.t-toast::before { content:''; background: var(--t-bg); }
.t-toast--ok::before { background: oklch(0.75 0.16 155); }
.t-toast--warn::before { background: oklch(0.78 0.16 75); }
.t-toast--danger::before { background: oklch(0.66 0.20 25); }
.t-toast__title { font-weight: 500; letter-spacing: 0.01em; }
.t-toast__body  { opacity: 0.78; font-size: 12.5px; margin-top: 2px; }
.t-toast__x { background: transparent; border: 0; color: var(--t-bg); opacity: 0.7; cursor: pointer; padding: 0 10px; font-size: 16px; }

/* ---------------------------------------------------- */
/* MODAL                                                 */
/* ---------------------------------------------------- */
.t-modal {
  width: min(480px, 94vw);
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  box-shadow: 0 20px 60px oklch(0 0 0 / 0.08);
}
.t-modal__head { padding: 18px 22px 12px; border-bottom: 1px solid var(--t-line-soft); display:flex; justify-content:space-between; align-items:center; }
.t-modal__title { font-size: 16px; font-weight: 500; color: var(--t-ink); letter-spacing: -0.005em; }
.t-modal__x { background: transparent; border: 1px solid var(--t-line); cursor: pointer; width: 26px; height: 26px; color: var(--t-ink); font-size: 14px; }
.t-modal__body { padding: 18px 22px; font-size: 14px; line-height: 1.55; color: var(--t-ink-2); }
.t-modal__foot { padding: 14px 22px; border-top: 1px solid var(--t-line-soft); display:flex; justify-content:flex-end; gap: 8px; }

/* ---------------------------------------------------- */
/* WORDMARK / LOCKUP / MONOGRAM / FACET GLYPH           */
/* ---------------------------------------------------- */
.t-wm {
  font-family: var(--t-display); font-weight: 300;
  letter-spacing: -0.04em; line-height: 1;
  color: var(--t-ink);
  display: inline-flex; align-items: baseline;
}
.t-wm .dot { color: var(--t-ink); }
.t-wm--xxl { font-size: 180px; }
.t-wm--xl  { font-size: 96px; }
.t-wm--lg  { font-size: 56px; }
.t-wm--md  { font-size: 28px; }
.t-wm--sm  { font-size: 16px; letter-spacing: -0.025em; }

.t-lockup {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--t-ink);
}
.t-lockup__mark { width: 28px; height: 28px; display:inline-flex; align-items:center; justify-content:center; }
.t-lockup__mark svg { width: 100%; height: 100%; }
.t-lockup--stack { flex-direction: column; gap: 12px; align-items: flex-start; }

.t-monogram {
  display:inline-flex; align-items:center; justify-content:center;
  width: 56px; height: 56px;
  border: 1.5px solid var(--t-ink);
  font-family: var(--t-display); font-weight: 300; font-size: 34px;
  letter-spacing: -0.04em;
  color: var(--t-ink); background: var(--t-bg);
}

/* The tesseract SVG helper class — author provides the SVG */
.t-tess { color: var(--t-ink); }
.t-tess--inv { color: var(--t-bg); }

/* ---------------------------------------------------- */
/* PRODUCT LOCKUP                                        */
/* ---------------------------------------------------- */
.t-product {
  border: 1px solid var(--t-line); background: var(--t-surface);
  padding: 22px;
  display:flex; flex-direction:column; gap: 10px;
}
.t-product__parent {
  font-family: var(--t-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--t-muted);
  display:flex; gap: 8px; align-items: center;
}
.t-product__parent .sep { width:10px; height:1px; background: var(--t-line); }
.t-product__name {
  font-family: var(--t-display); font-weight: 300;
  font-size: 44px; letter-spacing: -0.035em; line-height: 1;
  color: var(--t-ink);
}
.t-product__desc { font-size: 14px; line-height: 1.55; color: var(--t-ink-2); }

/* ---------------------------------------------------- */
/* SKIN PANEL (client dress preview)                     */
/* ---------------------------------------------------- */
.t-skin {
  border: 1px solid var(--t-line); background: var(--t-surface);
  padding: 20px;
  display:flex; flex-direction: column; gap: 12px;
}
.t-skin__head {
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--t-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-muted);
}
.t-skin__name {
  font-family: var(--t-display); font-weight: 300;
  font-size: 40px; letter-spacing: -0.035em; line-height: 1;
  color: var(--t-ink);
}
.t-skin__pill {
  display:inline-flex; align-self: flex-start;
  font-family: var(--t-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--t-line); padding: 3px 8px;
}
.t-skin__swatches { display:flex; gap:6px; }
.t-skin__swatches span { width: 22px; height: 22px; border: 1px solid var(--t-line); }
.t-skin__meta {
  font-family: var(--t-mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--t-muted);
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px;
  padding-top: 10px; border-top: 1px solid var(--t-line-soft);
}
.t-skin__meta span:nth-child(odd) { letter-spacing: 0.14em; text-transform: uppercase; }
.t-skin__meta span:nth-child(even) { color: var(--t-ink-2); }

/* ---------------------------------------------------- */
/* CLEARSPACE / RULE GUIDES (for brand docs)             */
/* ---------------------------------------------------- */
.t-guide {
  position: relative; display: inline-block;
}
.t-guide__pad {
  position: absolute; inset: 0;
  border: 1px dashed oklch(0.60 0.20 25 / 0.5);
  pointer-events: none;
}
.t-guide__mark {
  position: absolute; font-family: var(--t-mono); font-size: 10px;
  color: oklch(0.60 0.20 25); letter-spacing: 0.1em; background: var(--t-bg); padding: 0 4px;
}