ltcai 4.0.1 → 4.2.0

package/static/v3/css/lattice.components.css

@@ -1,472 +0,0 @@
-/* ============================================================================
- * Lattice AI v3 — Component primitives
- * The shared vocabulary every view composes from. Token-native, theme-aware.
- * ========================================================================== */
-
-/* ── Layout primitives ──────────────────────────────────────────────────── */
-.lt3-stack   { display: flex; flex-direction: column; gap: var(--lt3-space-4); }
-.lt3-stack-2 { display: flex; flex-direction: column; gap: var(--lt3-space-2); }
-.lt3-stack-3 { display: flex; flex-direction: column; gap: var(--lt3-space-3); }
-.lt3-stack-6 { display: flex; flex-direction: column; gap: var(--lt3-space-6); }
-.lt3-row     { display: flex; align-items: center; gap: var(--lt3-space-3); }
-.lt3-row-2   { display: flex; align-items: center; gap: var(--lt3-space-2); }
-.lt3-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lt3-space-2); }
-.lt3-spacer  { flex: 1 1 auto; }
-.lt3-grid    { display: grid; gap: var(--lt3-space-4); }
-.lt3-grid-auto {
-  display: grid;
-  gap: var(--lt3-space-4);
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-}
-.lt3-grid-2 { display: grid; gap: var(--lt3-space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.lt3-grid-3 { display: grid; gap: var(--lt3-space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
-
-/* ── Eyebrow / labels ───────────────────────────────────────────────────── */
-.lt3-eyebrow {
-  font-size: var(--lt3-text-2xs);
-  font-weight: var(--lt3-weight-semi);
-  letter-spacing: var(--lt3-tracking-caps);
-  text-transform: uppercase;
-  color: var(--faint);
-}
-.lt3-muted { color: var(--muted); }
-.lt3-faint { color: var(--faint); }
-.lt3-mono  { font-family: var(--lt3-font-mono); font-size: 0.92em; }
-
-/* ── Card / Panel ───────────────────────────────────────────────────────── */
-.lt3-card,
-.lt3-panel {
-  position: relative;
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: var(--lt3-radius-md);
-  box-shadow: var(--lt3-elev-1);
-}
-.lt3-panel { padding: var(--lt3-space-5); }
-.lt3-card  { padding: var(--lt3-space-4); }
-.lt3-card--flat { box-shadow: none; background: var(--surface-2); }
-.lt3-card--ghost { background: transparent; border-style: dashed; box-shadow: none; }
-.lt3-card--interactive { transition: transform var(--lt3-dur-2) var(--lt3-ease), border-color var(--lt3-dur-2) var(--lt3-ease), box-shadow var(--lt3-dur-2) var(--lt3-ease), background var(--lt3-dur-2) var(--lt3-ease); }
-.lt3-card--interactive:hover {
-  transform: translateY(-1px);
-  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
-  background: var(--surface);
-  box-shadow: var(--lt3-elev-1);
-}
-
-.lt3-panel__head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--lt3-space-3);
-  margin-bottom: var(--lt3-space-4);
-}
-.lt3-panel__title {
-  font-size: var(--lt3-text-md);
-  font-weight: var(--lt3-weight-semi);
-  letter-spacing: var(--lt3-tracking-tight);
-}
-.lt3-panel__sub { font-size: var(--lt3-text-sm); color: var(--muted); }
-
-/* ── Buttons ────────────────────────────────────────────────────────────── */
-.lt3-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--lt3-space-2);
-  height: 36px;
-  padding: 0 var(--lt3-space-4);
-  border-radius: var(--lt3-radius-sm);
-  border: 1px solid transparent;
-  font-size: var(--lt3-text-sm);
-  font-weight: var(--lt3-weight-semi);
-  white-space: nowrap;
-  transition: background var(--lt3-dur-2) var(--lt3-ease), border-color var(--lt3-dur-2) var(--lt3-ease), transform var(--lt3-dur-1) var(--lt3-ease), color var(--lt3-dur-2) var(--lt3-ease);
-}
-.lt3-btn:active { transform: translateY(1px); }
-.lt3-btn[disabled] { opacity: 0.5; pointer-events: none; }
-.lt3-btn .ti { font-size: 1.05rem; }
-
-.lt3-btn--primary { background: var(--accent); color: var(--lt3-on-accent); box-shadow: var(--lt3-elev-1); }
-.lt3-btn--primary:hover { background: var(--accent-deep); }
-.lt3-btn--ghost { background: var(--surface-2); border-color: var(--border); color: var(--text); }
-.lt3-btn--ghost:hover { border-color: var(--border-strong); background: var(--surface-3); }
-.lt3-btn--subtle { background: transparent; color: var(--muted); }
-.lt3-btn--subtle:hover { background: var(--surface-2); color: var(--text); }
-.lt3-btn--danger { background: var(--lt3-err-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
-.lt3-btn--danger:hover { background: color-mix(in srgb, var(--danger) 24%, transparent); }
-.lt3-btn--sm { height: 30px; padding: 0 var(--lt3-space-3); font-size: var(--lt3-text-xs); }
-.lt3-btn--lg { height: 42px; padding: 0 var(--lt3-space-5); font-size: var(--lt3-text-sm); }
-.lt3-btn--block { width: 100%; }
-
-.lt3-iconbtn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: var(--lt3-radius-sm);
-  color: var(--muted);
-  transition: background var(--lt3-dur-2) var(--lt3-ease), color var(--lt3-dur-2) var(--lt3-ease);
-}
-.lt3-iconbtn:hover { background: var(--surface-2); color: var(--text); }
-.lt3-iconbtn .ti { font-size: 1.2rem; }
-.lt3-iconbtn--sm { width: 30px; height: 30px; }
-
-/* ── Inputs ─────────────────────────────────────────────────────────────── */
-.lt3-input, .lt3-select, .lt3-textarea {
-  width: 100%;
-  height: 38px;
-  padding: 0 var(--lt3-space-3);
-  background: var(--input);
-  border: 1px solid var(--border);
-  border-radius: var(--lt3-radius-sm);
-  color: var(--text);
-  font-size: var(--lt3-text-sm);
-  transition: border-color var(--lt3-dur-2) var(--lt3-ease), box-shadow var(--lt3-dur-2) var(--lt3-ease);
-}
-.lt3-textarea { height: auto; min-height: 96px; padding: var(--lt3-space-3) var(--lt3-space-4); line-height: var(--lt3-leading-snug); }
-.lt3-input::placeholder, .lt3-textarea::placeholder { color: var(--faint); }
-.lt3-input:focus, .lt3-select:focus, .lt3-textarea:focus {
-  outline: none;
-  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
-  box-shadow: 0 0 0 3px var(--accent-soft);
-}
-.lt3-field { display: flex; flex-direction: column; gap: var(--lt3-space-2); }
-.lt3-label { font-size: var(--lt3-text-xs); font-weight: var(--lt3-weight-medium); color: var(--muted); }
-.lt3-help { font-size: var(--lt3-text-xs); color: var(--faint); }
-
-.lt3-search {
-  display: flex;
-  align-items: center;
-  gap: var(--lt3-space-2);
-  height: 40px;
-  padding: 0 var(--lt3-space-4);
-  background: var(--input);
-  border: 1px solid var(--border);
-  border-radius: var(--lt3-radius-pill);
-}
-.lt3-search .ti { color: var(--faint); font-size: 1.15rem; }
-.lt3-search input { flex: 1; height: 100%; background: none; border: none; outline: none; font-size: var(--lt3-text-md); }
-
-/* ── Pills / badges / chips ─────────────────────────────────────────────── */
-.lt3-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--lt3-space-1);
-  height: 24px;
-  padding: 0 var(--lt3-space-3);
-  border-radius: var(--lt3-radius-pill);
-  font-size: var(--lt3-text-2xs);
-  font-weight: var(--lt3-weight-semi);
-  letter-spacing: var(--lt3-tracking-wide);
-  background: var(--surface-2);
-  color: var(--muted);
-  border: 1px solid var(--border);
-}
-.lt3-pill--ok   { background: var(--lt3-ok-soft);   color: var(--success); border-color: transparent; }
-.lt3-pill--warn { background: var(--lt3-warn-soft); color: var(--warning); border-color: transparent; }
-.lt3-pill--err  { background: var(--lt3-err-soft);  color: var(--danger);  border-color: transparent; }
-.lt3-pill--info { background: var(--accent-soft);   color: var(--accent);  border-color: transparent; }
-.lt3-pill--dot::before {
-  content: ""; width: 6px; height: 6px; border-radius: 99px;
-  background: currentColor; display: inline-block;
-}
-
-.lt3-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--lt3-space-2);
-  height: 30px;
-  padding: 0 var(--lt3-space-3);
-  border-radius: var(--lt3-radius-pill);
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  font-size: var(--lt3-text-xs);
-  font-weight: var(--lt3-weight-medium);
-  color: var(--text);
-  transition: border-color var(--lt3-dur-2) var(--lt3-ease), background var(--lt3-dur-2) var(--lt3-ease);
-}
-.lt3-chip[data-active="true"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); color: var(--accent); }
-.lt3-chip:hover { border-color: var(--border-strong); }
-
-.lt3-kbd {
-  display: inline-flex;
-  align-items: center;
-  height: 20px;
-  padding: 0 6px;
-  border-radius: 5px;
-  background: var(--surface-3);
-  border: 1px solid var(--border);
-  border-bottom-width: 2px;
-  font-family: var(--lt3-font-mono);
-  font-size: var(--lt3-text-2xs);
-  color: var(--muted);
-}
-
-/* Data-provenance tag: clearly marks unavailable vs live data */
-.lt3-source {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--lt3-space-1);
-  height: 20px;
-  padding: 0 var(--lt3-space-2);
-  border-radius: var(--lt3-radius-pill);
-  font-size: var(--lt3-text-2xs);
-  font-weight: var(--lt3-weight-semi);
-  letter-spacing: var(--lt3-tracking-wide);
-  text-transform: uppercase;
-}
-.lt3-source--unavailable { background: var(--lt3-warn-soft); color: var(--warning); }
-.lt3-source--live { background: var(--lt3-ok-soft); color: var(--success); }
-.lt3-source--pending { background: var(--surface-2); color: var(--faint); }
-
-/* ── Stat tile ──────────────────────────────────────────────────────────── */
-.lt3-stat {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: start;
-  gap: var(--lt3-space-2);
-  min-height: 88px;
-  padding: var(--lt3-space-4);
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: var(--lt3-radius-md);
-}
-.lt3-stat__label {
-  grid-column: 1 / -1;
-  font-size: var(--lt3-text-xs);
-  color: var(--muted);
-  display: flex;
-  align-items: center;
-  gap: var(--lt3-space-2);
-}
-.lt3-stat__label .ti {
-  display: inline-grid;
-  place-items: center;
-  width: 24px;
-  height: 24px;
-  border-radius: var(--lt3-radius-xs);
-  background: var(--surface-2);
-  color: var(--accent);
-}
-.lt3-stat__value { font-size: var(--lt3-text-2xl); font-weight: var(--lt3-weight-bold); letter-spacing: var(--lt3-tracking-tight); line-height: 1.1; }
-.lt3-stat__delta { justify-self: end; font-size: var(--lt3-text-2xs); color: var(--muted); }
-.lt3-stat__delta--up { color: var(--success); }
-.lt3-stat__delta--down { color: var(--danger); }
-
-/* ── Tables ─────────────────────────────────────────────────────────────── */
-.lt3-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--lt3-text-sm); }
-.lt3-table th {
-  text-align: left;
-  font-size: var(--lt3-text-2xs);
-  font-weight: var(--lt3-weight-semi);
-  letter-spacing: var(--lt3-tracking-caps);
-  text-transform: uppercase;
-  color: var(--faint);
-  padding: var(--lt3-space-3) var(--lt3-space-4);
-  border-bottom: 1px solid var(--border);
-  position: sticky; top: 0; background: var(--surface-elevated); z-index: 1;
-}
-.lt3-table td {
-  padding: var(--lt3-space-3) var(--lt3-space-4);
-  border-bottom: 1px solid var(--line);
-  vertical-align: middle;
-}
-.lt3-table tr:last-child td { border-bottom: none; }
-.lt3-table tbody tr { transition: background var(--lt3-dur-1) var(--lt3-ease); }
-.lt3-table tbody tr:hover { background: var(--surface-2); }
-.lt3-table--clip { border: 1px solid var(--border); border-radius: var(--lt3-radius-md); overflow: hidden; background: var(--card); }
-
-/* ── List rows ──────────────────────────────────────────────────────────── */
-.lt3-list { display: flex; flex-direction: column; }
-.lt3-list__item {
-  display: flex;
-  align-items: center;
-  gap: var(--lt3-space-3);
-  padding: var(--lt3-space-3) var(--lt3-space-1);
-  border-bottom: 1px solid var(--line);
-}
-.lt3-list__item:last-child { border-bottom: none; }
-.lt3-list__body { flex: 1; min-width: 0; }
-.lt3-list__title { font-weight: var(--lt3-weight-medium); font-size: var(--lt3-text-sm); }
-.lt3-list__meta { font-size: var(--lt3-text-xs); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-/* ── Tabs / segmented ───────────────────────────────────────────────────── */
-.lt3-tabs { display: inline-flex; gap: var(--lt3-space-1); border-bottom: 1px solid var(--border); }
-.lt3-tab {
-  padding: var(--lt3-space-3) var(--lt3-space-4);
-  font-size: var(--lt3-text-sm);
-  font-weight: var(--lt3-weight-medium);
-  color: var(--muted);
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  transition: color var(--lt3-dur-2) var(--lt3-ease), border-color var(--lt3-dur-2) var(--lt3-ease);
-}
-.lt3-tab[data-active="true"] { color: var(--text); border-bottom-color: var(--accent); }
-.lt3-tab:hover { color: var(--text); }
-
-.lt3-seg {
-  display: inline-flex;
-  padding: 3px;
-  gap: 2px;
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: var(--lt3-radius-md);
-}
-.lt3-seg button {
-  padding: var(--lt3-space-2) var(--lt3-space-3);
-  border-radius: var(--lt3-radius-sm);
-  font-size: var(--lt3-text-xs);
-  font-weight: var(--lt3-weight-semi);
-  color: var(--muted);
-  transition: background var(--lt3-dur-2) var(--lt3-ease), color var(--lt3-dur-2) var(--lt3-ease);
-}
-.lt3-seg button[data-active="true"] { background: var(--surface); color: var(--text); box-shadow: var(--lt3-elev-1); }
-
-/* ── Toggle switch ──────────────────────────────────────────────────────── */
-.lt3-switch { position: relative; display: inline-flex; width: 42px; height: 24px; flex: none; }
-.lt3-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
-.lt3-switch span {
-  position: absolute; inset: 0;
-  background: var(--surface-3);
-  border: 1px solid var(--border);
-  border-radius: 99px;
-  transition: background var(--lt3-dur-2) var(--lt3-ease);
-}
-.lt3-switch span::after {
-  content: ""; position: absolute; top: 2px; left: 2px;
-  width: 18px; height: 18px; border-radius: 99px;
-  background: var(--surface); box-shadow: var(--lt3-elev-1);
-  transition: transform var(--lt3-dur-2) var(--lt3-ease);
-}
-.lt3-switch input:checked + span { background: var(--accent); border-color: transparent; }
-.lt3-switch input:checked + span::after { transform: translateX(18px); }
-
-/* ── Meter / progress ───────────────────────────────────────────────────── */
-.lt3-meter { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
-.lt3-meter__fill { height: 100%; border-radius: 99px; background: var(--accent); transition: width var(--lt3-dur-4) var(--lt3-ease); }
-.lt3-meter__fill--vector { background: var(--lt3-pillar-vector); }
-.lt3-meter__fill--graph  { background: var(--lt3-pillar-graph); }
-.lt3-meter__fill--hybrid { background: var(--lt3-pillar-hybrid); }
-.lt3-meter__fill--ok { background: var(--success); }
-.lt3-meter__fill--warn { background: var(--warning); }
-
-/* ── Avatar ─────────────────────────────────────────────────────────────── */
-.lt3-avatar {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 32px; height: 32px; flex: none;
-  border-radius: var(--lt3-radius-sm);
-  background: var(--accent-soft);
-  color: var(--accent);
-  font-size: var(--lt3-text-xs);
-  font-weight: var(--lt3-weight-bold);
-  text-transform: uppercase;
-}
-
-/* ── States: empty / loading / error ────────────────────────────────────── */
-.lt3-empty {
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  gap: var(--lt3-space-3);
-  min-height: 220px;
-  padding: var(--lt3-space-7) var(--lt3-space-5);
-  text-align: center;
-  color: var(--muted);
-  background:
-    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 64%, transparent), transparent);
-  border: 1px dashed var(--border);
-  border-radius: var(--lt3-radius-md);
-}
-.lt3-empty__icon {
-  display: grid; place-items: center;
-  width: 44px; height: 44px;
-  border-radius: var(--lt3-radius-md);
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  color: var(--faint);
-}
-.lt3-empty__icon .ti { font-size: 1.35rem; }
-.lt3-empty__title { font-size: var(--lt3-text-md); font-weight: var(--lt3-weight-semi); color: var(--text); }
-.lt3-empty__body { font-size: var(--lt3-text-sm); max-width: 38ch; }
-
-.lt3-skel {
-  border-radius: var(--lt3-radius-sm);
-  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
-  background-size: 400% 100%;
-  animation: lt3-shimmer 1.4s var(--lt3-ease) infinite;
-}
-.lt3-skel--line { height: 12px; margin: 6px 0; }
-.lt3-skel--block { height: 84px; }
-@keyframes lt3-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
-
-.lt3-spinner {
-  width: 18px; height: 18px;
-  border: 2px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 99px;
-  animation: lt3-spin 0.7s linear infinite;
-}
-@keyframes lt3-spin { to { transform: rotate(360deg); } }
-
-.lt3-banner {
-  display: flex; align-items: flex-start; gap: var(--lt3-space-3);
-  padding: var(--lt3-space-3) var(--lt3-space-4);
-  border-radius: var(--lt3-radius-md);
-  font-size: var(--lt3-text-sm);
-  border: 1px solid var(--border);
-  background: var(--surface-2);
-}
-.lt3-banner--info { background: var(--accent-soft); border-color: transparent; color: var(--text); }
-.lt3-banner--warn { background: var(--lt3-warn-soft); border-color: transparent; }
-.lt3-banner--err  { background: var(--lt3-err-soft); border-color: transparent; }
-.lt3-banner .ti { font-size: 1.15rem; margin-top: 1px; }
-
-/* ── Toolbar ────────────────────────────────────────────────────────────── */
-.lt3-toolbar {
-  display: flex;
-  align-items: center;
-  gap: var(--lt3-space-3);
-  flex-wrap: wrap;
-}
-
-/* ── Code block ─────────────────────────────────────────────────────────── */
-.lt3-code {
-  font-family: var(--lt3-font-mono);
-  font-size: var(--lt3-text-xs);
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: var(--lt3-radius-sm);
-  padding: var(--lt3-space-3) var(--lt3-space-4);
-  overflow: auto;
-  white-space: pre;
-  color: var(--text);
-}
-
-/* ── Divider ────────────────────────────────────────────────────────────── */
-.lt3-divider { height: 1px; background: var(--border); border: none; margin: var(--lt3-space-2) 0; }
-
-/* ── Toast ──────────────────────────────────────────────────────────────── */
-.lt3-toasts {
-  position: fixed;
-  bottom: var(--lt3-space-5);
-  right: var(--lt3-space-5);
-  z-index: var(--lt3-z-toast);
-  display: flex; flex-direction: column; gap: var(--lt3-space-2);
-  pointer-events: none;
-}
-.lt3-toast {
-  pointer-events: auto;
-  display: flex; align-items: center; gap: var(--lt3-space-3);
-  min-width: 240px; max-width: 380px;
-  padding: var(--lt3-space-3) var(--lt3-space-4);
-  background: var(--surface-elevated);
-  border: 1px solid var(--border);
-  border-radius: var(--lt3-radius-md);
-  box-shadow: var(--lt3-elev-2);
-  font-size: var(--lt3-text-sm);
-  animation: lt3-toast-in var(--lt3-dur-3) var(--lt3-ease-out);
-}
-.lt3-toast--ok   { border-left: 3px solid var(--success); }
-.lt3-toast--err  { border-left: 3px solid var(--danger); }
-.lt3-toast--info { border-left: 3px solid var(--accent); }
-@keyframes lt3-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }