/*
 * .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;
  }

  /* 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; }

  /* Mobile: the desktop treatment (24px gutters + 40px inline padding) eats a
     third of a phone screen. Go full-bleed with a single pad unit; the head's
     negative margins mirror the reduced padding so it still reaches the edges. */
  @media (max-width: 640px) {
    .canvas {
      width: 100%;
      margin-block: 0;
      border-radius: 0;
      padding-block: var(--u-pad);
      padding-inline: var(--u-pad);
    }
    .canvas__head {
      margin-block-start: calc(var(--u-pad) * -1);
      margin-inline: calc(var(--u-pad) * -1);
      margin-block-end: var(--u-pad);
      padding-inline: var(--u-pad) 0;
      border-radius: 0;
    }
  }
}