/* =========================================================
   Blur UI foundations

   Additive, opt-in primitives. Existing screens are not yet
   migrated; use these `ui-*` classes for new or updated UI.
   ========================================================= */

/* ============ BUTTONS ============ */

.ui-button{
  min-height:var(--control-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  padding:0 var(--space-4);
  border:1px solid transparent;
  border-radius:var(--radius-md);
  background:var(--surface-raised);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--text-md);
  font-weight:600;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--speed) var(--ease-standard),
             border-color var(--speed) var(--ease-standard),
             color var(--speed) var(--ease-standard),
             transform var(--speed) var(--ease-standard),
             opacity var(--speed) var(--ease-standard);
}

.ui-button:hover{
  background:var(--surface-hover);
  border-color:var(--border-emphasis);
}

.ui-button:active:not(:disabled){
  transform:translateY(1px);
}

.ui-button:focus-visible,
.ui-icon-button:focus-visible,
.ui-field:focus-within{
  outline:none;
  box-shadow:var(--focus-ring);
}

.ui-button:disabled,
.ui-icon-button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.ui-button--primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg);
}

.ui-button--primary:hover{
  opacity:.88;
}

.ui-button--secondary{
  background:var(--surface-selected);
  border-color:var(--border-emphasis);
}

.ui-button--quiet{
  background:transparent;
  border-color:transparent;
  color:var(--text-secondary);
}

.ui-button--quiet:hover{
  background:var(--surface-raised);
  border-color:transparent;
  color:var(--text-primary);
}

.ui-button--danger:hover{
  background:var(--danger-dim);
  border-color:var(--danger-border);
  color:var(--danger);
}

.ui-button--sm{
  min-height:var(--control-h-sm);
  padding:0 var(--space-3);
  font-size:var(--text-sm);
}

.ui-button--lg{
  min-height:var(--control-h-lg);
  padding:0 var(--space-5);
}

/* ============ ICON BUTTONS ============ */

.ui-icon-button{
  width:var(--control-h);
  height:var(--control-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  padding:0;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-raised);
  color:var(--text-secondary);
  cursor:pointer;
  transition:background var(--speed) var(--ease-standard),
             border-color var(--speed) var(--ease-standard),
             color var(--speed) var(--ease-standard),
             transform var(--speed) var(--ease-standard),
             opacity var(--speed) var(--ease-standard);
}

.ui-icon-button:hover{
  background:var(--surface-hover);
  border-color:var(--border-emphasis);
  color:var(--text-primary);
}

.ui-icon-button:active:not(:disabled){ transform:translateY(1px); }
.ui-icon-button--sm{ width:var(--control-h-sm); height:var(--control-h-sm); }
.ui-icon-button--lg{ width:var(--control-h-lg); height:var(--control-h-lg); }
.ui-icon-button--active{ background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }

.ui-icon-button svg,
.ui-button svg{
  width:16px;
  height:16px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ============ FIELDS / SEARCH ============ */

.ui-field{
  min-height:var(--control-h);
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:0 var(--space-3);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-raised);
  color:var(--text-primary);
  transition:background var(--speed) var(--ease-standard),
             border-color var(--speed) var(--ease-standard),
             box-shadow var(--speed) var(--ease-standard);
}

.ui-field:hover{ border-color:var(--border-emphasis); }

.ui-field:focus-within{
  border-color:var(--accent);
  background:var(--surface-selected);
}

.ui-field--lg{ min-height:var(--control-h-lg); padding:0 var(--space-4); }
.ui-field--sm{ min-height:var(--control-h-sm); padding:0 var(--space-2); }

.ui-field__icon{
  width:16px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:var(--text-tertiary);
}

.ui-field__icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ui-field input,
.ui-field textarea{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text-primary);
  font:inherit;
  font-size:var(--text-body);
}

.ui-field textarea{
  min-height:72px;
  padding:var(--space-3) 0;
  resize:vertical;
}

.ui-field input::placeholder,
.ui-field textarea::placeholder{ color:var(--text-tertiary); }

/* ============ CARDS ============ */

.ui-card{
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-raised);
  color:var(--text-primary);
}

.ui-card--padded{ padding:var(--space-4); }
.ui-card--roomy{ padding:var(--space-5); }

.ui-card--interactive{
  cursor:pointer;
  transition:background var(--speed) var(--ease-standard),
             border-color var(--speed) var(--ease-standard),
             transform var(--speed) var(--ease-standard);
}

.ui-card--interactive:hover{
  background:var(--surface-selected);
  border-color:var(--border-emphasis);
  transform:translateY(-1px);
}

.ui-card--interactive:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}

.ui-card__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--border-subtle);
}

.ui-card__title{
  font-family:var(--font-display);
  font-size:var(--heading-section);
  font-weight:600;
  letter-spacing:-.01em;
}

.ui-card__body{ padding-top:var(--space-3); }

/* ============ SECTION HEADERS ============ */

.ui-section-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-4);
  margin-bottom:var(--space-3);
}

.ui-section-header__title{
  font-family:var(--font-display);
  font-size:var(--heading-section);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--text-primary);
}

.ui-section-header__eyebrow,
.ui-section-header__meta{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-tertiary);
}

.ui-section-header__eyebrow{ margin-bottom:var(--space-1); }

@media (max-width:768px){
  .ui-section-header{ align-items:flex-start; flex-direction:column; gap:var(--space-1); }
}

/* ============ EMPTY / ERROR / LOADING STATES ============ */

/* quiet empty state — mono-flavored, centered, no chrome */
.ui-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:var(--space-8) var(--space-4);
  text-align:center;
  color:var(--text-tertiary);
  font-family:var(--font-body);
  font-size:var(--text-sm);
  line-height:1.55;
}

.ui-error{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--danger-border);
  border-radius:var(--radius-md);
  background:var(--danger-dim);
  color:var(--text-secondary);
  font-family:var(--font-body);
  font-size:var(--text-sm);
  line-height:1.5;
}

/* ============ SPINNER ============ */

.ui-spinner{
  display:inline-block;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid var(--border-strong);
  border-top-color:var(--accent);
  animation:ui-spin .7s linear infinite;
}

.ui-spinner--sm{ width:12px; height:12px; border-width:2px; }

@keyframes ui-spin{
  to{ transform:rotate(360deg); }
}

/* shared skeleton pulse — media tabs reference this keyframe */
@keyframes ui-skeleton-pulse{
  0%, 100%{ opacity:.5; }
  50%{ opacity:1; }
}

/* ============ TABS (underline style) ============ */

.ui-tabs{
  display:flex;
  gap:var(--space-5);
  border-bottom:1px solid var(--border-subtle);
}

.ui-tabs button{
  height:36px;
  padding:0 2px;
  border:none;
  background:none;
  color:var(--text-secondary);
  font-family:var(--font-body);
  font-size:var(--text-sm);
  font-weight:500;
  position:relative;
  cursor:pointer;
  transition:color var(--speed) var(--ease-standard);
}

.ui-tabs button:hover{ color:var(--text-primary); }
.ui-tabs button.active{ color:var(--text-primary); }

.ui-tabs button.active::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  border-radius:var(--radius-sm);
  background:var(--accent);
}