/*
 * Rhyddid Template 0.14.0
 * Resilient workflow, connection, synchronization, queue, recovery, and
 * asynchronous-state presentation. Components own all actual behavior.
 */

/* --------------------------------------------------------------------------
   Shared connection and workflow status regions
   -------------------------------------------------------------------------- */

:where(
  .connection-status,
  .sync-status,
  .live-status,
  .workflow-status,
  .resilience-status,
  [data-connection-state],
  [data-sync-state]
) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.8rem;
  align-items: center;
  min-width: 0;
  padding: 0.65rem 0.8rem;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

:where(
  .connection-status,
  .sync-status,
  .live-status,
  .workflow-status,
  .resilience-status,
  [data-connection-state],
  [data-sync-state]
) > :where(.status-label, .state-label, strong) {
  color: var(--text-strong);
}

:where(.connection-detail, .sync-detail, .workflow-detail, .status-detail) {
  min-width: 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

:where(.connection-actions, .sync-actions, .recovery-actions, .conflict-actions, .workflow-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-inline-start: auto;
}

:where(.connection-dot, .sync-dot, .live-dot, .state-dot) {
  flex: 0 0 auto;
  inline-size: 0.72rem;
  block-size: 0.72rem;
  background: currentColor;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, currentColor 16%, transparent);
}

:where(
  [data-connection-state="online"],
  [data-sync-state="synced"],
  .is-online,
  .is-synced,
  .state-connected,
  .state-synced
) {
  color: var(--state-success);
  border-color: color-mix(in srgb, var(--state-success) 55%, var(--border));
}

:where(
  [data-connection-state="connecting"],
  [data-connection-state="reconnecting"],
  [data-sync-state="syncing"],
  [data-sync-state="saving"],
  .is-connecting,
  .is-reconnecting,
  .is-syncing,
  .is-saving,
  .state-connecting,
  .state-syncing
) {
  color: var(--state-info);
  border-color: color-mix(in srgb, var(--state-info) 55%, var(--border));
}

:where(
  [data-connection-state="offline"],
  [data-sync-state="queued"],
  [data-sync-state="pending"],
  .is-offline,
  .is-queued,
  .is-pending,
  .state-offline,
  .state-queued
) {
  color: var(--state-warning);
  border-color: color-mix(in srgb, var(--state-warning) 58%, var(--border));
}

:where(
  [data-connection-state="failed"],
  [data-sync-state="failed"],
  [data-sync-state="conflict"],
  .is-failed,
  .is-conflicted,
  .state-failed,
  .state-conflict
) {
  color: var(--state-danger);
  border-color: color-mix(in srgb, var(--state-danger) 62%, var(--border));
}

/* --------------------------------------------------------------------------
   Busy, loading, saving, and skeleton states
   -------------------------------------------------------------------------- */

:where([aria-busy="true"], .is-loading, .is-saving, .is-processing) {
  cursor: progress;
}

:where(.loading-region, .busy-region, .processing-region, .saving-region) {
  position: relative;
  min-height: 4rem;
}

:where(.loading-indicator, .saving-indicator, .processing-indicator, .sync-indicator) {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  color: var(--text-muted);
  font-weight: 650;
}

:where(.loading-indicator, .saving-indicator, .processing-indicator, .sync-indicator)::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  border: 0.18rem solid color-mix(in srgb, var(--border-strong) 62%, transparent);
  border-block-start-color: var(--accent-strong);
  border-radius: 50%;
  animation: rhyddid-state-spin 0.8s linear infinite;
}

:where(.skeleton, .skeleton-line, .skeleton-block, [data-placeholder="loading"]) {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  background: color-mix(in srgb, var(--surface-soft) 86%, var(--border));
  border-color: transparent !important;
  border-radius: var(--radius);
  user-select: none;
}

:where(.skeleton, .skeleton-line, .skeleton-block, [data-placeholder="loading"])::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 18%,
    color-mix(in srgb, var(--text) 9%, transparent) 45%,
    transparent 72%
  );
  transform: translateX(-110%);
  animation: rhyddid-skeleton-sweep 1.5s ease-in-out infinite;
}

.skeleton-line {
  min-height: 0.9rem;
  margin-block: 0.45rem;
}

.skeleton-line--short {
  max-width: 42%;
}

.skeleton-line--medium {
  max-width: 68%;
}

.skeleton-block {
  min-height: 7rem;
}

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

@keyframes rhyddid-skeleton-sweep {
  to { transform: translateX(110%); }
}

/* --------------------------------------------------------------------------
   Progress bars, operation progress, and multi-step workflows
   -------------------------------------------------------------------------- */

