/* =============================================================
   APEX -- Components UI Kit
   Composable, reusable component styles. HTML-first (works with
   plain markup); React wrappers live in components.jsx.

   Drop into any page:
     <link rel="stylesheet" href="ui_kits/components/kit.css">
   ============================================================= */
@import url("../../colors_and_type.css");

/* -------------------------------------------------------------
   BUTTON                                                  .ax-btn
   Square, mono, uppercase. Three tones (ink/accent/ghost),
   two sizes (md default, sm).
   ------------------------------------------------------------- */
.ax-btn {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper-0);
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: 0;
  transition: var(--motion-hover), var(--motion-press);
}
.ax-btn:hover         { background: var(--orange); border-color: var(--orange); color: var(--paper-0); }
.ax-btn:active        { background: var(--ink); border-color: var(--ink); color: var(--paper-0); transform: translateY(0); }
.ax-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ax-btn[disabled], .ax-btn.is-disabled {
  background: transparent; color: var(--paper-2); border-color: var(--paper-2); cursor: not-allowed;
}

.ax-btn--accent       { background: var(--orange); border-color: var(--orange); }
.ax-btn--accent:hover { background: var(--orange-deep); border-color: var(--orange-deep); }
.ax-btn--ghost        { background: transparent; color: var(--ink); }
.ax-btn--ghost:hover  { background: var(--orange); border-color: var(--orange); color: var(--paper-0); }

.ax-btn--sm           { font-size: var(--t-xs); padding: 7px 11px; }
.ax-btn--lg           { font-size: var(--t-base); padding: 14px 22px; }
.ax-btn--block        { display: flex; width: 100%; justify-content: center; }

/* -------------------------------------------------------------
   INPUT / TEXTAREA / SELECT                            .ax-input
   ------------------------------------------------------------- */
.ax-field { display: flex; flex-direction: column; gap: 4px; }
.ax-label {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--ink);
}
.ax-hint  {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: 0.04em; color: var(--fg-2);
}
.ax-hint--error { color: var(--status-error); }
.ax-input, .ax-select, .ax-textarea {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  padding: 9px 11px;
  background: var(--paper-0);
  border: 1px solid var(--ink);
  color: var(--ink);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  transition: var(--motion-focus), var(--motion-hover);
}
.ax-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.ax-input::placeholder, .ax-textarea::placeholder { color: var(--fg-ghost); }
.ax-input:focus, .ax-select:focus, .ax-textarea:focus {
  border-color: var(--orange);
  box-shadow: inset 0 0 0 1px var(--orange);
}
.ax-input[aria-invalid="true"], .ax-textarea[aria-invalid="true"] {
  border-color: var(--status-error);
  box-shadow: inset 0 0 0 1px var(--status-error);
}
.ax-input[disabled] { background: var(--paper-1); color: var(--fg-2); cursor: not-allowed; }

/* Checkbox + radio -- square, ink border, orange fill on check */
.ax-check, .ax-radio {
  width: 16px; height: 16px;
  border: 1px solid var(--ink);
  background: var(--paper-0);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  appearance: none;
  margin: 0;
  flex-shrink: 0;
  transition: var(--motion-hover);
}
.ax-radio { border-radius: 50%; }
.ax-check:checked { background: var(--orange); border-color: var(--orange); }
.ax-check:checked::after {
  content: ""; width: 8px; height: 4px;
  border: 2px solid var(--paper-0); border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
.ax-radio:checked { background: var(--paper-0); border-color: var(--orange); }
.ax-radio:checked::after {
  content: ""; width: 8px; height: 8px; background: var(--orange); border-radius: 50%;
}
.ax-check:focus-visible, .ax-radio:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* -------------------------------------------------------------
   BADGE                                                .ax-badge
   Border-only by default; status variants color the border + fg.
   ------------------------------------------------------------- */
.ax-badge {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 4px 7px 3px;
  line-height: 1;
  border: 1px solid var(--ink);
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent;
  border-radius: 0;
}
.ax-badge--ink    { background: var(--ink); color: var(--paper-0); border-color: var(--ink); }
.ax-badge--accent { background: var(--orange); color: var(--paper-0); border-color: var(--orange); }
.ax-badge--ok     { border-color: var(--status-ok);    color: var(--status-ok); }
.ax-badge--warn   { border-color: var(--status-warn);  color: var(--status-warn); }
.ax-badge--error  { border-color: var(--status-error); color: var(--status-error); }
.ax-badge--info   { border-color: var(--status-info);  color: var(--status-info); }

/* -------------------------------------------------------------
   STATUS INDICATOR                                    .ax-status
   Three forms:
     - .ax-status--dot   : 8px solid square with a labelled value
     - .ax-status--inline: inline text + dot (table cells, lists)
     - .ax-status--block : full-width state surface (banners)
   ------------------------------------------------------------- */
.ax-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink); }
.ax-status__dot { width: 8px; height: 8px; flex-shrink: 0; background: var(--status-neutral); }
.ax-status[data-tone="ok"]      .ax-status__dot { background: var(--status-ok); }
.ax-status[data-tone="warn"]    .ax-status__dot { background: var(--status-warn); }
.ax-status[data-tone="error"]   .ax-status__dot { background: var(--status-error); }
.ax-status[data-tone="info"]    .ax-status__dot { background: var(--status-info); }
.ax-status[data-tone="neutral"] .ax-status__dot { background: var(--status-neutral); }

