@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * RESTART STATE
 * A chromeless modal: the dialog is the scrim, and the card is centred in it. Nothing in it
 * dismisses it, so the card has no close button and no header rule.
 * ======================================== */

  .cinder-restart-state__layout {
    display: grid;
    grid-template-columns: minmax(0, 28rem);
    justify-content: center;
    align-content: center;
    box-sizing: border-box;
    min-block-size: 100%;
    padding: var(--cinder-space-4);
  }

  .cinder-restart-state__card {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-3);
    box-sizing: border-box;
    inline-size: 100%;
    padding: var(--cinder-space-5);
    background: var(--cinder-surface-raised);
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-lg);
    box-shadow: var(--cinder-shadow-lg);
    color: var(--cinder-text-default);
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-normal);
  }

  /* A failure is red on the whole card: the rule and the heading. */
  .cinder-restart-state__card[data-cinder-phase='failed'] {
    border-color: var(--cinder-status-danger-border);
  }

  .cinder-restart-state__title {
    display: flex;
    align-items: center;
    gap: var(--cinder-space-2);
    margin: 0;
    font-size: var(--cinder-text-base);
    font-weight: var(--cinder-font-semibold);
    line-height: var(--cinder-leading-snug);
  }

  .cinder-restart-state__card[data-cinder-phase='failed'] .cinder-restart-state__title {
    color: var(--cinder-status-danger-text);
  }

  .cinder-restart-state__icon {
    display: inline-flex;
    flex: none;
    color: var(--cinder-accent-text);
  }

  .cinder-restart-state__card[data-cinder-phase='reconnecting'] .cinder-restart-state__icon {
    color: var(--cinder-status-warning-text);
  }

  .cinder-restart-state__card[data-cinder-phase='failed'] .cinder-restart-state__icon {
    color: var(--cinder-status-danger-text);
  }

  .cinder-restart-state__card[data-cinder-phase='restarting'] .cinder-restart-state__icon svg {
    animation: cinder-restart-state-spin 1.2s linear infinite;
  }

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

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-restart-state__icon
      svg {
      animation: none;
    }
  }

  .cinder-restart-state__description {
    margin: 0;
    color: var(--cinder-text-muted);
  }

  /* ----------------------------------------
 * Reconnecting: the attempts, one segment each
 * ---------------------------------------- */

  .cinder-restart-state__attempts {
    display: flex;
    gap: var(--cinder-space-1-5);
  }

  .cinder-restart-state__segment {
    flex: 1 1 0;
    block-size: 0.25rem;
    border-radius: var(--cinder-radius-full);
    /* A track a step above the card, so unreached attempts stay visible on the raised surface. */
    background: color-mix(in oklch, var(--cinder-text-subtle) 28%, transparent);
  }

  .cinder-restart-state__segment[data-cinder-filled] {
    background: var(--cinder-accent-solid);
  }

  /* ----------------------------------------
 * Failed: what to check, the details, the command
 * ---------------------------------------- */

  .cinder-restart-state__check {
    padding: var(--cinder-space-3);
    background: var(--cinder-surface-inset);
    border-radius: var(--cinder-radius-md);
  }

  .cinder-restart-state__check-title {
    margin: 0;
    font-weight: var(--cinder-font-semibold);
  }

  .cinder-restart-state__check-text {
    margin: 0;
    color: var(--cinder-text-muted);
  }

  .cinder-restart-state__details-summary {
    cursor: pointer;
    inline-size: fit-content;
    color: var(--cinder-accent-text);
  }

  .cinder-restart-state__details-body {
    margin-block-start: var(--cinder-space-2);
    overflow-wrap: anywhere;
  }

  .cinder-restart-state__command {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cinder-space-2);
  }

  .cinder-restart-state__command-text {
    padding: var(--cinder-space-0-5) var(--cinder-space-2);
    background: var(--cinder-surface-inset);
    border: 1px solid var(--cinder-border-muted);
    border-radius: var(--cinder-radius-sm);
    font-family: var(--cinder-font-mono);
    font-size: var(--cinder-text-xs);
    overflow-wrap: anywhere;
  }

  .cinder-restart-state__actions {
    display: flex;
    justify-content: flex-end;
  }

  /* A phone gets the full width and a 44px target for the one action. */
  @media (pointer: coarse) {
    .cinder-restart-state__actions .cinder-button {
      min-block-size: 2.75rem;
    }
  }

  @media (forced-colors: active) {
    .cinder-restart-state__card {
      border-color: CanvasText;
    }

    .cinder-restart-state__segment {
      background: GrayText;
    }

    .cinder-restart-state__segment[data-cinder-filled] {
      background: Highlight;
    }
  }
}