:where(.operation-progress, .sync-progress, .workflow-progress) {
  display: grid;
  gap: 0.45rem;
}

:where(.progress-label-row, .progress-meta) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 0.925rem;
}

:where(progress, .progress, .progress-track) {
  inline-size: 100%;
  min-block-size: 0.72rem;
  overflow: hidden;
  accent-color: var(--accent);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
}

:where(progress)::-webkit-progress-bar {
  background: var(--surface-soft);
}

:where(progress)::-webkit-progress-value {
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-strong));
}

:where(progress)::-moz-progress-bar {
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-strong));
}

:where(.workflow-steps, .progress-steps, .stepper) {
  display: grid;
  grid-template-columns: repeat(var(--step-count, auto-fit), minmax(8rem, 1fr));
  gap: 0;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
  counter-reset: rhyddid-step;
}

:where(.workflow-steps, .progress-steps, .stepper) > :where(li, .step) {
  position: relative;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  min-width: 0;
  padding: 2.2rem 0.8rem 0.75rem;
  color: var(--text-muted);
  text-align: center;
  counter-increment: rhyddid-step;
}

:where(.workflow-steps, .progress-steps, .stepper) > :where(li, .step)::before {
  content: counter(rhyddid-step);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  color: var(--text-strong);
  background: var(--surface-raised);
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  transform: translateX(-50%);
}

:where(.workflow-steps, .progress-steps, .stepper) > :where(li, .step)::after {
  content: "";
  position: absolute;
  inset-block-start: 0.82rem;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background: var(--border);
}

:where(.workflow-steps, .progress-steps, .stepper) > :where(li, .step):first-child::after {
  inset-inline-start: 50%;
  inline-size: 50%;
}

:where(.workflow-steps, .progress-steps, .stepper) > :where(li, .step):last-child::after {
  inline-size: 50%;
}

:where(.workflow-steps, .progress-steps, .stepper) > :where(.is-complete, [data-step-state="complete"]) {
  color: var(--text);
}

:where(.workflow-steps, .progress-steps, .stepper) > :where(.is-complete, [data-step-state="complete"])::before {
  content: "✓";
  color: var(--surface-raised);
  background: var(--state-success);
  border-color: var(--state-success);
}

:where(.workflow-steps, .progress-steps, .stepper) > :where(.is-current, [aria-current="step"]) {
  color: var(--text-strong);
  font-weight: 700;
}

:where(.workflow-steps, .progress-steps, .stepper) > :where(.is-current, [aria-current="step"])::before {
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent) 22%, transparent);
}

/* --------------------------------------------------------------------------
   Queued work and replay lists
   -------------------------------------------------------------------------- */

:where(.operation-queue, .sync-queue, .replay-queue, .pending-operations) {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.queue-item, .operation-item, .pending-operation, .replay-item) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem 1rem;
  align-items: center;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-inline-start: 0.3rem solid var(--state-warning);
  border-radius: var(--radius);
}

:where(.queue-item, .operation-item, .pending-operation, .replay-item) > :where(.queue-summary, .operation-summary) {
  min-width: 0;
  overflow-wrap: anywhere;
}

:where(.queue-item, .operation-item, .pending-operation, .replay-item) > :where(.queue-meta, .operation-meta) {
  color: var(--text-muted);
  font-size: 0.9rem;
}

:where(.queue-item, .operation-item, .pending-operation, .replay-item).is-blocked,
:where(.queue-item, .operation-item, .pending-operation, .replay-item)[data-state="blocked"] {
  border-inline-start-color: var(--state-danger);
}

:where(.queue-item, .operation-item, .pending-operation, .replay-item).is-complete,
:where(.queue-item, .operation-item, .pending-operation, .replay-item)[data-state="complete"] {
  border-inline-start-color: var(--state-success);
}

/* --------------------------------------------------------------------------
   Recovery, conflict, stale-data, and blocked-action panels
   -------------------------------------------------------------------------- */

