/*
 * .canvas — the app content panel (was .main-content): a centered, fixed-width
 * surface floating on the tinted page background. Grows to fill between header
 * and footer. `.canvas__head` is a thin strip hugging the top border.
 */
@layer components {
  .canvas {
    flex: 1;
    position: relative;
    width: calc(100% - 3rem);     /* 48px gutter, 24px (1.5rem) each side */
    max-width: 68rem;             /* 1088px hard cap */
    margin-inline: auto;
    margin-block: var(--u-pad);
    padding-block: calc(var(--u-pad) * 2);
    padding-inline: 2.5rem;       /* 40px each side */
    background: var(--canvas);
    border-radius: var(--radius-2); /* one level less round than cards */
    box-sizing: border-box;
  }

  /* Attendee (public) shell: a mobile-wide single column with tight inline
     padding so content gets the width. The admin backend keeps the full-width,
     roomier .canvas. */
  .canvas--narrow { max-width: 44rem; padding-inline: 1em; }
  /* Keep the sticky head full-bleed against the tighter padding. */
  .canvas--narrow .canvas__head {
    margin-inline: -1em;
    padding-inline: 1em 0;
  }

  /* Phones: shrink the gutter, block margin, and inline padding so the column
     isn't boxed in — content gets the width. Heads mirror the reduced padding. */
  @media (width < 48rem) {
    .canvas {
      width: calc(100% - 1rem);          /* 8px gutter each side, down from 24px */
      margin-block: calc(var(--u-pad) / 2);
      padding-inline: 1.25rem;           /* admin/full canvas */
    }
    .canvas__head { margin-inline: -1.25rem; padding-inline: 1.25rem 0; }

    .canvas--narrow { padding-inline: 0.75rem; } /* public column: 12px each side */
    .canvas--narrow .canvas__head { margin-inline: -0.75rem; padding-inline: 0.75rem 0; }
  }

  /* thin top strip hugging the canvas border: full-bleed (negates the canvas
     padding), no block padding, minor inline padding. Breadcrumb left, context
     menu right. The -4rem / -2×u-pad margins mirror the canvas padding above. */
  .canvas__head {
    position: sticky;
    inset-block-start: 0;         /* sticks to the top when scrolling long content */
    z-index: 1;                   /* content scrolls under it */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--u-pad);
    margin-block-start: calc(var(--u-pad) * -2);
    margin-inline: -2.5rem;       /* mirror the canvas padding-inline to reach the edges */
    margin-block-end: calc(var(--u-pad) * 2);
    padding-block: 0;
    padding-inline: 2.5rem 0;     /* breadcrumb aligns with content; toggle flush right */
    /* ≈ the ⋯ icon-button height, so heads without the menu keep the standard strip size */
    min-block-size: calc(var(--u-pad) * 2.5);
    background: var(--canvas);    /* opaque so scrolling content doesn't show through */
    border-block-end: var(--border-size-1) solid var(--line);
    border-start-start-radius: var(--radius-2); /* match the canvas top corners */
    border-start-end-radius: var(--radius-2);
  }

  /* Right-side group on menu pages: keeps Edit snug against the ... trigger
     (the head is space-between, so they must share one flex child). Half a
     pad of air from the canvas edge; the popover compensates to stay flush
     (see .menu--context). */
  .canvas__head-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--u-pad) / 4);
    padding-inline-end: calc(var(--u-pad) / 2);
  }

  /* the ... trigger matches the other head buttons: 32px, square */
  .canvas__head-actions .button--icon {
    block-size: calc(var(--u-pad) * 2);
    inline-size: calc(var(--u-pad) * 2);
    padding: 0;
  }

  /* Action buttons in the head (menu: false clusters, and the standalone Edit
     link beside the ... menu): shorter than the standard button so about half a
     pad of air sits above/below them inside the standard-height strip, which
     stays exactly as tall as on menu pages. */
  .canvas__head .u-cluster { padding-inline-end: calc(var(--u-pad) / 2); }

  .canvas__head .u-cluster .button,
  .canvas__head .canvas__head-action {
    /* 32px in the 40px strip — about a quarter-pad of air above/below */
    block-size: calc(var(--u-pad) * 2);
    padding-block: 0;             /* inline-flex centers the label vertically */
    padding-inline: calc(var(--u-pad) / 1.5);
    font-size: var(--font-size-0);
  }

  /* icon buttons (e.g. the scheduler clock) square up via aspect-ratio; the
     label padding above would crush their content box and shrink the icon */
  .canvas__head .u-cluster .button--icon { padding-inline: 0; }

}