/* The look inside on the front page: the live invoice editor, loaded into
   the slot by its frame (`samples/invoices/show`). The slot holds the height
   the editor will take, so the page keeps its shape while it loads; the
   editor inside is the app's own, styled by the app's own files. */

@layer components {
  /* The app's canvas behind the editor: its cards are the surface colour,
     which is the home page's own background. */
  .home-sample__slot {
    background: var(--color-canvas);
    border-radius: var(--radius-xl);
    display: block;
    margin-block-start: 3rem;
    min-block-size: 28rem;
    padding: 1rem;
    text-align: start;

    @media (width >= 768px) {
      padding: 2rem;
    }

    @media (width >= 1024px) {
      min-block-size: 34rem;
    }
  }

  /* The mascot strolling in the empty slot until the editor arrives, as it
     does on a bill being read (`.bill-processing`). */
  .home-sample__loading {
    align-items: center;
    color: var(--color-ink-muted);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
    min-block-size: inherit;
  }

  .home-sample__loading-text {
    font-size: 1.125rem;
    margin: 0;
  }

  /* ─── The walk through the editor ───────────── */

  /* Under 768px the editor is walked a step at a time rather than read as one
     long column. A panel wraps the blocks of one step; from 768px up it
     dissolves, so above that width the editor is exactly the column it was
     before the walk existed — and so a stream replacing what is inside a panel
     leaves the panel, and the step it belongs to, alone. */
  .home-sample__panel {
    @media (width >= 768px) {
      display: contents;
    }
  }

  @media (width < 768px) {
    /* A step spaces its own blocks, because the column's gap only ever fell
       between panels. What spaces one panel from the next is the margin the
       app's own narrow layout already puts on the side column's blocks — so
       the last step reads as it did before the walk existed. */
    .home-sample__editor .home-sample__panel {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      scroll-margin-block-start: calc(var(--home-header-block-size) + 1rem);
    }
  }

  /* The bar belongs to the walk, so it is there only while the walk is on —
     which is the controller's word, not the width's: without JavaScript the
     editor stays the long column and a bar of dead arrows would be a lie.

     It is sticky rather than fixed, so it arrives and leaves with the section
     instead of following the reader down the whole page. */
  .home-sample__walk {
    display: none;
  }

  @media (width < 768px) {
    .home-sample__editor--walked .home-sample__walk {
      backdrop-filter: blur(12px);
      background: var(--color-glass);
      border: 1px solid var(--color-glass-edge);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-popover);
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
      inset-block-end: 0.75rem;

      /* The gap between the step and the bar at rest. It need only be a gap:
         while the bar is pinned the step's last block passes under it, and
         scrolling to the end of the step sets the bar down and brings the
         block out again. The room is the bar's own margin rather than padding
         on the panels, because a step can be several panels and padding on
         each would open the gap three times over inside the last one. */
      margin-block-start: 2rem;
      margin-inline: auto;
      max-inline-size: 26rem;
      padding: 0.75rem;
      position: sticky;
      z-index: var(--z-sticky);
    }
  }

  .home-sample__walk-head {
    align-items: baseline;
    display: flex;
    gap: 0.5rem;
    margin: 0;
  }

  .home-sample__walk-count {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
  }

  .home-sample__walk-name {
    font-size: 0.8125rem;
    font-weight: 700;
  }

  .home-sample__walk-buttons {
    display: flex;
    gap: 0.5rem;
  }

  .home-sample__walk-btn {
    flex: 1;
    gap: 0.375rem;
  }

  /* ─── Claim card ───────────────────────────── */

  .sample-claim__hint {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
    margin-block-start: 0.375rem;
  }

  .sample-claim__sent {
    color: var(--color-positive);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    margin-block-end: 0.75rem;
  }
}