.ax-status--inline { /* same as base */ }
.ax-status--block {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  background: var(--bg-raised);
  width: 100%;
  box-sizing: border-box;
  text-transform: none;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  color: var(--fg);
}
.ax-status--block .ax-status__dot { margin-top: 4px; width: 10px; height: 10px; }
.ax-status--block[data-tone="ok"]    { background: var(--status-ok-bg);    border-color: var(--status-ok); }
.ax-status--block[data-tone="warn"]  { background: var(--status-warn-bg);  border-color: var(--status-warn); }
.ax-status--block[data-tone="error"] { background: var(--status-error-bg); border-color: var(--status-error); }
.ax-status--block[data-tone="info"]  { background: var(--status-info-bg);  border-color: var(--status-info); }
.ax-status--block .ax-status__body  { display: flex; flex-direction: column; gap: 4px; }
.ax-status--block .ax-status__title { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink); }
.ax-status--block .ax-status__msg   { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--fg-1); }

/* -------------------------------------------------------------
   CARD                                                  .ax-card
   A card is a miniature poster. 1px ink hairline, square, no
   shadow. Header row, body, footer row.
   ------------------------------------------------------------- */
.ax-card {
  background: var(--bg-raised);
  border: 1px solid var(--ink);
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  border-radius: 0;
}
.ax-card--sunk { background: var(--bg-sunk); }
.ax-card--inverse { background: var(--ink); color: var(--paper-0); }
.ax-card__head, .ax-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--fg-2);
}
.ax-card--inverse .ax-card__head, .ax-card--inverse .ax-card__foot { color: var(--paper-2); }
.ax-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); letter-spacing: -0.01em; line-height: 1.1; color: inherit; }
.ax-card__body  { font-family: var(--font-sans); font-size: var(--t-sm); line-height: 1.55; color: var(--fg-1); }
.ax-card--inverse .ax-card__body { color: var(--paper-2); }
.ax-card__rule  { height: 1px; background: var(--rule); }
.ax-card--inverse .ax-card__rule { background: var(--paper-2); }

/* -------------------------------------------------------------
   OVERLAYS                            .ax-modal / popover / drawer
   Flat, hairline-led elevation. Scrim is a paper-tone wash, NOT
   a translucent black. Surface is bg-raised with a 1px ink rule.
   ------------------------------------------------------------- */
.ax-scrim {
  position: fixed; inset: 0;
  background: rgba(233, 231, 226, 0.78); /* paper-tinted, not black */
  backdrop-filter: saturate(0.9);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: var(--motion-overlay-out);
}
.ax-scrim[data-open="true"] {
  opacity: 1; pointer-events: auto;
  transition: var(--motion-overlay-in);
}

/* MODAL ---------------------------------------------------- */
.ax-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%);
  width: min(560px, calc(100vw - 48px));
  max-height: calc(100vh - 80px);
  background: var(--bg-raised);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow-overlay);
  z-index: 1010;
  opacity: 0;
  pointer-events: none;
  display: flex; flex-direction: column;
  transition: var(--motion-overlay-out);
  border-radius: 0;
}
.ax-modal[data-open="true"] {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: var(--motion-overlay-in);
}
.ax-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--ink);
}
.ax-modal__head-left { display: flex; flex-direction: column; gap: 4px; }
.ax-modal__eyebrow {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--fg-2);
}
.ax-modal__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-lg); letter-spacing: -0.01em; line-height: 1.15; color: var(--ink);
}
.ax-modal__close {
  background: transparent; border: 1px solid var(--ink); width: 26px; height: 26px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink); padding: 0;
  transition: var(--motion-hover);
}
.ax-modal__close:hover { background: var(--orange); border-color: var(--orange); color: var(--paper-0); }
.ax-modal__body {
  padding: 14px 16px;
  font-family: var(--font-sans); font-size: var(--t-sm); line-height: 1.55; color: var(--fg-1);
  overflow: auto;
}
.ax-modal__foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--ink);
  background: var(--paper-1);
}