:where(
  .recovery-panel,
  .offline-panel,
  .reconnect-panel,
  .conflict-panel,
  .stale-panel,
  .blocked-panel,
  .retry-panel,
  .operation-error
) {
  display: grid;
  gap: 0.85rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-inline-start: 0.32rem solid var(--state-warning);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

:where(.conflict-panel, .operation-error) {
  border-inline-start-color: var(--state-danger);
}

:where(.reconnect-panel, .retry-panel) {
  border-inline-start-color: var(--state-info);
}

:where(.recovery-panel, .offline-panel, .reconnect-panel, .conflict-panel, .stale-panel, .blocked-panel, .retry-panel, .operation-error)
  > :where(h2, h3, h4, .panel-title, .state-title) {
  margin: 0;
  color: var(--text-strong);
}

:where(.conflict-comparison, .value-comparison, .resolution-comparison) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

:where(.local-value, .server-value, .current-value, .incoming-value) {
  min-width: 0;
  padding: 0.85rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

:where(.local-value, .incoming-value)::before,
:where(.server-value, .current-value)::before {
  display: block;
  margin-block-end: 0.35rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.local-value::before { content: "Local value"; }
.incoming-value::before { content: "Incoming value"; }
.server-value::before { content: "Server value"; }
.current-value::before { content: "Current value"; }

:where(.blocked-reason, .stale-reason, .failure-reason, .recovery-detail) {
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Live sessions, participants, heartbeats, and update notices
   -------------------------------------------------------------------------- */

:where(.live-session, .shared-session, .collaboration-session) {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

:where(.session-header, .live-session__header, .shared-session__header) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  justify-content: space-between;
}

:where(.participant-list, .session-participants, .active-viewers) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.participant, .session-participant, .active-viewer) {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  min-width: 0;
  padding: 0.35rem 0.55rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow-wrap: anywhere;
}

:where(.new-updates, .updates-available, .refresh-notice) {
  position: sticky;
  inset-block-start: calc(var(--sticky-offset, 0px) + 0.75rem);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.85rem;
  color: var(--text-strong);
  background: color-mix(in srgb, var(--surface-raised) 94%, var(--accent));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* --------------------------------------------------------------------------
   Screen-reader live regions and state timestamps
   -------------------------------------------------------------------------- */

:where(.live-region-visually-hidden, .status-announcement, .sync-announcement) {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:where(.state-time, .sync-time, .last-updated, .last-synced) {
  color: var(--text-muted);
  font-size: 0.88rem;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   Responsive, reduced-motion, forced-colors, and print behavior
   -------------------------------------------------------------------------- */

@media (max-width: 44rem) {
  :where(.connection-actions, .sync-actions, .recovery-actions, .conflict-actions, .workflow-actions) {
    inline-size: 100%;
    margin-inline-start: 0;
  }

  :where(.connection-actions, .sync-actions, .recovery-actions, .conflict-actions, .workflow-actions) > :where(a, button, .btn) {
    flex: 1 1 10rem;
    justify-content: center;
  }

  :where(.workflow-steps, .progress-steps, .stepper) {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  :where(.workflow-steps, .progress-steps, .stepper) > :where(li, .step) {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    padding: 0.55rem 0;
    text-align: start;
  }

  :where(.workflow-steps, .progress-steps, .stepper) > :where(li, .step)::before {
    position: static;
    grid-row: 1 / span 2;
    transform: none;
  }

  :where(.workflow-steps, .progress-steps, .stepper) > :where(li, .step)::after {
    display: none;
  }

  :where(.queue-item, .operation-item, .pending-operation, .replay-item) {
    grid-template-columns: 1fr;
  }

  :where(.conflict-comparison, .value-comparison, .resolution-comparison) {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.loading-indicator, .saving-indicator, .processing-indicator, .sync-indicator)::before,
  :where(.skeleton, .skeleton-line, .skeleton-block, [data-placeholder="loading"])::after {
    animation: none;
  }
}

@media (forced-colors: active) {
  :where(
    .connection-status,
    .sync-status,
    .live-status,
    .workflow-status,
    .resilience-status,
    [data-connection-state],
    [data-sync-state],
    .queue-item,
    .operation-item,
    .pending-operation,
    .replay-item,
    .recovery-panel,
    .offline-panel,
    .reconnect-panel,
    .conflict-panel,
    .stale-panel,
    .blocked-panel,
    .retry-panel,
    .operation-error,
    .live-session,
    .shared-session,
    .collaboration-session
  ) {
    border-color: CanvasText;
  }

  :where(.connection-dot, .sync-dot, .live-dot, .state-dot) {
    forced-color-adjust: none;
    background: CanvasText;
    border-color: Canvas;
  }
}

@media print {
  :where(
    .connection-actions,
    .sync-actions,
    .recovery-actions,
    .conflict-actions,
    .workflow-actions,
    .loading-indicator,
    .saving-indicator,
    .processing-indicator,
    .sync-indicator,
    .skeleton,
    .skeleton-line,
    .skeleton-block,
    [data-placeholder="loading"],
    .new-updates,
    .updates-available,
    .refresh-notice
  ) {
    display: none !important;
  }

  :where(.recovery-panel, .offline-panel, .reconnect-panel, .conflict-panel, .stale-panel, .blocked-panel, .retry-panel, .operation-error) {
    box-shadow: none;
    break-inside: avoid;
  }
}