/* ────────────────────────────────────────────────────────────────────────────
 * components.css: component internals that used to be inline style=""
 * attributes, in the markup and in JS-built HTML.
 *
 * The CSP has no 'unsafe-inline' for styles, so a style attribute would be
 * refused. Styling lives here, built from tokens.css; JS only toggles classes
 * or sets dynamic values through CSSOM (el.style.x), which the CSP allows.
 * Loaded after tailwind.css and styles.css, so these win ties.
 * ──────────────────────────────────────────────────────────────────────────── */

/* ─── Tile card internals (grid and ring) ─── */
.tile-card--editable { cursor: pointer; }
.tile-card--ring { max-width: none; }

.tile-head {
  display: flex;
  align-items: flex-start;
  gap: var(--os-space-3);
}
.tile-icon {
  width: 48px;
  height: 48px;
  color: var(--os-orange);
  flex-shrink: 0;
}
.tile-titles {
  display: flex;
  flex-direction: column;
  gap: var(--os-space-1);
  min-width: 0;
}
.tile-name {
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.tile-desc {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--os-white-70);
  margin: 0;
}

/* Category + description fade in only on the focused ring tile (the
 * .ring-tile--focused rule in tailwind-source.css sets them visible). */
.ring-reveal {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 300ms ease, transform 300ms ease;
}

/* ─── Ring container + arrows ─── */
#ring-container {
  transform-style: preserve-3d;
  display: none; /* ring.js shows it via CSSOM once tiles are placed */
}

/* ─── Add-tile card, empty and error states ─── */
.add-tile-card__icon {
  width: 32px;
  height: 32px;
  color: var(--os-white-40);
}
.add-tile-card__label { color: var(--os-white-40); }

.empty-state__icon {
  width: 48px;
  height: 48px;
  opacity: 0.3;
  color: var(--os-white);
}
.empty-state__title { margin: 0; }
.empty-state__hint {
  color: var(--os-white-50);
  margin: 0;
}

/* ─── Inline delete confirmation (replaces an edit card's contents) ─── */
.delete-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--os-space-3);
  padding: var(--os-space-4);
  text-align: center;
  min-height: 120px;
}
.delete-confirm__title {
  margin: 0;
  font-size: 1rem;
}
.delete-confirm__name {
  color: var(--os-white-50);
  margin: 0;
}
.delete-confirm__actions {
  display: flex;
  gap: var(--os-space-3);
  margin-top: var(--os-space-1);
}

/* ─── Button modifiers ─── */
/* Destructive action: red fill, no pulse. */
.btn-danger {
  background-color: var(--os-danger);
  animation: none;
}
/* A CTA that shouldn't pulse (the dialog's Save). */
.btn-cta.btn-static { animation: none; }
/* The Ring/Grid toggle while edit mode is on (also disabled + aria-disabled). */
.btn-cta.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ─── Dialogs ─── */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--os-space-4);
}
.modal-header--spacious { margin-bottom: var(--os-space-5); }
.modal-title {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin: 0;
}
.modal-desc {
  color: var(--os-white-60);
  margin: 0 0 var(--os-space-4);
  line-height: 1.5;
}
.modal-surface--picker {
  width: min(90vw, 600px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.modal-surface--list {
  width: min(92vw, 640px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

/* ─── Tile form ─── */
.icon-field {
  display: flex;
  align-items: center;
  gap: var(--os-space-3);
}
.icon-preview-box {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--os-radius-lg);
  background: var(--os-white-05);
  border: 1px solid var(--os-white-10);
  flex-shrink: 0;
}
.icon-field__icon {
  width: 24px;
  height: 24px;
  color: var(--os-orange);
}
.icon-field__icon--empty { color: var(--os-white-30); }
.icon-field__label { color: var(--os-white); }
.icon-field__label.is-placeholder { color: var(--os-white-40); }
.form-input--button {
  text-align: left;
  cursor: pointer;
  flex: 1;
  transition: border-color 150ms ease, background-color 150ms ease, transform 100ms ease;
}
.form-input--button:hover {
  border-color: var(--os-white-40);
  background: var(--os-white-08);
}
.form-input--button:focus-visible {
  outline: 3px solid var(--os-orange);
  outline-offset: 3px;
  border-color: var(--os-orange);
}
.form-input--button:active { transform: scale(0.99); }

/* ─── Toast leaving (js/core/ui/toast.js; fade transition in tailwind-source.css) ─── */
.toast.is-leaving { opacity: 0; }
.form-actions {
  display: flex;
  gap: var(--os-space-3);
  justify-content: flex-end;
  margin-top: var(--os-space-5);
}

/* ─── Icon picker ─── */
.icon-preview-panel {
  display: flex;
  align-items: center;
  gap: var(--os-space-4);
  padding: var(--os-space-3);
  margin-bottom: var(--os-space-4);
  border-radius: var(--os-radius-lg);
  background: var(--os-white-03);
  border: 1px solid var(--os-white-08);
  min-height: 80px;
}
.icon-preview-large {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-preview__svg {
  width: 48px;
  height: 48px;
  color: var(--os-orange);
}
.icon-preview__svg--idle { color: var(--os-white-20); }
.icon-preview-name {
  margin: 0;
  color: var(--os-white-30);
}
.icon-preview-name.is-active { color: var(--os-white); }
.icon-search-wrap { margin-bottom: var(--os-space-4); }
.icon-grid {
  overflow-y: auto;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 4px;
  padding: 4px;
  min-height: 200px;
  max-height: 400px;
}
.icon-cell__icon {
  width: 20px;
  height: 20px;
  color: var(--os-white-60);
  pointer-events: none;
}

/* ─── Manage Deleted list ─── */
.deleted-list {
  overflow-y: auto;
  flex: 1;
  min-height: 120px;
  max-height: 50vh;
  display: flex;
  flex-direction: column;
  gap: var(--os-space-2);
}
.deleted-list__message { color: var(--os-white-60); }
.deleted-list__message--muted { color: var(--os-white-55); }
.deleted-list__message--error { color: var(--os-error); }
.deleted-row {
  display: flex;
  align-items: center;
  gap: var(--os-space-3);
  padding: var(--os-space-3);
  border-radius: var(--os-radius-lg);
  background: var(--os-white-04);
  border: 1px solid var(--os-white-08);
}
.deleted-row__meta {
  flex: 1;
  min-width: 0;
}
.deleted-row__name {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deleted-row__sub {
  margin: 0.15rem 0 0;
  color: var(--os-white-55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deleted-row__actions {
  display: flex;
  gap: var(--os-space-2);
  flex-shrink: 0;
}