/* POPOVER -------------------------------------------------- */
.ax-popover {
  position: absolute;
  min-width: 220px; max-width: 320px;
  background: var(--bg-raised);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow-float);
  z-index: 950;
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: var(--motion-overlay-out);
}
.ax-popover[data-open="true"] { opacity: 1; pointer-events: auto; transform: translateY(0); transition: var(--motion-overlay-in); }
.ax-popover__head {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--paper-0); background: var(--ink);
  padding: 6px 10px;
}
.ax-popover__body { padding: 10px 12px; font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.5; color: var(--fg-1); }
.ax-popover__arrow {
  position: absolute; width: 10px; height: 10px;
  background: var(--bg-raised);
  border-left: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  top: -6px; left: 24px;
  transform: rotate(45deg);
}

/* DRAWER --------------------------------------------------- */
.ax-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(420px, 100vw);
  background: var(--bg-raised);
  border-left: 1px solid var(--ink);
  box-shadow: var(--shadow-overlay);
  z-index: 1010;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-base-d) var(--ease-out);
}
.ax-drawer[data-open="true"]   { transform: translateX(0); }
.ax-drawer--left               { left: 0; right: auto; border-left: 0; border-right: 1px solid var(--ink); transform: translateX(-100%); }
.ax-drawer--left[data-open="true"] { transform: translateX(0); }
.ax-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--ink);
}
.ax-drawer__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-lg); letter-spacing: -0.01em; color: var(--ink);
}
.ax-drawer__close { /* reuse modal close */
  background: transparent; border: 1px solid var(--ink); width: 26px; height: 26px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink); padding: 0;
  transition: var(--motion-hover);
}
.ax-drawer__close:hover { background: var(--orange); border-color: var(--orange); color: var(--paper-0); }
.ax-drawer__body { flex: 1; overflow: auto; padding: 14px 16px; font-family: var(--font-sans); font-size: var(--t-sm); line-height: 1.55; color: var(--fg-1); }
.ax-drawer__foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 16px; border-top: 1px solid var(--ink); background: var(--paper-1);
}

/* -------------------------------------------------------------
   STATES                                              .ax-state
   Empty / loading / error patterns -- institutional voice.
   ------------------------------------------------------------- */
.ax-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 32px 28px;
  border: 1px solid var(--rule-soft);
  background: var(--bg-raised);
  max-width: 480px;
}
.ax-state__eyebrow {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 8px;
}
.ax-state__eyebrow .ax-status__dot { width: 8px; height: 8px; }
.ax-state__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-xl); letter-spacing: -0.01em; line-height: 1.05; color: var(--ink);
  text-transform: uppercase;
}
.ax-state__msg {
  font-family: var(--font-sans); font-size: var(--t-sm); line-height: 1.55; color: var(--fg-1);
}
.ax-state__actions { display: flex; gap: 8px; margin-top: 4px; }

/* Loading: teletype reveal of mono lines (animation lives in keyframes below). */
.ax-state--loading .ax-state__log {
  font-family: var(--font-mono); font-size: var(--t-sm); color: var(--fg-1);
  display: flex; flex-direction: column; gap: 4px;
}
.ax-state__log-line {
  overflow: hidden; white-space: nowrap;
  border-right: 2px solid var(--ink);
  animation: ax-teletype 1.2s steps(28, end) forwards,
             ax-caret 0.7s steps(1) infinite;
}
.ax-state__log-line:nth-child(2) { animation-delay: 1.0s, 1.0s; opacity: 0; animation-fill-mode: forwards; }
.ax-state__log-line:nth-child(3) { animation-delay: 2.0s, 2.0s; opacity: 0; animation-fill-mode: forwards; }

@keyframes ax-teletype { from { width: 0; opacity: 1; } to { width: 100%; opacity: 1; } }
@keyframes ax-caret    { 50% { border-color: transparent; } }

/* Skeleton-free loader: an indeterminate hairline bar instead. */
.ax-progress {
  position: relative;
  height: 2px;
  background: var(--paper-2);
  overflow: hidden;
}
.ax-progress::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 30%;
  background: var(--orange);
  animation: ax-progress 1.6s var(--ease-out) infinite;
}
@keyframes ax-progress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(380%); }
}

/* -------------------------------------------------------------
   MOTION                                              utilities
   .ax-enter / .ax-press / .ax-blink for one-off use.
   ------------------------------------------------------------- */
.ax-enter        { animation: ax-enter var(--t-base-d) var(--ease-out) both; }
.ax-enter--up    { animation: ax-enter-up var(--t-base-d) var(--ease-out) both; }
@keyframes ax-enter    { from { opacity: 0; } to { opacity: 1; } }
@keyframes ax-enter-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ax-blink        { animation: ax-blink 1.2s steps(2) infinite; }
@keyframes ax-blink { 50% { opacity: 0; } }