/*
 * Primitives — the finite set of v1 building blocks. Spec 001, plan § "Naming and component contracts".
 * Unlayered class selectors: they win over the legacy Tailwind layers.
 */

/* Layout */
.ipl-container {
  width: 100%;
  max-width: var(--width-shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.ipl-stack > * + * { margin-block-start: var(--stack-space, var(--space-4)); }
.ipl-cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-space, var(--space-2)); align-items: center; }

.ipl-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Links */
.ipl-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.ipl-link:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
.ipl-link:visited { color: var(--color-visited); }
.ipl-link--quiet { text-decoration: none; }
.ipl-link--quiet:hover { text-decoration: underline; }

/* Buttons — primary (filled), secondary (outlined), tertiary (text). */
.ipl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target-comfort);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--weight-semibold) var(--text-sm) / var(--leading-snug) var(--font-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-control), border-color var(--duration-control), color var(--duration-control);
}
.ipl-button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ipl-button--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.ipl-button--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}
.ipl-button--tertiary {
  min-height: var(--target-min);
  padding-inline: var(--space-2);
  border-color: transparent;
  background: transparent;
  color: var(--color-primary);
}
.ipl-button--tertiary:hover { border-color: transparent; text-decoration: underline; }
.ipl-button--icon { padding: var(--space-2); min-width: var(--target-comfort); }
.ipl-button[disabled], .ipl-button[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }

/* Form controls */
.ipl-input {
  width: 100%;
  min-height: var(--target-comfort);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--weight-regular) var(--text-sm) / var(--leading-normal) var(--font-ui);
}
.ipl-input::placeholder { color: var(--color-muted); opacity: 1; }
.ipl-label { display: block; margin-block-end: var(--space-1); font-weight: var(--weight-semibold); }
.ipl-hint { color: var(--color-muted); font-size: var(--text-xs); }

/* Badges — status always carries text, never color alone */
.ipl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
}
.ipl-badge--success { background: var(--color-success-soft); color: var(--color-success); }
.ipl-badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.ipl-badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.ipl-badge--neutral { background: var(--color-page); color: var(--color-muted); border: var(--border-width) solid var(--color-divider); }

/* Panel — the only card. Flat by default; borders and whitespace group content. */
.ipl-panel {
  padding: var(--space-4) var(--space-6);
  border: var(--border-width) solid var(--color-divider);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}
.ipl-panel--quiet { background: var(--color-page); }
.ipl-panel__title {
  margin: 0 0 var(--space-3);
  font: var(--weight-semibold) var(--text-sm) / var(--leading-snug) var(--font-ui);
  color: var(--color-text);
}

/* Notice — status messages (loading, empty, unavailable) */
.ipl-notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-inline-start: 4px solid var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-text);
}
.ipl-notice--warning { border-color: var(--color-warning); background: var(--color-warning-soft); }
.ipl-notice--danger { border-color: var(--color-danger); background: var(--color-danger-soft); }

/* Icon (from _includes/components/atoms/icon.html) */
.ipl-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ipl-icon--sm { width: 1rem; height: 1rem; }

/* Divider */
.ipl-divider { border: 0; border-block-start: var(--border-width) solid var(--color-divider); margin-block: var(--space-6); }

@media (forced-colors: active) {
  .ipl-button--primary { border: 2px solid ButtonText; }
  .ipl-badge, .ipl-notice { border: 1px solid CanvasText; }
}

/* Skip link: first focusable element, visible on focus (spec 001 AC9) */
.ipl-skip {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--weight-semibold);
  transform: translateY(-200%);
}
.ipl-skip:focus { transform: none; }