@layer components {
  .site-nav .account-toggle {
    max-inline-size: 100%;
    white-space: normal;
    text-align: start;
  }

  .account-menu a[href^="/menu-recommendations"] {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .menu-recommendation {
    padding: clamp(var(--space-s), 3vw, var(--space-l));
    overflow-wrap: anywhere;

    h2 { font-size: var(--step-1); }
    h3 { font-size: var(--step-0); }
    fieldset { min-inline-size: 0; }
    fieldset p { margin-block: var(--space-xs); }
    .menu-reading:empty { display: none; }
    .menu-reading { color: var(--muted); }
    .menu-error { color: var(--over); }
    .menu-caution:empty { display: none; }

    .menu-photo-controls {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-s);

      .btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        min-inline-size: var(--touch);
        min-block-size: var(--touch);
        max-inline-size: 100%;
        margin: 0;
        cursor: pointer;
        .glyph { inline-size: 1.25em; block-size: 1.25em; }
        &:has(:focus-visible) {
          outline: var(--stroke) solid var(--paprika);
          outline-offset: var(--space-2xs);
        }
      }
      .menu-camera { display: none; }
      @media (any-pointer: coarse) {
        .menu-camera { display: inline-flex; }
      }
    }

    fieldset:disabled .btn { opacity: 0.65; cursor: wait; }

    .menu-options {
      display: flex;
      flex-direction: column;
      gap: var(--space-s);
      list-style: none;
      padding: 0;
      li {
        padding: var(--space-s);
        background: var(--paper);
        border: thin solid var(--mist);
        border-radius: var(--radius-s);
      }
      h3, p { margin-block: var(--space-xs); }
    }

    .menu-context {
      border-block-start: thin solid var(--mist);
      margin-block-start: var(--space-l);
      padding-block-start: var(--space-s);
    }

    .menu-context-groups {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-m);
      > section { flex: 1 1 9rem; min-inline-size: 0; }
      dl { margin: 0; }
      dl > div {
        display: flex;
        justify-content: space-between;
        gap: var(--space-xs);
      }
      dd { margin: 0; font-variant-numeric: tabular-nums; }
    }
  }
}